webpack4新增了哪些东西？需要注意些什么？

本篇文章给大家带来的内容是关于webpack4新增了哪些东西？需要留意些什么？有必然的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

在开发人员还在体味webpack3.x的余韵时，webpack4.x已经悄然而来。

而对使用者来说，最等待的问题无外乎如下：

• 新版本与旧版本比拟都是什么改动？

• webpack3.x到webapck4.x的迁移？

• 使用webpack4.x我们应当留意什么？

webpack的新特性

webpack 作为构建工具的强大之处在于：

• 可以在 webpack.config.js 中配置许多奇特的功效；

• 它的配置灵敏多变；

但正由于这样，这也是它的糟点。由于太随便，所以不好操纵，造成了如下的问题：

• 学习、使用、研讨webpack的成本过高（进阶曲线太陡）；

• 构建一个小利用也需要像构建大利用那样配置 webpack.config.js（麻雀虽小五脏俱全）；

而webpack4.x作为新一代版本 webpack ，它的显现极大的解决了现有的问题。

webpackk4.x可以不使用 webpack.config.js 配置文件

可以使用下面6小步完成项目的构建：

1. 创立一个项目名目（webpack-demo），然后进入改名目

   mkdir webpack-demo && cd webpack-demo

2. 初始化 package.json 文件

   npm init -y

3. 加载 webpack 和 webpack-cli 依靠

   npm install webpack webpack-cli --save-dev

4. 在项目中增加 ~/src/index.js 文件（index.js 是默许的入口文件，默许入口名目为~/src，当然你也可以自定义入口文件，需要修改 package.json 中的 main 配置项为指定的文件）

index.js 文件代码如下：

console.log('hello webpack.')

翻开 package.json 在 scripts 配置项中增加如下代码：

"scripts": {
    "build": "webpack"
}

注：这就是NPM的 scripts 命令

运转 npm run build 命令，之后在项目中你将看到一个 ~/dist/main.js 的文件。在命令窗口你因该留意到如下的警告提醒：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

忽略这条提醒信息，我们发明webpack4.x的项目初始化配置和webpack3.x没什么大的不同，但是webpack4.x少了必需要的 webpack.config.js 配置文件。

打包模式的改动

我们再回过头查看上面这个提醒信息，它的意思就是说：‘假如没有设定打包模式这个配置项，那么默许的打包模式为生产模式（production），而关于开发模式（development），需要配置 mode 配置项’，说到这里，我想各位看官应当清楚了webpack4.x增添了许多默许配置项，针对不理解webpack的人员或小利用开发的场景，这样做无异省时省力。

但实际利用中，我们往往还是区分开发模式和生产模式，但这在webpack4.x中也不是啥难事儿，只要修改 package.json 中的 scripts 如下：

"scripts": {
    "dev": "webpack --mode development", // 用于开发模式
    "build": "webpack --mode production" // 用于生产模式
}

‘对！webpack4.x就是这么简便’。我们不需要像webpack3.x那样离别定义开发模式和生产模式这样两份配置文件。

重载默许的配置项入口/出口

没有了配置文件 webpack.config.js ，在减少了我们的配置工作量同时，也给初窥门径的我们带来了一些疑问。例如：怎样自定义入口/出口？

在没有 webpack.config.js 的状况下，我们可以在命令行中增加入口/出口配置项，代码如下：

"scripts": {
    "dev": "webpack --mode development ./src/entry.js --output ./dist/bundle.js", // 用于开发模式
    "build": "webpack --mode production ./src/entry.js --output ./dist/bundle.min.js" // 用于生产模式
}

这只是不使用 webpack.config.js 的一种方案。

以上就是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有如下问题需要留意：

1. 升级到webpack4.x，你会发明在使用 extract-text-webpack-plugin 别离 *.css 出文件时经常出错，这是 extract-text-webpack-plugin 本身的问题，官方引荐使用 mini-css-extract-plugin 来幸免问题的显现，但使用 mini-css-extract-plugin 有一个限制就是webapck须是4.2.0版本以上（较低的版本不支撑）。

2. 使用 使用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 依靠：

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 依靠：

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 依靠：

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 依靠，实现项目文件修改，阅读器及时刷新

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新增了哪些东西？需要留意些什么？的具体内容，更多请关注百分百源码网其它相关文章！