無論學什么都會一步一個錯，在此記錄每一步錯誤供參考掏颊。
1艾帐、ReferenceError: _dirname is not defined
原因：__dirname 注意這里是兩個下劃線
解決方案為：將webpack.dev.config.js中的_dirname 改為 __dirname 注意這里是兩個下劃線
參照：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'
原因：未知
解決方案：在本項目中重新安裝webpack：npm install webpack（不加-g）
參照：https://segmentfault.com/q/1010000009511630
4、Error: Cannot find module 'webpack/lib/optimize/CommonsChunkPlugin'
原因：webpack4 移除了 CommonsChunkPlugin句旱，所以需要作相應的修改。
解決方案：在webpack.config.js將
module.exports = {
plugins: [
//注釋掉這一段
// new webpack.optimize.CommonsChunkPlugin({
// name: 'common' // 指定公共 bundle 的名稱谈撒。
// })
],
//增加這個配置項匾南，與plugins同級
optimization: {
splitChunks: {
name: 'common'
}
},
5、FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
原因：nodejs內存太大蛆楞，溢出
解決方案：
package打包命令增加--max_old_space_size=2048
node --max_old_space_size=2048 build/build.js release
參照：https://segmentfault.com/q/1010000006108492
6、webpack配置都沒問題豹爹，但是打包的時候打包不出來
原因1： webpack的根目錄是命令運行的目錄。
解決方案1：更改entry入口地址光稼，與項目根目錄對齊。
直接用webpack --config xxxx(配置)艾君，會直接暴露webpack報錯肄方。
7、Error/ No PostCSS Config found in
解決方案：在項目根目錄創(chuàng)建 postcss.config.js 文件扒秸，并配置以下內容
module.exports = {
plugins: {
'autoprefixer': {browsers: 'last 5 version'}
}
}
參照：https://yq.aliyun.com/articles/646385
8冀瓦、Window is not defined with css loader
原因以及解決方案：因為style-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...
解決方案：在項目根目錄新建postcss.config.js文件，并對postcss進行配置：
module.exports = {
plugins: {
'autoprefixer': {browsers: 'last 5 version'}
}
}
11崖瞭、TypeError: Cannot read property 'compilation' of undefined或者TypeError: Cannot read property 'emit' of undefined
原因：webpack3需要將組件降級
解決方案：
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是否對的上，本人是忘記添加index.html
解決方案： 增加相應位置的index.html或者其他類型模板
13雌续、
![]()
運行截圖
原因： webpack-dev-server和webpack版本對不上，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ī)則配置可能重復了;
解決方案：要么去掉原來樣式相關的loader或者不要添加自己的樣式相關的loader
參照：https://segmentfault.com/a/1190000013196997
15鸽心、Module build failed: ReferenceError: document is not defined
原因：暫時無法解釋
使用fallback就不報這個錯誤了
16、vue項目配置 autoprefixer 報出警告問題
解決方案：將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
