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

linkin 發(fā)布于2019-08-21 17:13 / 3219人閱讀

摘要：起因今天用打包的時候發(fā)現(xiàn)不加壓縮居然比加上還要小，命令行分兩次輸入回車的時候是正常的。反復(fù)實驗多次，打印也正常。拐回頭看我們的代碼我們來對比一下對錯寫法一個小失誤，順便附上我的翻版必究

起因

今天用webpack 打包的時候發(fā)現(xiàn) 不加 set NODE_ENV 壓縮居然比加上 set NODE_ENV 還要小，命令行分兩次輸入 set NODE_ENV=production (回車) webpack .... 的時候是正常的。反復(fù)實驗多次，打印NODE_ENV 也正常。(如圖)

加上 set NODE_ENV

不加 set NODE_ENV

配置項

debug

多次打印

大眼一看沒什么問題,仔細(xì)看以下就會發(fā)現(xiàn)第一次的輸出多了一個空格

原因

就是多了一個致命空格，導(dǎo)致我一下午時而壓縮成功，時而壓縮失敗，非常靈異。
拐回頭看我們的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"
        }),

 
    ]

}