What's new in webpack4? What needs attention?

This article brings you what is new in webpack4? What needs attention? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

While developers are still experiencing the afterglow of webpack3.x, webpack4.x has quietly arrived.

For users, the most anticipated questions are as follows:

• What are the changes in the new version compared to the old version?

• Migration from webpack3.x to webapck4.x?

• What should we pay attention to when using webpack4.x?

New features of webpack

The power of webpack as a build tool lies in:

• Many unique features can be configured in webpack.config.js;

• Its configuration is flexible and changeable;

But because of this, That's also the bad thing about it. Because it is too casual, it is difficult to control, causing the following problems:

• The cost of learning, using, and researching webpack is too high (the progression curve is too steep);

• Building a small application also requires configuring webpack.config.js like building a large application (the sparrow is small but has all the internal organs);

And webpack4.x is a new The first generation version of webpack has greatly solved the existing problems.

webpackk4.x does not need to use the webpack.config.js configuration file

You can use the following 6 steps to complete the construction of the project:

1. Create one Project directory (webpack-demo), and then enter the changed directory

   mkdir webpack-demo && cd webpack-demo

2. Initialize the package.json file

   npm init -y

3. Load webpack and webpack-cli dependencies

   npm install webpack webpack-cli --save-dev

4. Add the ~/src/index.js file to the project (index.js is the default entry file, and the default entry directory is ~/src. Of course, you can also customize the entry file. You need to modify the main configuration in package.json The item is the specified file)

index.js file code is as follows:

console.log('hello webpack.')

Open package.json and add the following code in the scripts configuration item:

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

Note: This is the NPM scripts command

Run the npm run build command, and then you will see a ~/dist/main.js file in the project. In the command window, you should notice the following warning prompt:

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/

Ignore this prompt message. We found that the project initialization configuration of webpack4.x is not much different from webpack3.x, but webpack4.x is missing. The required webpack.config.js configuration file.

Changes in packaging mode

Let’s look back at the above prompt message. It means: 'If the configuration item of packaging mode is not set, then the default packaging mode is production mode (production), and for development Mode (development), you need to configure the mode configuration item. At this point, I think you readers should understand that webpack4. Save time and effort.

But in actual applications, we often distinguish between development mode and production mode, but this is not difficult in webpack4.x. Just modify the scripts in package.json as follows:

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

'right! webpack4.x is that simple’. We don't need to define two configuration files respectively for development mode and production mode like webpack3.x.

Overload the default configuration entry/exit

There is no configuration file webpack.config.js, which not only reduces our configuration workload, but also brings some questions to us who are just getting a glimpse of the method. For example: How to customize entrance/exit?

In the absence of webpack.config.js, we can add entry/exit configuration items in the command line, the code is as follows:

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

This is just without using webpack.config.js A plan.

The above are the overall changes that webpack4.x has brought to us.

But the function implementation in the module and plugins configuration items in the original webpack.config.js configuration file still requires the use of webpack.config.js. Although the webpack team's plan is to configure some commonly used loaders and plugins, only the UglifyJSPlugin built-in plug-in is implemented, which can compress *.js code without introducing it in production mode. Other loaders and plugins can only be introduced through webpack.config.js.

Webpack migration and precautions

Seeing these changes in webpack4.x, many people will not only ask whether the migration from webpack3.x to webpack4.x is easy Trouble, actually not troublesome, webpack4.x is backward compatible with webpack.3x.

In order not to introduce webpack.config.js, we used npm scripts. At that time, like the reloading of entrance/exit, we can also complete it in the webpack.config.js configuration file. The configuration is the same as the original are similar, but webpack4.x has the following issues that need attention:

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类同。

The above is the detailed content of What's new in webpack4? What needs attention?. For more information, please follow other related articles on the PHP Chinese website!