+-
尝试通过从package.json上的此脚本列表运行build命令来构建angular-webpack应用程序时:
"scripts": {
"test": "NODE_ENV=test karma start",
"build": "if exist dist rd /s /q dist && mkdir dist && set NODE_ENV=production && webpack && cp app/index.html dist/index.html",
"start": "webpack-dev-server --content-base app"
},
这是控制台上的结果:
$ npm run build
> [email protected] build M:\Learning webpack\egghead.io - AngularJS - Angula
r and Webpack for Modular Applications\webpack-ng-egg
> if exist dist rd /s /q dist && mkdir dist && set NODE_ENV='production' && webp
ack && cp app/index.html dist/index.html
process.env.NODE_ENV : 'production'
process.env.NODE_ENV === 'production' ???? : false
Hash: c3136b0024cbd48ccb2e
Version: webpack 1.13.2
Time: 3185ms
Asset Size Chunks Chunk Names
bundle.js 1.23 MB 0 [emitted] main
+ 10 hidden modules
这就是webpack.config.js文件的样子:
var webpack = require('webpack');
var path = require('path');
var config = {
context: path.resolve(__dirname, "app"),
entry:'./app.js',
output: {
path : __dirname + '/app',
filename:'bundle.js' // il ne sera pas généré dans le code, juste en mémoire
},
plugins:[
new webpack.DefinePlugin({
ON_TEST:process.env.NODE_ENV === 'test'
})
],
module:{
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['es2015']
}
},
{ test: /\.css$/,
loader: "style-loader!css-loader",
exclude: /(node_modules|bower_components)/
},
{
test: /\.html$/,
exclude: /(node_modules|bower_components)/,
loader: 'raw', // 'babel-loader' is also a legal name to reference
},
{ test: /\.styl$/,
loader: 'style-loader!css-loader!stylus-loader',
exclude: /(node_modules|bower_components)/
}
]
},
devServer:{
//contentBase:path.join(__dirname, 'dist') // ceci est juste un exemple, si dist est l'endroit ou on aurait généré les fichiers
inline:true, // les mises à jour de style ne sont plus affichés instantnément avec cette option donc j'ai ajouté le watch:true et çà marché!!!
watch:true
}
/*resolve: {
extensions: ['', '.js', '.jsx', '.css']
},
resolveLoader: {
root: require('path').resolve(__dirname, "node_modules")
}*/
}
console.log("process.env.NODE_ENV : " + process.env.NODE_ENV);
console.log("process.env.NODE_ENV === 'production' ???? : " + (process.env.NODE_ENV == 'production'));
//config.output.path = path.resolve(__dirname, "dist");
//console.log("config.output.path : " + config.output.path);
if(process.env.NODE_ENV === 'production') {
console.log("this is the prod env!!!!!!!!!!");
config.output.path = path.resolve(__dirname, "dist");
}
module.exports = config;
这里的问题是,当测试(process.env.NODE_ENV === 'production')
时,它永远不会返回true,即使它应该是(请参阅上面控制台上记录的内容)。我试图改变一个简单的平等而不是严格的平等,但仍然一直都是假的。
16
投票
投票
我今天遇到了这个问题。
当我在set NODE_ENV=production && something
使用npm scripts
然后NODE_ENV=production
成为production + " "
后面有一个空格。
因此,我们将production
与production + " "
进行比较,这显然会返回false。
的package.json
scripts: {
"start": "set NODE_ENV=development && webpack --watch --progress",
"test": "set NODE_ENV=production && webpack"
}
比较
console.log(process.env.NODE_ENV.trim() === "production"); //True if ran test else false
console.log(process.env.NODE_ENV === "production"); //False
console.log(process.env.NODE_ENV.trim() === "development"); //True if ran start else false
console.log(process.env.NODE_ENV === "development"); //False
webpack.config.js的工作示例
const webpack = require("webpack");
const dev = process.env.NODE_ENV.trim() !== "production";
module.exports = {
entry: "./index.js",
output: {
path: "./",
filename: "parse.js"
},
module: {
rules: [
{
test: /\.js/,
use: "babel-loader",
exclude: /node_modules/
}
]
},
plugins: dev ? [] : [
new webpack.optimize.UglifyJsPlugin()
],
target: "node"
};
所以,使用trim()
。
3
投票
投票
问题是你在NODE_ENV
中存储单引号,所以NODE_ENV
的值实际上是"'production'"
而不仅仅是"production"
。这在您的调试输出中很明显。
将set NODE_ENV='production'
更改为set NODE_ENV=production
,它应该按预期工作。
0
投票
投票
使用:
if ((process.env.NODE_ENV || '').trim() !== 'production') {
注意上面的解决方案,因为NODE_ENV可以是未定义的,并且会在未定义时抛出运行.trim()。