2020-08-20 webpack devSever配置踩坑总结

1.vue warning:cannt found element “#app”

1.删除htmlwepackplugin插件，htmlwepackplugin插件生成的html文件中没有引入bundle.js文件。

2.如果并未引入htmlwepackplugin插件，那就是你的index.html文件中引入bundle.js文件的位置不对，应该将引入行放置文档末尾，待DOM树构建完成后再运行相应的JS文件。

2.装了devsever 但是更改代码后，显示不改变

1.在webpack.config.js文件中的output中设置publicPath:"/dist/"，因为webpack动态生成的文件都是放在dist文件夹的，publicPath:"/dist/"就是用来监听该文件夹中文件变化的，只要这里面文件内容变化了（即在更新src文件夹下的index.js时,它会自动更新对应的bundle.js），页面也会自动更新。

2.在webpack.config.js文件中的output中设置hot: true

3.删除原本dist目录中的bundle.js等文件，否则html文件会 自动引入本地bundle.js文件而不会引入内存中的bundle.js文件。

4.重新打包，运行npm run dev

//webpack.config.js
output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist'),
        publicPath:"/dist/"
    },
    devServe