webpack打包流程中常见问题解决

注意并不是所有的所有的问题的解决办法都对于你适应,因为每个人电脑的配置环境都是有差异的。随着webpack的升级,安装的依赖包也略有不同,因此认真看命令行的提示会帮你解决好多不必要的问题。

1.利用webpack打包时,用这个命令:webpack .\src\main.js .\dist\bundle.js 发现由于版本号太高,导致打包错。
换成:webpack .\src\main.js -o .\dist\bundle.js 就成功了

2.在导入css-loader和style-loader后,发现还是有如下错误:

这时候好好去检查你的webpack.config.js的module的配置,问题大多数出在这里。
3.在安装bootstrap的时候,明明是正确的命令:cnpm i bootstrap -S 可是却报错如下:

这是由于bootstrap4需要手动popper.js,运行如下命令:
cnpm install propper --save-dev
就ok啦
4.安装babel完运行时出现问题。错误提示:babel的版本问题

解决办法一:修改配置文件package.json:

解决办法二:
安装@babel/core依赖
https://www.npmjs.com/package/@babel/core
npm install --save-dev @babel/core
还是不行就安装:cnpm i babel-loader@7 -D
5.在使用render组件,运行时报错如下:

反复检查错误觉得自己都是按照步骤来的:这时候问题应该是出在vue-loader的版本上了,因为默认的安装的是最新版本,而最新版本需要配置带有VueLoaderPlugin 之外,还需另外单独配置css-loader。
那具体怎么配置webpack呢?如下:
var vueLoaderPlugin=require(‘vue-loader/lib/plugin’);
module.exports={
plugins:[
new vueLoaderPlugin({
})
],
module:{
rules:[
{ test:/.css$/,use:[‘style-loader’,‘css-loader’]},
]
}
}

发布了79 篇原创文章 · 获赞 36 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/yezi__6/article/details/92760894