Skip to content
On this page

开发模式和生产模式

开发模式

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

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

安装依赖

sh
yarn add webpack-dev-server -D
1

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

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

package.json中的script增加指令

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

1
2
3
4
5
6

执行 yarn dev

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

生产模式

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

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

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

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

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

json
{
  "scripts": {
    "dev": "webpack serve --config ./config/webpack.dev.js",
    "build": "webpack --config ./config/webpack.prod.js"
  }
}
1
2
3
4
5
6

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

生产模式中的特殊配置

提取css为单独的文件

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

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

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};
1
2
3
4
5
6
7
8
9
10
11
12
13

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

对css进行预处理

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

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

  1. 安装依赖
sh
yarn add -D postcss-loader postcss postcss-preset-env
1
  1. 配置

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

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',
                    {
                      // 其他选项
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

css压缩

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