一、开发环境优化
HMR(Hot Module Replacement模块热替换)--是webpack提供的最有用的性能之一，它容许在运行时更新各种模块，而无需进行齐全刷新。

开启办法：在webpack.config.js中的devServer中退出hot参数--只能监听js文件的变动。

devServer: {    port: 8080,     /*指定端口*/    compress: true, /*开启主动压缩*/    open: true,     /*主动关上浏览器*/    hot: true       /*开启模块热替换*/}

监听html文件的扭转，因htmL没有HMR性能，只须要在entry入口中引入html文件就行。

entry: ['./index.js','./index.html']

对于款式的HMR性能，在开发环境中应用style-loader就行（打包时替换成mini-css-extract-plugin就行）

module: {    rules: [        {            test: /\.css$/,            use: ['style-loader','css-loader','postcss-loader']            }    ]}

js也是默认没有HMR性能，因而只能解决非入口文件的js文件，解决办法：
启动hot后，module.hot接口就会裸露在index.js中，只须要在index.js中配置，通知webpack承受HMR的模块就能够了。

if(module.hot){ /*通知webpack承受热替换的模块*/    module.hot.accept('./[被监听的js的门路]',()=>{})}

服务器检测到了js代码的变动就会执行module.hot.accept的回调函数

二、生产环境优化
1、去除没有用到的js代码
webpack自带的tree-shaking在打包时可主动帮咱们去除实际上没有应用的js代码，然而必须满足以下应用条件：

a、必须应用es6模块化开发b、打包mode应用production模式

2、去除没有用到的css代码
应用purgecss-webpack-plugin插件可去除无用css,通过mini-css-extract-plugin应用
a、装置

npm i purgecss-webpack-plugin -D

b、在webpack.config.js中配置

const (resolve,join) = require('path');/*node中的path.resolve()能够把一个门路或片段的序列解析为一个绝对路径，相当于cd操作*//*node中的path.join()能够将门路片段应用特定的分隔符'/'链接起来，并规范化造成门路*/const glob = require('glob')  /*glob是node的全局对象*/const PATHS = {src: join(__dirname,'src')}const MiniCssExtractPlugin = require('mini-css-extract-plugin')const PurgecssPlugin = require('purgecss-webpack-plugin')  /*引入插件*/module.exports = {    entry: './src/xxx.js',    output: {        filename: '[name].js',        path: resolve(__dirname, 'dist')    },    module: {        relus: [            {                test: /\.css$/,                use: [                    MiniCssExtractPlugin.loader,                    'css-loader'                ]            }        ]    },    plugins: [        new MiniCssExtractPlugin({            filename: '[name].css'        }),        new PurgecssPlugin({            paths:glob.sync(`${PATHS.src}/**/*`,{nodir:true})        })    ]}