webpack开发环境性能优化配置

优化打包速度

启动模块热替换

一个模块发生改变，只会重新打包这一个模块

安装webpack-dev-server
webpack-dev-server主要用来实现模块热替换，当js代码发生变化后会自动编译并更新。

1. 运行 npm install webpack-dev-server -D把这个工具安装到本地的依赖中
2. 安装完成后，这个工具的用法和 webpack 命令的用法一样
3. 由于，我们是在项目中，本地安装的 webpack-dev-server ，所以无法把它当作脚本命令，在控制台中直接运行（只有那些安装到全局的工具才能在控制台中正常运行）
4. webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中必须安装webpack
5. webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到实际的物理磁盘上；而是，直接托管到了电脑的内存中，所以我们在项目根目录中，根本找不到这个打包好的 bundle.js
6. 我们可以认为 webpack-dev-server 把打包好的文件以一种虚拟的形式，托管到了咱们项目的根目录中，虽然我们看不到他，但是，我们可以认为，和dist 、src、 node_modules 平级，有一个看不见的文件叫做bundle.js

css:样式文件可以使用HMR功能，style-loader内部实现了
js：默认不能使用HMR功能:需要修改js代码，添加支持HMR功能的代码

注意：HMR对js的处理只能处理对非入口文件使用HMR功能

html：默认不能使用HMR功能，同时会导致问题：html文件不能热更新了(不需要做)
解决：修改entry入口，将html文件引入

// js文件
if(module.hot){
  // 如果module.hot为true，说明开启了HMR功能，让HMR功能代码生效
  module.hot.accepts('./prints.js', function(){
    // 模块监听prints.js文件，一旦发生变化，其他模块不会重新打包
    print();
  })
}

entry:['./src/index.html'],
devServer:{
  hot:true
}

生成页面

安装html-wepack-plugin

npm install webpack html-wepack-plugin -g

html-webpack-plugin配置

const htmlWebpackPlugin = require('html-webpack-plugin');
plugins:[// 配置插件的节点
		new htmlWebpackPlugin({// 创建一个内存中生成html页面的插件
			template:path.join(__dirname,'./src/index.html'),
			filename:'index.html'
		})
	]