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’]},
]
}
}

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值