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

linkin 發布于2019-08-21 17:13 / 3179人閱讀

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

起因

今天用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"
        }),

 
    ]

}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89264.html

最小白的webpack+react環境搭建

摘要：接下來安裝和，執行命令安裝很順利，沒有遇到任何問題。再總結一下我們遇到的坑初始化時的項目名稱要合規，特別是不能出現中劃線下劃線。另外再增加，這樣刷新的速度會大大加快最終的文件目錄結構為各文件的最終內容本文也同步發表在我的公眾號“我的天空” 從零開始，用最少的配置、最少的代碼、最少的依賴來搭建一個最簡單的webpack+react環境。最近在玩webpack+rea...

番茄西紅柿 2019-04-23 13:28 評論0 收藏0
用 vue2 和 webpack 快速建構 NW.js 項目(3)

摘要：增加文件這個文件主要做的事情就是整理出用的，然后再調用進行打包在中增加打包入口增加下面這一行代碼在打包完成的回調中簡單部就完成了打包，是不是異常清晰和簡單。參見如果有就寫上新增這個文件就是用來打包下安裝包的。。。閱讀本文需要一點 JS 基礎和閱讀的耐心，我特么自己寫完后發現這文章咋這么長啊。。。如果你認真看完算我輸！另我專門做了個 vue-nw-seed 項目，里面包含了我這篇...

史占廣 2019-08-20 15:33 評論0 收藏0
Electron + vue 打包桌面操作流程

摘要：提前準備一個項目，也可以使用初始的項目安裝到后邊有的會出現報錯，可以忽略，啟動啟動成功就可以在項目下執行下載以下依賴，會用到這個是打成文件的插件，之后要用，提前下載好獲取的資源這里我用的是太慢了將獲取到資源的復制到里面的里提前準備一個vue項目，也可以使用初始的vue項目vue init webpack 安裝到后邊有的會出現報錯，可以忽略，啟動npm run dev 啟動成功就可以 ...

idealcn 2019-08-23 18:16 評論0 收藏0
Vue 2.0 項目創建+Element-ui+Less+typescript[巨詳細+巨簡單+踩過

摘要：安裝完成之后，打開命令行工具，然后輸入，輸入和，如下圖，如果出現相應的版本號，則說明安裝成功。先說點什么剛從坑里爬出來,來和大家分享一下,也許我寫的東西大部分文章都有,但是也有些新的東西,小白仔細看哦,大牛來了也請指點一二,也幫助我進步! 進入正題 Vue 2.0 項目的基本創建一.Vue 2.0 的環境搭建 1.node.js安裝安裝原因:Node.js 是一個服務器...

mj 2019-08-20 17:27 評論0 收藏0
Electron入門介紹

摘要：進程主進程在里，運行里腳本的進程被稱為主進程。渲染進程由于使用來展示頁面，所以的多進程結構也被充分利用。當一個實例被銷毀后，相應的渲染進程也會被終止。在，我們提供用于在主進程與渲染進程之間通訊的模塊。 Github 系列文章地址筆者前兩天心血來潮做了個MACOS下可以進行OCR圖文識別的小工具，發現Electron 在1.x之后API發生了挺大的變化，估計也是我好久沒碰了，所以打算把這...

yunhao 2019-08-21 10:53 評論0 收藏0