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