使用webpack-dev-server和html-webpack-plugin
dev-server可以在开发环境中产生一个服务器，和热更新
安装：npm i webpack webpack-cli webpack-dev-server -D
在package.json中配置dev-server：
运行npm run start 会使用webpack-dev-server命令，–open为自动打开浏览器，开发环境下生成的js文件会保存在server的缓存中，在根目录下，不会生成dist文件
运行npm run build 会使用webpack命令会在本地生成压缩后的js文件，所以，需要不同的配置
在项目的目录下创建config目录，
在development.js中配置：
在production.js中配置：
在webpack.config.js中配置：
通过env的参数的不同运行不同的配置，其他的配置是一样的
因为在index.html中的引入js文件的时候需要在生产和开发环境中引入不同的地址，这个时候我们需要使用html-webpack-plugin来自动引入不同的地址
安装：
npm i html-webpack-plugin -D
然后在production.js中配置如下：
引入的模板，在dist下就会生成相应的index.html
到此为止，一个最基本的webpack就配置好了
相关文章：