无论学什么都会一步一个错，在此记录每一步错误供参考。
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
解决方案：在项目根目录创建 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
运行截图1
运行截图2
原因：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
image.png
原因：rules中规则配置可能重复了;
解决方案：要么去掉原来样式相关的loader或者不要添加自己的样式相关的loader
参照：https://segmentfault.com/a/1190000013196997
15、Module build failed: ReferenceError: document is not defined
image.png
原因：暂时无法解释
解决
使用fallback就不报这个错误了
16、vue项目配置 autoprefixer 报出警告问题
image.png
解决方案：将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
网友评论