Webpack中生产环境的基本配置与HMR的使用

本文主要是介绍Webpack中生产环境的基本配置与HMR的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在文章开始之前，首先想让大家知道一个知识点，那就是loader的加载顺序问题，是从下到上开始进行加载的。

定义nodejs的环境变量，决定使用browserslist的哪个环境

process.env.NODE_ENV = 'production';

复用loader

首先定义好需要复用的loader。

const commonCssLoader = [MiniCssExtractPlugin.loader,'css-loader',{// 还需要再package.json中定义browserslistloader: 'postcss-loader',options: {ident: 'postcss',plugins: () => [require('postcss-preset-env')()]}}
]

在需要进行使用的地方，通过拓展运算符来进行使用。

module: {rules: [{// 处理CSStest: /\.css$/,use: [...commonCssLoader]},{test: /\.less$/,use: [...commonCssLoader,'less-loader']}]}

生产环境下基本文件的配置方式

下面的配置包含了HTML、CSS、JS、图片、压缩、兼容性等的处理方式。

const { resolve } = require(

这篇关于Webpack中生产环境的基本配置与HMR的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---