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/"
    },
    devServer:{
        contentBase: './src',
        port:3000,
        open:true,
        hot: true
    },

3.webpack.config.js中的 devServer指定入口文件但是出错：contentBase: ‘./src/index.html’

package.json中配置的‘dev’改为"dev": “webpack-dev-server --inline --content-base”,

//package.json
"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --inline --content-base",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

然后终端运行(无需运行打包命令，运行npm run dev
后，devserver会在内存中打包生成bundle.js文件)
npm run dev