开发模式和生产模式 #

开发模式 #

在开发vue或者react的过程中，我们可以体验到脚手架会在我们执行类似于yarn start后启动一个服务器，提供热更新的功能，这个功能在webpack中一样可以实现。

在webpack的官网文档devServer中可以看到这个功能的介绍

安装依赖 #

yarn add webpack-dev-server -D

在webpack.config.js中添加devServer字段的配置

devServer: {
  port: 8899, // 端口指定8899
  open: true, // 自动打开浏览器
  host: 'localhost' // 路径指定
}

在package.json中的script增加指令

{
   "scripts": {
    "dev": "npx webpack serve"
  },
}

执行 yarn dev

如果你没有安装webpack和webpack-cli，或者是把它们安装在全局，可能会提示让你安装，否则就会出现启动成功的提示，这时我们的服务就启动在浏览器中，每次保存都会触发webpack的自动编译，这时一个很棒的功能。

生产模式 #

生产模式是指我们开发完成，即将交付测试是，这时要使用打包的代码，为了区分开发模式和生产模式，我们将使用webpack.dev.js和webpack.prod.js两个配置文件来区分它们

然后我们新建目录config/ 然后分别建立webpack.dev.js和webpack.prod.js

具体的内容我们还是和webpack.config.js的内容一样，只是要做一做开发和生产的区服

比如生产的配置不需要devServer这个字段 ， 开发环境则 output这个字段不重要，还有mode字段的区分

做好这一切之后，修改package.json中的执行脚本

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

然后分别执行yarn dev 和 yarn build 测试结果

生产模式中的特殊配置 #

提取css为单独的文件 #

在js中引用css，目前的情况是css还存在于js中，通过style的方式显示，但在生产中我们希望css以link的方式引入，这样避免出现闪屏的情况

所需要使用的插件是mini-css-extract-plugin,可以及那个css提取到单独的文件中，而非使用js再动态创建style标签

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

做完这一切后，再执行yarn build ，就会发现，有单独的css文件被打包出来了。

对css进行预处理 #

这里主要用到的插件是postCss，这个是对css进行预处理，

postCss可以做很多事情，比如可以让样式有更好的兼容性 （虽然）在没有IE的时代，已经不太重要了

1. 安装依赖

yarn add -D postcss-loader postcss postcss-preset-env

2. 配置

在所有需要对样式进行处理的地方增加postcss-loader的选项

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',
                    {
                      // 其他选项
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

css压缩 #

压缩可以使文件的体积缩小 ， 使用CssMinimizerWebpackPlugin这个插件