剧场模式
首页前端Webpackwebpack 3 零基础入门视频教程

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

求知小风 · 真仙发布于
1

注意

看评论,windows 系统关于环境变量的用法不太一样

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

上一节提到,要让生产环境使用 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 是变量名,而 productionNODE_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 devisProd 就是 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 devnpm run prod 命令了,再也不用临时关掉一些插件了。

这节就说这么多。

3 条回复
  • Neo · 元婴
    Neo · 元婴 #1

    windows平台:不能直接使用NODE_ENV, 步骤如下:

    1.npm install cross-env --save-dev

    2.命令改为
    "prod": "cross-env NODE_ENV=production webpack -p"

  • miii · 合体
    miii · 合体 #2

    按照上面评论的方法解决了,但是报错moudule.js:338 throw err; Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin' 。查了下资料好像是因为全局安装webpack引起的,我个人的做法是把全局的webpack卸载了就可以了,
    下面这个是别人的解决办法,有兴趣的胖友可以自行尝试下:
    解决方法:1,可以在本项目中安装,npm install webpack

    2, 或者是,在~/.bash_profile中添加如下设置: export NODE_PATH="/usr/local/lib/node_modules" 保存退出。

    (.bash_profile这个是隐藏文件,或者是配置文件,那怎么进入这个文件哪?

    输入cd ~,输入touch .bash_profile,输入open -e .bash_profile,保存文件,关闭.bash_profile;更新刚配置的环境变量,输入source .bash_profile)
    
  • changchang · 大罗
    changchang · 大罗 #3

    chunkhash和hash不用在生产环境和开发环境不用变吗?

加微信(qiuzhi99666)入群官方服务号
随机课程
线上服务器部署(前后端)

线上服务器部署(前后端)

27 个视频2 小时 48 分钟高级

Pro¥ 139.00¥ 111.20

其他已完结

学员(18)
lana2020 · 元婴碳酸氢钙 · 元婴小杰 · 化神toutou · 元婴cooltan · 太乙dear°学会微笑 · 元婴React-小白 · 合体fengjunhua · 元婴尹迪 · 合体daniel_mea · 元婴myl_1371490 · 元婴何芳临 · 元婴
最新动态
lana2020 · 元婴学习到了0:59
碳酸氢钙 · 元婴学习到了6:50
小杰 · 化神学习到了6:52
toutou · 元婴学习到了6:52
cooltan · 太乙学习到了5:24
统计信息
    学员: 16501
    视频数量: 974
    帖子数量: 414

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 在线学员:119

Top