webpack踩坑记录

无论学什么都会一步一个错，在此记录每一步错误供参考。

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