Webpack学习错误解决笔记

错误1：在用npm install 安装模块时，时常会出现没有以下类似的错误

解决方法：右键点击node_modules文件夹，选取属性，将文件夹只读选项去除

 

错误2：在学习到清理/dist文件夹这块时，需要采用clean-webpack-plugin管理插件，但我们执行npm run build时，却报了以下的错


解决方法：将webpack配置文件中的new CleanWebpackPlugin(['dist']),改为new CleanWebpackPlugin(),原因是该plugin用法更新了，但webpack教程却没跟上节奏。

 

错误3：在我们学习到“生产环境配置”这章时，教程上少写了要”uglifyjs-webpack-plugin"模块的安装，执行npm run build的结果

解决方法：执行npm install uglifyjs-webpack-plugin --save-dev，安装好对应模块后再执行npm run build

 

错误4：在我们学到代码分离这章时，会遇到如下错误，意见就是webpack.optimize.CommonsChunkPlugin模块已被另外模块代替。

解决方法：可去官网查找config.optimization.splitChunks相应模块的用法，以下是例子

//optimization与output模块是同层
optimization: {
    splitChunks: {
        cacheGroups: { 
            commons: {
                name: "commons",
                chunks: "all", 
                minSize: 2,
                priority: 0 
            },
            vendor: { 
                name: 'vendor',
                test: /[\\/]node_modules[\\/]/,
                chunks: 'all', 
                priority: 10 
            }
        }
    }
},
output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    chunkFilename: "[name].chunk.js"
}