webpack4新增了哪些东西？需要注意些什么？(2)-木庄网络博客

以上就是webpack4.x给我们带来的整体变化。

但是原来 webpack.config.js 配置文件中的 module 和 plugins 配置项中的功能实现还是需要使用 webpack.config.js。虽然webpack团队的计划是 0 配置一些常用的loader，plugin，但实现的仅有 UglifyJSPlugin 内置插件，在生产模式无需引入它就可以实现 *.js 代码的压缩。其它的loader和plugin则只能通过 webpack.config.js 来引入。

webpack的迁移和注意事项

看到webpack4.x的这些变化，很多人不仅会问webpack3.x到webpack4.x的迁移是不是很麻烦，其实并不麻烦，webpack4.x向后兼容webpack.3x。

前面为了不引入 webpack.config.js ，我们使用了npm的 scripts ，其时像入口/出口的重载，我们也可以在 webpack.config.js 配置文件中完成，配置跟原来的相似，但是webpack4.x有如下问题需要注意：

升级到webpack4.x，你会发现在使用 extract-text-webpack-plugin 分离 *.css 出文件时经常出错，这是 extract-text-webpack-plugin 本身的问题，官方推荐使用 mini-css-extract-plugin 来避免问题的出现，但使用 mini-css-extract-plugin 有一个限制就是webapck须是4.2.0版本以上（较低的版本不支持）。
使用使用babel-loader 转化ES6->ES5时将不需要 .babelrc 配置文件，你只需要在 package.json 的 scripts 中添加 --module-bind js=babel-loader 即可完成对 babel-loader 的配置。

其他的loader和plugin没有什么大的变化。其实讲到这里基本完了，下面是用webpack4.x构建的一个demo。

webpack4.x的demo

紧接上面的配置：

首先，添加 html-wepback-plugin 和 html-loader 依赖：

1	`npm install html-webpack-plugin html-loader --save-dev`

html-webpack-plugin生成html文件（html文件用来加载打包生成 bundle.js 文件），当然你也可以使用webpack支持的各种模板loader，这里使用 html-loader 支持的 *.html 类型模板来生成。

其次，添加 mini-css-extract-plugin 和 css-loader 依赖：

1	`npm install mini-css-extract-plugin css-loader --save-dev`

loader和plugin配置与webpack3.x类同，也可参考下面提供代码中的 webpack.config.js 文件。

然后，添加 babel-loader 、@babel/babel-core 和 @babel/babel-preset 依赖：

1	`npm install @babel/core babel-loader @babel/preset-env --save-dev`

loader和plugin配置与webpack3.x类同，也可参考下面提供源码中的 webpack.config.js 文件。

修改 package.json 中 scripts 如下：

"scripts": {
    "dev": "webpack --mode development --module-bind js=babel-loader  ./src/entry.js --output ./dist/bundle.js",
    "build": "webpack --mode production ./src/entry.js --module-bind js=babel-loader --output ./dist/bundle.min.js"
},

最后，添加 webpack-dev-server 依赖，实现项目文件修改，浏览器及时刷新

1	`npm install webpack-dev-server`

在 package.json 中 scripts 的 dev 替换 webpack 为 webpack-dev-server 即可，代码如下：

"scripts": {
    "dev": "webpack-dev-server --mode development --module-bind js=babel-loader ./src/entry.js --output ./dist/bundle.js",
    "build": "webpack --mode production ./src/entry.js --module-bind js=babel-loader --output ./dist/bundle.min.js"
},

这样一个简单的demo就完成了。

其他的loader和plugin配置和webpack3.x类同。

以上就是webpack4新增了哪些东西？需要注意些什么？的详细内容，更多文章请关注木庄网络博客！

返回前面的内容