webpack 3 零基础入门教程 #13 - 生产环境 vs 开发环境

接着上一节来，我们要解决上一节所遇到的一个问题。

上一节提到，要让生产环境使用 extract-text-webpack-plugin 这个插件，而开发环境不使用，如何做到呢？

其实原理很简单，只要能区分出哪个是开发环境，哪个是生产环境就可以，只要判断是生产环境的时候就用，不是的话，就不用，就可以了。

我们来试一下。

1. 增加环境变量

首先来看一下之前的开发环境和生产环境分别使用的编译命令：

webpack.config.js

"scripts": {
  "dev": "webpack-dev-server",
  "prod": "webpack -p"
},
复制代码

分别是开发环境使用的 npm run dev 命令和生产环境使用的 npm run prod 命令。

我们把它改成下面这样：

"scripts": {
  "dev": "webpack-dev-server",
  "prod": "NODE_ENV=production webpack -p"
},
复制代码

开发环境的部分不变，生产环境的加了一个环境变量：

NODE_ENV=production
复制代码

很简单，NODE_ENV 是变量名，而 production 是 NODE_ENV 是这个变量的值，这些都不是固定的，你可以改成你想要的任意内容，只要能引用到就行了。

那么我们如何来使用这个变量呢？

2. 使用环境变量

要引用我们之前创建的环境变量，也蛮简单的。

在 webpack.config.js 文件中：

var isProd = process.env.NODE_ENV === 'production'; // true or false
复制代码

process.env.NODE_ENV 就能得到之前设置的变量，如果运行的是 npm run prod，那么 process.env.NODE_ENV 的值就是 production，那 isProd 就是 true，如果运行的是 npm run dev，isProd 就是 false，因为 npm run dev 没有设置这个 NODE_ENV 这个环境变量嘛。

上一节，我们有类似下面这样的两段关于 extract-text-webpack-plugin 这个插件的代码。

new ExtractTextPlugin({
  filename: 'style.css',
  disable: false
}),

  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader']
复制代码

我们把 webpack.config.js 中的代码更改如下：

...

var isProd = process.env.NODE_ENV === 'production'; // true or false
var cssDev = ['style-loader', 'css-loader', 'sass-loader'];
var cssProd = ExtractTextPlugin.extract({
  fallback: 'style-loader',
  //resolve-url-loader may be chained before sass-loader if necessary
  use: ['css-loader', 'sass-loader']
})

var cssConfig = isProd ? cssProd : cssDev;

module.exports = {
  ...
  plugins: [
    ...
    new ExtractTextPlugin({
      filename: 'style.css',
      disable: !isProd
    }),
    ...
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: cssConfig
      },
      ...
    ]
  }
};

复制代码

上面的代码应该不难理解吧。

只要能区别出不同的环境，使用不同的配置内容就可以了。

现在就可以放心地使用 npm run dev 和 npm run prod 命令了，再也不用临时关掉一些插件了。

这节就说这么多。