Webpack 是前端开发中最重要的工具之一，它可以将多个 JavaScript 文件打包成一个文件，并且还能处理 CSS、图片等资源文件。Webpack4 是 Webpack 的最新版本，在性能、体积等方面都有很大的提升。本文将介绍 Webpack4 的一些新特性，帮助你更好地使用它。
安装
首先，我们需要安装 Webpack4。打开终端，执行以下命令：
npm install webpack webpack-cli --save-dev
以上命令中，webpack-cli 是 Webpack4 对应的命令行工具。
打包 CSS
在 Webpack4 中，我们可以使用 mini-css-extract-plugin 插件来打包 CSS。这比之前的 extract-text-webpack-plugin 插件更加高效稳定。
首先，我们需要安装插件。在终端中执行以下命令：
npm install mini-css-extract-plugin --save-dev
接着，在 Webpack 配置文件中进行如下配置：
-- -------------------- ---- -------
----- -------------------- - ----------------------------------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
---- -
---------------------------- -- ----- ------------
------------
-
-
-
--
-------- -
--- ----------------------
--------- ------------
--
-
-以上配置中，MiniCssExtractPlugin.loader 用来替换之前的 style-loader，该插件会将 CSS 文件单独打包成一个文件，我们在 HTML 中引用即可。
按需加载
Webpack4 可以对 JavaScript 代码进行按需加载，这样可以减小文件体积，提高加载速度。我们可以使用 import() 或者 require.ensure() 语句来实现按需加载。
以 import() 为例，我们可以这样使用：
button.onclick = () => {
import('./dialog').then(module => {
module.showDialog()
})
}其中，./dialog 表示按需加载的模块路径。
Tree Shaking
Tree Shaking 是指将没有使用的代码从代码中剔除，以减小代码体积。Webpack4 通过内置的 UglifyJS 插件实现了 Tree Shaking。
在配置文件中开启 Tree Shaking：
module.exports = {
// ...
optimization: {
usedExports: true
},
// ...
}接着，在代码中使用 ES6 模块语法：
import { add } from './math'
console.log(add(1, 2))以上代码中，只有 add 方法被使用，其他未使用的代码会被自动剔除。
总结
以上就是 Webpack4 的一些新特性，可以让我们更好地构建前端应用。我们介绍了如何打包 CSS、按需加载和 Tree Shaking，这些都是 Webpack4 中比较重要的特性。希望这篇文章能够帮助你更好地使用 Webpack4。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647748a0968c7c53b03cf0d2
