脚本宝典收集整理的这篇文章主要介绍了win 下 package.json 与 webpack 配置容易被忽略的一个坑,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
起因
今天用webpack 打包的时候发现 不加 set NODE_ENV 压缩 居然比加上 set NODE_ENV 还要小,命令行 分两次输入 set NODE_ENV=production (回车) webpack .... 的时候是正常的。反复实验多次,打印NODE_ENV 也正常。(如图)
加上 set NODE_ENV
不加 set NODE_ENV
配置项
debug
多次打印
大眼一看没什么问题,仔细看以下就会发现第一次的输出多了一个空格
原因
就是多了一个致命空格,导致我一下午时而压缩成功,时而压缩失败,非常灵异。
拐回头看我们的package.json 代码,我们来对比一下对错写法
wrong
correct
一个小失误 ,顺便附上我的 webpack.production.config.js
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry:__dirname + "/app/main.js",
output: {
filename:'bundle-[hash:8].js',
path:__dirname+"/build"
},
module:{
rules:[
{
test:/(.jsx|.js)$/,
use:{
loader:'babel-loader'
},
exclude:/node_modules/
},
{
test:/.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader:'css-loader',
options:{
module:true
}
},
{
loader:'postcss-loader'
}
]
})
},
{
test:/(.jpg|.png)$/i,
use:{
loader:'url-loader',
options:{
limit:5000,
name:'img/[name].[hash:8].[ext]'
}
}
}
]
}
,
plugins:[
new webpack.BannerPlugin("翻版必究"),
new HtmlWebpackPlugin({
template:__dirname+"/app/index.tmpl.html"
}),
new webpack.HotModuleReplacementPlugin(),
new ExtractTextPlugin("styles-[hash:8].css"),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
output:{
comments:false
},
compress:{
warnings: false
}
}),
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV':JSON.stringify(process.env.NODE_ENV)
}
}),
new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: './js/[name].[hash:8].js'
}),
]
}
以上是脚本宝典为你收集整理的win 下 package.json 与 webpack 配置容易被忽略的一个坑全部内容,希望文章能够帮你解决win 下 package.json 与 webpack 配置容易被忽略的一个坑所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。