Webpack入门系列（二）

本文对系列（一）中的配置进行进一步优化 ，提高兼容性。

前一篇传送门Webpack入门系列（一）

一、postcss

我们可以通过查看官方文档可知post-css是一个用 JavaScript 工具和插件转换 CSS 代码的工具。可以帮我们对css代码做一些兼容性处理，适配多种浏览器。

接下来，我们使用一下postcss-loader来处理一下css文件

首先安装插件 npm i -D postcss-loader postcss 在css-loader之后添加postcss-loader,如下

      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "postcss-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/i,
        use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
      },

postcss-preset-env

当然还有一些其他的配置，但是postcss有默认的配置，我们需要安装npm i -D postcss-preset-env 然后在根目录创建postcss.config.js文件

module.exports = {
  plugins: [require("postcss-preset-env")],
};

autoprefixe

除了配置预设之外，如果还想要自动兼容ie等浏览器，我们需要安装另外一个postcss插件，来达到自动添加前缀的效果 npm i -D autoprefixer

在postcss.config.js文件中引入

module.exports = {
  plugins: [require("postcss-preset-env"), require("autoprefixer")],
};

插件引入了，我们得告诉插件要设配哪些浏览器以及浏览器的办版本，这就用到了package.json文件中的browserslist配置，如下

 "browserslist": [
    "ie 8",
    "last 2 versions",
    "> 1%"
  ]

其中ie 8就不需要介绍了吧，老朋友了，要适配的ie浏览器的版本。last 2 versions代表浏览器的最新两个版本。> 1%指适配使用大于1%的浏览器。

然后我们在css中写点css3的代码，然后重新npm run dev 我们可以看到真的加上了前缀代码

好了postcss暂时就介绍到这。

二、babel

css的兼容性处理好了，那js呢。

我们在第一篇没有配置对js文件的处理。其实对js的编译主要是靠babel来实现的。 Babel 是一个工具链，主要用于在当前和旧的浏览器或环境中，将 ECMAScript 2015+ 代码转换为 JavaScript 向后兼容版本的代码。

babel中有babel-loader来处理js文件，简单介绍一下。

我们先在main.js中写一些es6或更高级的语法，比如

我们打包一下看一下效果

发现main.js中的代码被原封不动的打包了，这样肯定是不行的。我们需要把es6或更高级的代码转换成es5或大部分浏览器能识别的代码。这里就需要babel来对js进行转换。

babel-loader

首先安装依赖npm i -D babel-loader @babel/core @babel/preset-env 我们配置一下babel-loader

{
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: "babel-loader",
          },
        ],
      },

同样，babel也有对应的预设。创建babel.config.js文件，配置预设

module.exports = {
  presets: ["@babel/preset-env"],
};

然后重新build一下

发现const，箭头函数，剩余参数等es6代码已经被转换成es5代码了，但是reduce，promise等高级语法没有被转换。

这是为什么呢？因为babel本身对于js代码转换不够多，需要三方插件如core-js来实现

core-js

npm i -D core-js@3 在babel中配置core-js

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage",
        corejs: "3.28",
      },
    ],
  ],
};

其中useBuiltIns就是引入corejs的方式，usage就是常说的按需加载，而corejs就是指的是core-js的版本。

然后build一下看一下

发现了这些高级语法都是从core-js中引入了。好了js的兼容就实现了。

但是我们发现了一些问题，就是用babel来转化js代码之后，打包速度变慢了很多，而且打包出来的文件也很大。

这里我们需要做一些优化

@babel/runtime

Babel 在每个文件都插入了辅助代码，使代码体积过大！

Babel 对一些公共方法使用了非常小的辅助代码，比如 _extend。默认情况下会被添加到每一个需要它的文件中。

可以引入 Babel runtime 作为一个独立模块，来避免重复引入。

我们可以禁用 Babel 自动对每个文件的 runtime 注入，而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。

npm i -D @babel/plugin-transform-runtime @babel/runtime

然后配置babel.config.js，启用runtime插件

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage",
        corejs: "3",
      },
    ],
  ],
  plugins: ["@babel/plugin-transform-runtime"],
};

配置好了，但是我们的js代码文件太小了，没有办法体现runtime提取公共方法带来的文件体积减小的好处。

cacheDirectory

我们可以通过给babel每次编译时将结果缓存，这样可以大大的提高第二次编译速度。 通过开启缓存目录即可，如下

{
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: "babel-loader",
            options: {
              cacheDirectory: true,
            },
          },
        ],
},

启动一下项目看一下，果然有缓存文件

三、提取单独css文件

目前来说，我们的css文件都被打包在mian.js文件，这就造成了main.js文件过于大，首页加载会长时间的白屏，体验非常不好。这时，就会考虑到能不能在打包的时候，将原来的css文件单独提取成css文件呢？

mini-css-extract-plugin

当然是可以的，我们可以使用mini-css-extract-plugin插件来实现。 安装依赖 npm install --save-dev mini-css-extract-plugin 使用插件

plugins:[
......
new MiniCssExtractPlugin({
      filename: "static/css/[name].css",
}),
]

修改loader，我们不再需要生成style标签插入html文件中了。

然后我们build一下，发现真的提取了一个单独的css文件

四、代码压缩

css代码压缩

css代码压缩主要用到了 css-minimizer-webpack-plugin插件， 我们来使用一下

npm install css-minimizer-webpack-plugin --save-dev

使用插件

好了，build一下看一下。

css代码都被压缩到一行了，压缩效果实现。

js代码压缩

webpack v5 开箱即带有最新版本的 terser-webpack-plugin。 我们只需引入即可

同样build一下看一下效果

js代码都被压缩到一行了。