vue-cli中webpack配置解析

 

1. 構建工具後，如何在前端也引用到process.env.NODE_ENV或者本身定義的變量

經過webpack自帶的DefinePlugin方法

 

在前端main.js入口文件打印該變量

經過這種方法，咱們也能夠在前端經過js判斷是開發仍是生產環境等

 2.對於src等圖片連接，若是是以變量的形式已用，那麼webpack在打包時時會出現地址錯誤的，並不會以相對地址的形式去查找圖片

安裝copy-webpack-plugin插件

這樣的話，你本地的static即爲你存放靜態資源的地方，同時經過·`/${config.dev.assetsSubDirectory}`瀏覽器就能解析存於變量中的地址了

3. 對於Windows和Unix操做系統的不同，能夠採用path.posix和path.win32(只用於Windows)，以及path.sep和path.delimiter

path.posix.join('static', 'js/[name].[chunkhash].js')
//平臺下的文件分隔符，win下爲'\'，*nix下爲'/';因此直接用path.join是不行的，由於咱們有自定義路徑
//對於這種的則不須要這麼麻煩
path.join(__dirname, '..', dir)

//對應平臺下的路徑分隔符，win下爲';'，*nix下爲':'
因此採用path.delimiter對路徑進行切割split

 4. node,npm版本檢查

node的版本信息能夠直接使用process.version // => 'v8.11.2'

輔助插件（semver）

semver.clean(process.version)

semver.satisfies(mod.currentVersion, mod.versionRequirement)

npm版本檢查藉助child_process來產生一個shell並執行命令

//cmd ‘npm --version’
function exec (cmd) {
  return require('child_process').execSync(cmd).toString().trim()
}

同時，採用插件 chalk 在控制檯輸出不一樣顏色的信息

5. 採用rimraf插件來輸出static下的文件（rm -rf）,用mkdirp來建立文件夾

6.uglifyjs-webpack-plugin插件經常使用參數詳解

output一般採用默認值，因此不用配置出來，刪除因此‘console’的話會下降打包速率

7.在webpack3及之前咱們都利用CommonsChunkPlugin將一些公共代碼分割成一個chunk，實現單獨加載。在webpack4 中CommonsChunkPlugin被廢棄，使用SplitChunksPlugin