【原创】Webpack基础（三）——开发模式和生产模式

生产模式

开发完成后，我们需要将代码部署上线。
这个模式下要对代码进行优化，让其性能更好。

• 优化代码运行性能
• 优化代码打包速度

npx webpack serve --config ./config/webpack.dev.js

简化命令

在 package.json 的 script 中定义：

scripts:{
"dev":"webpack serve --config ./config/webpack.dev.js",
"build":"webpack --config ./config/webpack.prod.js"
}

CSS 处理

提取 CSS 到单独文件

CSS 被打包到 JS 文件中，当 JS 文件加载时会创建一个 style 标签来生成样式，这样对于网站来说会出现闪屏现象，用户体验不好。应生成单独的 CSS 文件，通过 link 标签引入。
npm i mini-css-extract-plugin -D

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 在css loader中用MiniCssExtractPlugin.loader替代style-loader
{
  // 用正则表达式匹配文件类型，下面就是匹配以.css结尾的文件，并且将它们使用下面的loader解析。
  test: /\.css$/,
  use: [
    MiniCssExtractPlugin.loader,
    // 将css文件编程CommonJs模块加载到js中，里面内容是样式字符串
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          // 浏览器兼容性处理
          plugins: ["postcss-preset-env"],
        },
      },
    },
  ],
},
// 在plugins中引入插件
new MiniCssExtractPlugin(),

这样我们打包项目中的样式文件就会单独的放在一个 .css 文件中。当然我们也可以通过配置插件的 filename 属性命名打包后的 .css 文件。

new MiniCssExtractPlugin({
  // 对输出的样式文件重命名
  filename: "css/style.css",
}),

兼容性处理

这里需要使用到 PostCSS。
PostCSS 是一个用来处理项目中 CSS 文件的工具，它具有非常多的功能，同时拥有大量插件，可以实现处理 CSS 兼容性问题，处理 CSS 重复代码问题等等一系列的问题。
npm install postcss-loader postcss-preset-env --save-dev
在 package.json 文件中添加下面的代码，当然也可以单独提取出来做一个文件，文件名要命名为：.browserslistrc。

"browserslist": [
  "> 1%",
  "last 2 versions",
  "not dead"
]

修改 webpack.config.js 中的配置。

// 在loader中配置
{
  // 用正则表达式匹配文件类型，下面就是匹配以.css结尾的文件，并且将它们使用下面的loader解析。
  test: /\.css$/,
  use: [
    MiniCssExtractPlugin.loader,
    // 将css文件编程CommonJs模块加载到js中，里面内容是样式字符串
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          // 浏览器兼容性处理
          plugins: ["postcss-preset-env"],
        },
      },
    },
  ],
},

到这里再通过 webpack 打包：
打包前：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  backface-visibility: hidden;
}

打包后：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

可以看到 PostCSS 自动做了兼容性处理。

压缩 CSS

所谓的压缩就是去掉代码的格式，让代码紧挨在一起，从而减小代码的体积。
npm install css-minimizer-webpack-plugin --save-dev
使用：

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
// 引入插件
new CssMinimizerPlugin(),

重新进行打包，会发现css文件已经被压缩。

生产模式下默认压缩了 html 和 js 的文件，不需要额外进行压缩。