• 1. 增加环境变量
  • 2. 使用环境变量

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

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

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

    我们来试一下。

    1. 增加环境变量

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

    webpack.config.js

    1. "scripts": {
    2. "dev": "webpack-dev-server",
    3. "prod": "webpack -p"
    4. },

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

    我们把它改成下面这样:

    1. "scripts": {
    2. "dev": "webpack-dev-server",
    3. "prod": "NODE_ENV=production webpack -p"
    4. },

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

    1. NODE_ENV=production

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

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

    2. 使用环境变量

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

    webpack.config.js 文件中:

    1. 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 devisProd 就是 false,因为 npm run dev 没有设置这个 NODE_ENV 这个环境变量嘛。

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

    1. new ExtractTextPlugin({
    2. filename: 'style.css',
    3. disable: false
    4. }),
    5. test: /\.scss$/,
    6. use: ['style-loader', 'css-loader', 'sass-loader']

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

    1. ...
    2. var isProd = process.env.NODE_ENV === 'production'; // true or false
    3. var cssDev = ['style-loader', 'css-loader', 'sass-loader'];
    4. var cssProd = ExtractTextPlugin.extract({
    5. fallback: 'style-loader',
    6. //resolve-url-loader may be chained before sass-loader if necessary
    7. use: ['css-loader', 'sass-loader']
    8. })
    9. var cssConfig = isProd ? cssProd : cssDev;
    10. module.exports = {
    11. ...
    12. plugins: [
    13. ...
    14. new ExtractTextPlugin({
    15. filename: 'style.css',
    16. disable: !isProd
    17. }),
    18. ...
    19. ],
    20. module: {
    21. rules: [
    22. {
    23. test: /\.scss$/,
    24. use: cssConfig
    25. },
    26. ...
    27. ]
    28. }
    29. };

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

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

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

    这节就说这么多。