关于webpack:webpack环境优化

一、开发环境优化
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})
        })
    ]
}