ant design pro v5 获取动态菜单与基于角色权限管理视频教程 准备更新中
世界上最伟大的投资就是投资自己的教育
注意
看评论,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
是变量名,而 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
命令了,再也不用临时关掉一些插件了。
这节就说这么多。
1Freewebpack 3 零基础入门视频教程 #1 - 介绍
2Freewebpack 3 零基础入门视频教程 #2 - 安装
3Freewebpack 3 零基础入门视频教程 #3 - 实现 hello world
4Freewebpack 3 零基础入门视频教程 #4 - webpack 的配置文件 webpack.config.js
5Freewebpack 3 零基础入门视频教程 #5 - 使用第一个 webpack 插件 html-webpack-plugin
6Freewebpack 3 零基础入门视频教程 #6 - 使用 loader 处理 CSS 和 Sass
7Freewebpack 3 零基础入门视频教程 #7 - 初识 webpack-dev-server
8Freewebpack 3 零基础入门视频教程 #8 - 用 webpack 和 babel 配置 react 开发环境
9Freewebpack 3 零基础入门视频教程 #9 - 用 clean-webpack-plugin 来清除文件
10Freewebpack 3 零基础入门视频教程 #10 - 配置多个 HTML 文件
11Freewebpack 3 零基础入门视频教程 #11 - 如何使用 pug (jade) 作为 HTML 的模板
12Freewebpack 3 零基础入门视频教程 #12 - 如何使用模块热替换 HMR 来处理 CSS
© 汕尾市求知科技有限公司 | 关注我们 | 在线学员:1113
粤公网安备 44152102000088号 | 粤ICP备19038915号
windows平台:不能直接使用NODE_ENV, 步骤如下:
1.npm install cross-env --save-dev
2.命令改为
"prod": "cross-env NODE_ENV=production webpack -p"
按照上面评论的方法解决了,但是报错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这个是隐藏文件,或者是配置文件,那怎么进入这个文件哪?
chunkhash和hash不用在生产环境和开发环境不用变吗?