無論學(xué)什么都會(huì)一步一個(gè)錯(cuò)，在此記錄每一步錯(cuò)誤供參考。
1、ReferenceError: _dirname is not defined
原因：__dirname 注意這里是兩個(gè)下劃線
解決方案為：將webpack.dev.config.js中的_dirname 改為 __dirname 注意這里是兩個(gè)下劃線
參照：https://www.cnblogs.com/dqcer/p/9293508.html
2、Tapable.plugin is deprecated. Use new API on .hooks instead
原因：extract-text-webpack-plugin目前版本不支持webpack4
解決方案：使用extract-text-webpack-plugin的最新的beta版
npm install extract-text-webpack-plugin@next
參照：https://blog.csdn.net/u011215669/article/details/81269386
3、Module not found: Error: Can't resolve 'webpack/hot' in 'xxxxxxxxxxx'
原因：未知
解決方案：在本項(xiàng)目中重新安裝webpack：npm install webpack（不加-g）
參照：https://segmentfault.com/q/1010000009511630
4、Error: Cannot find module 'webpack/lib/optimize/CommonsChunkPlugin'
原因：webpack4 移除了 CommonsChunkPlugin，所以需要作相應(yīng)的修改。
解決方案：在webpack.config.js將
module.exports = {
plugins: [
//注釋掉這一段
// new webpack.optimize.CommonsChunkPlugin({
// name: 'common' // 指定公共 bundle 的名稱。
// })
],
//增加這個(gè)配置項(xiàng)，與plugins同級(jí)
optimization: {
splitChunks: {
name: 'common'
}
},
5、FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
原因：nodejs內(nèi)存太大，溢出
解決方案：
package打包命令增加--max_old_space_size=2048
node --max_old_space_size=2048 build/build.js release
參照：https://segmentfault.com/q/1010000006108492
6、webpack配置都沒問題，但是打包的時(shí)候打包不出來
原因1： webpack的根目錄是命令運(yùn)行的目錄。
解決方案1：更改entry入口地址，與項(xiàng)目根目錄對(duì)齊。
直接用webpack --config xxxx(配置)，會(huì)直接暴露webpack報(bào)錯(cuò)。
7、Error/ No PostCSS Config found in
解決方案：在項(xiàng)目根目錄創(chuàng)建 postcss.config.js 文件，并配置以下內(nèi)容
module.exports = {
plugins: {
'autoprefixer': {browsers: 'last 5 version'}
}
}
參照：https://yq.aliyun.com/articles/646385
8、Window is not defined with css loader
原因以及解決方案：因?yàn)閟tyle-loader和 mini-css-extract-plugin 沖突，去除掉style-loader即可
9、Error: Path variable [contenthash:8] not implemented in this context: [name]_[contenthash:8].css
解決方案：
utils.js
刪掉 ExtractTextPlugin，改用 MiniCssExtractPlugin
if (options.extract) {
const extractLoader = {
loader: MiniCssExtractPlugin.loader,
options: {}
}
return [extractLoader, 'css-loader'].concat(['postcss-loader'], loaders);
} else {
return ['vue-style-loader', 'css-loader'].concat(['postcss-loader'], loaders);
}
10、 Error: No PostCSS Config found...
解決方案：在項(xiàng)目根目錄新建postcss.config.js文件，并對(duì)postcss進(jìn)行配置：
module.exports = {
plugins: {
'autoprefixer': {browsers: 'last 5 version'}
}
}
11、TypeError: Cannot read property 'compilation' of undefined或者TypeError: Cannot read property 'emit' of undefined
原因：webpack3需要將組件降級(jí)
解決方案：
npm install uglifyjs-webpack-plugin@1.0.0 optimize-css-assets-webpack-plugin@2 copy-webpack-plu
gin@4 --save-dev
12、ERROR in Error: Child compilation failed:
原因：index.html和
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
})
中的index是否對(duì)的上，本人是忘記添加index.html
解決方案： 增加相應(yīng)位置的index.html或者其他類型模板
13、
![]()
運(yùn)行截圖
原因： webpack-dev-server和webpack版本對(duì)不上，webpack3使用@2的版本
解決方案：
npm i webpack-dev-server@2 -D
14、Invalid CSS after "...load the styles": expected 1 selector or at -rule, was "var content = requi"
* ./assets/styles/scss/themes/red/index.scss in ./src/main.ts
原因：rules中規(guī)則配置可能重復(fù)了;
解決方案：要么去掉原來樣式相關(guān)的loader或者不要添加自己的樣式相關(guān)的loader
參照：https://segmentfault.com/a/1190000013196997
15、Module build failed: ReferenceError: document is not defined
原因：暫時(shí)無法解釋
使用fallback就不報(bào)這個(gè)錯(cuò)誤了
16、vue項(xiàng)目配置 autoprefixer 報(bào)出警告問題
解決方案：將postcss.config.js中的browsers改成overrideBrowserslist
//修改前
module.exports = {
plugins: {
'autoprefixer': {browsers: 'last 5 version'}
}
};
//修改后
module.exports = {
plugins: {
'autoprefixer': {overrideBrowserslist: 'last 5 version'}
}
};
17、webpack vue-loader was used without the corresponding plugin. Make sure to include V..
解決方案： 在webpack配置中增加
const VueLoaderPlugin = require("vue-loader/lib/plugin");
plugins: [
new VueLoaderPlugin() //vue的樣式插件
]
18、TypeError: CleanWebpackPlugin is not a constructor
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //新版更換為這種
const webpackConfig = {
plugins: [
new CleanWebpackPlugin(),
],
};
module.exports = webpackConfig;
19、Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
解決辦法：
npm install –save-dev extract-text-webpack-plugin@next
