webpack环境优化

Posted 2021-09-23 Liane

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