webpack4.0.1的坑,持續補充
webpack4在2月底正式釋出後,原來的很多做法不能使用,下面把使用webpack4.0.1過程中,出現的問題,一一記錄,也歡迎大家補充,謝謝!團結就是力量,眾人拾柴火焰高,加油!
1、不再支援node.js4.X
2、不能用webpack命令直接打包指定的檔案,只能使用webpack.config.js進行配置。
即:webpack demo01.js bundle01.js 不能用了。
3、CLI被移動到了一個專門的包 webpack-cli裡了。
全域性安裝webpack-cli
命令:npm install webpack-cli -g
4、本地(專案目錄)
命令:npm install webpack -D
5、在webpack.config.js裡的配置,不再支援 module下的loaders,需要把loaders改成rules。
如下:
module: {
rules: [
//針對css檔案,進行對應的loader處理
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
7、json
webpack 現在能原生地處理 JSON
允許通過 ESM 語法匯入 JSON
8、優化:
更新 uglifyjs-webpack-plugin 至 v1 版本,以支援 ES2015
9、Usage
現在可以在兩種模式中選擇 (mode or --mode) : 生產模式或開發模式
10、配置:
NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors (生產模式下預設開啟)
ModuleConcatenationPlugin -> optimization.concatenateModules (開發模式下預設開啟)
NamedModulesPlugin -> optimization.namedModules (開發模式下預設開啟)
CommonsChunkPlugin 已被移除 -> optimization.splitChunks, optimization.runtimeChunk
11、Syntax
import() 總是返回一個名稱空間物件。CommonJS 模組被封裝到預設匯出中
12、還有一個坑,暫時還沒有解決,正在研究:
用 import Vue from "vue"; 引入vue有問題,
但是改成
import Vue from "vue/dist/vue.js";
是可以用的。