Webpack4 新特性快速入门

阅读时长 3 分钟读完

Webpack 是前端开发中最重要的工具之一,它可以将多个 JavaScript 文件打包成一个文件,并且还能处理 CSS、图片等资源文件。Webpack4 是 Webpack 的最新版本,在性能、体积等方面都有很大的提升。本文将介绍 Webpack4 的一些新特性,帮助你更好地使用它。

安装

首先,我们需要安装 Webpack4。打开终端,执行以下命令:

以上命令中,webpack-cli 是 Webpack4 对应的命令行工具。

打包 CSS

在 Webpack4 中,我们可以使用 mini-css-extract-plugin 插件来打包 CSS。这比之前的 extract-text-webpack-plugin 插件更加高效稳定。

首先,我们需要安装插件。在终端中执行以下命令:

接着,在 Webpack 配置文件中进行如下配置:

-- -------------------- ---- -------
----- -------------------- - ----------------------------------

-------------- - -
  -- ---
  ------- -
    ------ -
      -
        ----- ---------
        ---- -
          ---------------------------- -- ----- ------------
          ------------
        -
      -
    -
  --
  -------- -
    --- ----------------------
      --------- ------------
    --
  -
-

以上配置中,MiniCssExtractPlugin.loader 用来替换之前的 style-loader,该插件会将 CSS 文件单独打包成一个文件,我们在 HTML 中引用即可。

按需加载

Webpack4 可以对 JavaScript 代码进行按需加载,这样可以减小文件体积,提高加载速度。我们可以使用 import() 或者 require.ensure() 语句来实现按需加载。

import() 为例,我们可以这样使用:

其中,./dialog 表示按需加载的模块路径。

Tree Shaking

Tree Shaking 是指将没有使用的代码从代码中剔除,以减小代码体积。Webpack4 通过内置的 UglifyJS 插件实现了 Tree Shaking。

在配置文件中开启 Tree Shaking:

接着,在代码中使用 ES6 模块语法:

以上代码中,只有 add 方法被使用,其他未使用的代码会被自动剔除。

总结

以上就是 Webpack4 的一些新特性,可以让我们更好地构建前端应用。我们介绍了如何打包 CSS、按需加载和 Tree Shaking,这些都是 Webpack4 中比较重要的特性。希望这篇文章能够帮助你更好地使用 Webpack4。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/647748a0968c7c53b03cf0d2

纠错
反馈