win 下 package.json 与 webpack 配置容易被忽略的一个坑

起因

今天用webpack 打包的时候发现 不加 set NODE_ENV 压缩 居然比加上 set NODE_ENV 还要小,命令行 分两次输入 set NODE_ENV=production (回车) webpack …. 的时候是正常的。反复实验多次,打印NODE_ENV 也正常。(如图)

加上 set NODE_ENV
《win 下 package.json 与 webpack 配置容易被忽略的一个坑》

不加 set NODE_ENV
《win 下 package.json 与 webpack 配置容易被忽略的一个坑》

配置项

《win 下 package.json 与 webpack 配置容易被忽略的一个坑》

debug

多次打印

《win 下 package.json 与 webpack 配置容易被忽略的一个坑》

《win 下 package.json 与 webpack 配置容易被忽略的一个坑》

《win 下 package.json 与 webpack 配置容易被忽略的一个坑》

大眼一看没什么问题,仔细看以下就会发现第一次的输出多了一个空格

原因

就是多了一个致命空格,导致我一下午时而压缩成功,时而压缩失败,非常灵异。
拐回头看我们的package.json 代码,我们来对比一下对错写法

wrong
《win 下 package.json 与 webpack 配置容易被忽略的一个坑》

correct
《win 下 package.json 与 webpack 配置容易被忽略的一个坑》

一个小失误 ,顺便附上我的 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'
        }),

 
    ]

}

    原文作者:cccccome
    原文地址: https://segmentfault.com/a/1190000011679574
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞