webpack 踩过的坑

1、注意安装版本，webpack3和4的区别，下载时最好npm 具体的版本（

 自测两款搭配（webpack3）:安装的是webpack@3.6.0  配置的webpack-cli@2.9.0 -D    "webpack-dev-server": "^2.9.7" 

                                               ：webpack@3.12.0，webpack-dev-server@2.11.2也是可以的

）

2、打包完成后dist目录下有可能不会及时出现bundle.js，可以在默认网址端口号后/bundle.js查看打包完成的内容

3、安装webpack中，若报错文件名相同，则在webpack.json中的“name”修改即可

4、安装插件babel-loader，报错Module build failed: Error: Cannot find module '@babel/core'，这里是版本的问题，最新的v8的问题，卸载掉babel-loader，重新 npm i babel-loader@7.1.5即可

5.webpack+vue过程中，导入子组件时报错如下：

ERROR in ./login.vue?vue&type=template&id=378d4e4b&
Module parse failed: E:\PHPTutorial\vuewebpack\node_modules\vue-loader\lib\index.js!E:\PHPTutorial\vuewebpack\login.vue?vue&type=template&id=378d4e4b& Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
 

解决方法：

运行npm run build出现问题：

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

解决方案：

在webpack.config.js中添加

const { VueLoaderPlugin } = require(‘vue-loader’)

同时在这个文件中添加

module.exports = {

plugins: [

// 添加VueLoaderPlugin，以响应vue-loader

new VueLoaderPlugin()

]

}

6.使用vue-router过程中，组件中可挂在其他路由，注意：要挂载的模板和被挂载的内容一定要放在一个div或者容器中，否则会报错