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