webpack:^4.x.x学习，错误集锦

最新推荐文章于 2024-09-15 21:55:26 发布

zhangFreedom

最新推荐文章于 2024-09-15 21:55:26 发布

阅读量336

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack打包文章标签： vue

本文链接：https://blog.csdn.net/weixin_43286092/article/details/106765334

webpack打包专栏收录该内容

2 篇文章

订阅专栏

本文汇总了在使用webpack ^4.x.x时遇到的常见错误，包括TypeError: Cannot read property 'bindings' of null、Cannot find module './index.vue?vue&type=style&index=0&lang=scss&'、警告：必须配置开发或生产模式，以及webpack.optimize.CommonsChunkPlugin已移除的错误。并提供了相应的解决办法，如更新babel版本、配置webpack.config.js规则、在package.json和webpack.config.js中设置模式，以及调整splitChunks的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

文章转自：传送门

1.TypeError: Cannot read property ‘bindings’ of null

原因： babel版本问题
可能没装babel cli，看了网友写的才发现，加上之后就好了
在这里插入图片描述
官方说明：

在webpack 4.2以上使用：

npm install -D babel-loader @babel/core @babel/preset-env

重新安装后，再更改老的配置
在这里插入图片描述
原来是“env”而已，由网友提供的答案顺利解决了问题。

2. Cannot find module ‘./index.vue?vue&type=style&index=0&lang=scss&’

在这里插入图片描述
解决办法如下

"node-sass": "^4.12.0",
 "sass-loader": "^7.1.0",

webpack.config.js rules里面配置

   {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
   }, // 处理 scss 文件的 loader

3.警告：提示必须配置开发模式或者生产模式

在这里插入图片描述
解决方法：

package.json中设置

”scripts": {
    "dev": "webpack --mode development",  // 开发环境
     "build": "webpack --mode production",  // 生产环境
  }

webpack.config.js中设置：


module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    mode: 'development' // 设置mode
}

4.webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

**
原因： 报错的原因是webpack4已经升级不支持这种写法了,也就是说不在plugins里面进行操作。而是放在了optimization里面,写法不变下面贴代码
关于webpack.optimize.SplitChunksPlugin的详细用法

new webpack.optimize.SplitChunksPlugin({
                    chunks: "initial", // 必须三选一： "initial" | "all"(默认就是all) | "async"
                    minSize: 0, // 最小尺寸，默认0
                    minChunks: 1, // 最小 chunk ，默认1
                    maxAsyncRequests: 1, // 最大异步请求数， 默认1
                    maxInitialRequests: 1, // 最大初始化请求书，默认1
                    name: function () {
                    }, // 名称，此选项可接收 function
                    cacheGroups: { // 这里开始设置缓存的 chunks
                        priority: 0, // 缓存组优先级
                        vendor: { // key 为entry中定义的 入口名称
                            chunks: "initial", // 必须三选一： "initial" | "all" | "async"(默认就是异步)
                            name: "vendor", // 要缓存的 分隔出来的 chunk 名称
                            minSize: 0,
                            minChunks: 1,
                            enforce: true,
                            maxAsyncRequests: 1, // 最大异步请求数， 默认1
                            maxInitialRequests: 1, // 最大初始化请求书，默认1
                            reuseExistingChunk: true // 可设置是否重用该chunk（查看源码没有发现默认值）
                        }
                    }
                }),

最后贴上修改后的webpack.optimize.SplitChunksPlugin的代码

//放在plugins[]中，并在webpack.config.js开头引入const webpack = require("webpack");
        new webpack.optimize.SplitChunksPlugin({
            cacheGroups: { // 这里开始设置缓存的 chunks
                priority: 0, // 缓存组优先级
                vendor: { // key 为entry中定义的 入口名称
                    chunks: "initial", // 必须三选一： "initial" | "all" | "async"(默认就是异步)
                    name: ['index','cart','vendor'], // 要抽取共用模块 chunk 名称
                    minSize: 0,
                    minChunks: 3,
                    maxInitialRequests: 5, // 最大初始化请求书，默认1太小哦

                }
            }
        }),