Build a React-hooks project from scratch
- The last article built the basic Webpack project, which can support the basic use of React and less, but did not take into account the actual situation of the project, such as production environment code confusion, code compression, development environment hot start, etc..
- Now let’s configure WebPack for different requirements of development and production environments
- There are many differences between the production configuration and the development configuration, so we need to create the corresponding configuration files respectively. In the root directory, we create webpack.prod.js (production configuration) and webpack.dev.js (development configuration) respectively.
- Then create two new commands in package.json scripts: “build”: “webpack –config webpack.prod.js”, “dev”: “webpack –config webpack.dev.js”
Configuration of the development environment
- Copy the configuration from webpack.config.js to webpack.dev.js, and then make our basic configuration changes
- First of all, we need to accurately locate the error, so enable devtool in the configuration: “inline-source-map”, as shown below
- The CSS style overlay relationship has been used in our previous development with the Source: map property, so it can be used in the development environment
const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
app: './index.js'.test: './index.jsx'
},
output: {
filename: '[name].js'.path: path.resolve(__dirname, 'dist'),
chunkFilename: '[name].bundle.js'
},
module: {
rules: [{test: /\.(le|c)ss$/.use: [
'style-loader',
{
loader: 'css-loader'.options: {
sourceMap: true // Whether to enable style lookup}}, {loader: 'postcss-loader'.// Prefix the browser
options: {
ident: 'postcss'.sourceMap: true.plugins: loaders= > [
require('autoprefixer')({})]}}, {loader: 'less-loader'.// Parse the style file
options: {
sourceMap: true}}]}, {test: /\.(js)x? $/.use: ['babel-loader'].exclude: /node-modules/}},devtool: 'inline-source-map'.plugins: [
new HTMLWebpackPlugin({
inject: true.// All js scripts are placed after the body
hash: true.// Generate hash for static resources for clear caching
cache: true.// Issue files only when they are changed
title: 'react admin'.filename: 'index.html'.template: path.resolve(__dirname, 'index.html'),
minify: {
collapseWhitespace: true.// Fold white space
removeComments: true.// Delete comments
removeRedundantAttributes: true.removeScriptTypeAttributes: true.removeStyleLinkTypeAttributes: true}}),new CleanWebpackPlugin()
]
}
Copy the code- Then in our development process we do not want to manually execute NPM run dev every time we make a change, so we use our webpack-dev-server to provide static service for us node, together with webpack can enable us to achieve real-time update, real-time display. There is no need to manually trigger the NPM run dev command to refresh
- Json :”webpack-dev-server –open –config webpack.dev.js”
- Next, you need to configure the static service, placing the configuration items under devServer in the configuration as follows
const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {... },output: {... },module: {... },devtool: 'inline-source-map'.plugins: [...]. .devServer: {
contentBase: './dist'.// Static file directory for browser display
clientLogLevel: 'warning'.// Outputs the log level
hot: true.// Start hot update
publicPath: '/'.// Browser access path
compress: true.// Enable gzip compression
port: 9998.open: true.// Automatically launches the browser
overlay: { // Whether an error or warning overrides the online error message
warnings: true.errors: true
},
quiet: true.proxy: { / / agent
},
watchOptions: { // Monitor file configurations
poll: true.ignored: /node_modules/.aggregateTimeout: 300 // Default, webPack can set the build delay when you make continuous changes.}}}Copy the code- Then when we run our NPM run dev, it will automatically open the browser for us and refresh the page when we modify the main file
- The auto-refresh above has some problems in some scenarios, and the current page binding may not refresh immediately when the dependent module changes, so we need to introduce a new module to fix the problem
- Webpack built-in module hot replacement plugin HotModuleReplacementPlugin, when using, only need to introduce webpack, And then add new plugins webpack. HotModuleReplacementPlugin () can solve the problems of the based partly on the refresh is not timely, as follows
. const webpack =require('webpack')
module.exports = {
entry: {... },output: {... },module: {... },devtool: 'inline-source-map'.plugins: [
newwebpack.HotModuleReplacementPlugin(), ... ] .devServer: {... }}Copy the code- Once again, NPM run dev changes the code and refreshes it in real time, and the basic configuration of the development environment is complete
Build the production environment
- Production environment In order to customer experience and code privacy, we generally conduct confusion compression of the code, including CSS and JS code compression, the following we will carry out relevant configuration
- We will first copy the basic configuration from our previous webpack.config.js to webpack.prod.js, and then make relevant changes on this basis
- In the previous chapter, we named filename in output as [name].js, which is consistent with the entry file. In the production environment, we need to modify it to avoid cache problems caused by name consistency
- Change the value to [name].[chunkhash].js. In this way, a hash value is added by default during file generation to avoid cache problems
// The configuration content of the last chapter will not be displayed completely later
const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
app: './index.js'.test: './index.jsx'
},
output: {
filename: '[name].[chunkhash].js'.path: path.resolve(__dirname, 'dist'),
chunkFilename: '[name].bundle.js'
},
module: {
rules: [{test: /\.(le|c)ss$/.use: [
'style-loader',
{
loader: 'css-loader'.options: {
sourceMap: true // Whether to enable style lookup}}, {loader: 'postcss-loader'.// Prefix the browser
options: {
ident: 'postcss'.sourceMap: true.plugins: loaders= > [
require('autoprefixer')({})]}}, {loader: 'less-loader'.// Parse the style file
options: {
sourceMap: true}}]}, {test: /\.(js)x? $/.use: ['babel-loader'].exclude: /node-modules/}},plugins: [
new HTMLWebpackPlugin({
inject: true.// All js scripts are placed after the body
hash: true.// Generate hash for static resources for clear caching
cache: true.// Issue files only when they are changed
title: 'react admin'.filename: 'index.html'.template: path.resolve(__dirname, 'index.html'),
minify: {
collapseWhitespace: true.// Fold white space
removeComments: true.// Delete comments
removeRedundantAttributes: true.removeScriptTypeAttributes: true.removeStyleLinkTypeAttributes: true}}),new CleanWebpackPlugin()
]
}
Copy the code- After executing NPM run build, open the Dist folder and find the generated files with a string of garbled characters. This avoids the problem of online caching
- Next we need to open the full error debugging, so that we can find the problem online, or change devtool to source-map, as shown below
. module.exports = {entry: {... },devtool: 'source-map'.output: {... },... }Copy the code- Then we try to actively throw errors in index.js. After executing NPM run build, we can click the error in the browser to locate the relevant error, which is convenient for error detection
- Then we need to compress and confuse the code to reduce the code volume. We need to compress the JS code first. Here we need to reference the plug-in terser-webpack-plugin and download it first. CNPM I terser-webpack-plugin -d, and then perform related configuration in the configuration file as follows
const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
module.exports = {
entry: {... },devtool: 'source-map'.output: {... },module: {... },plugins: [...]. .optimization: {
minimizer: [
/ / js compressed
new TerserWebpackPlugin({
cache: true.// Enable file caching
parallel: true.// multi-threaded call
sourceMap: true // Error check}}}),]Copy the code- Is next to the CSS file package for processing, we must first to the CSS file to separate packaging, packaging before we can observe the file is actually no CSS file, since webpack beat all files into one file, so we can’t see it, it is not friendly to the final generated by the project, So we need to extract CSS from the package first, here we need a new package mini-css-extract-plugin, again use NPM to download this package: NPM I mini-CSs-extract-plugin-d, and then configure it in the loader
- First, we referenced the plug-in in the page, replaced the style-loader with the loader provided by it, and then configured the naming rules for CSS extraction in plugins. In order to avoid cache problems, we used hash values for naming, as follows
. const MiniCssExtractPlugin =require('mini-css-extract-plugin')
module.exports = {
entry: {... },devtool: 'source-map'.output: {... },module: {
rules: [{test: /\.(le|c)ss$/.use: [
MiniCssExtractPlugin.loader, // Replace the original style-loader
{
loader: 'css-loader'.options: {
sourceMap: true // Whether to enable style lookup}}, {loader: 'postcss-loader'.// Prefix the browser
options: {
ident: 'postcss'.sourceMap: true.plugins: loaders= > [
require('autoprefixer')({})]}}, {loader: 'less-loader'.// Parse the style file
options: {
sourceMap: true}}]},... ] },plugins: [
new MiniCssExtractPlugin({// Package the CSS into a separate CSS file
filename: '[name].[hash:5].css'.chunkFilename: '[id].[hash:5].css'}),... ] }Copy the code- After running NPM run build, we can find app.xxxxx. CSS file in the typed file
- Optimize – CSS-assets-webpack-plugin for CSS compression NPM I optimize- CSS-assets – webpack-plugin-d, and then configure it in webpack as well as in minimizer under Optimization, as follows
const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
entry: {... },devtool: 'source-map'.output: {... },module: {... },plugins: [...]. .optimization: {
minimizer: [
/ / js compressed
new TerserWebpackPlugin({
cache: true.// Enable file caching
parallel: true.// multi-threaded call
sourceMap: true // Error check
}),
new OptimizeCssAssetsWebpackPlugin({}) / / CSS compression]}}Copy the code- At this point, we have basically completed the configuration of the development and production environments, and we can proceed to address the project needs accordingly
- Looking at the development and production configurations above, there are some common configurations that can be separated out. Here we use the WebPack-Merge package to separate out the common configurations
- NPM I webpack-merge -d
- Then create a new webpack.common.js in the root directory to hold our common configuration
- Looking at development and production configurations, extract common configurations as follows
// webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: {
app: './index.js'.test: './index.jsx'
},
module: {
rules: [{test: /\.(|js)x? $/.use: ['babel-loader'].exclude: /node-modules/}},plugins: [
new HtmlWebpackPlugin({
inject: true.// All js scripts are placed after the body
hash: true.// Generate hash for static resources for clear caching
cache: true.// Issue files only when they are changed
title: 'react admin'.filename: 'index.html'.template: path.resolve(__dirname, 'index.html'),
minify: {
collapseWhitespace: true.// Fold white space
removeComments: true.// Delete comments
removeRedundantAttributes: true.removeScriptTypeAttributes: true.removeStyleLinkTypeAttributes: true}}),new CleanWebpackPlugin(),
]
}
Copy the code- We did not separate code blocks in our previous configuration. Here we simply add a set of configuration, which is common to development and production, so we also add it to the above configuration, as follows
// webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: {
app: './index.js'.test: './index.jsx'
},
module: {
rules: [{test: /\.(|js)x? $/.use: ['babel-loader'].exclude: /node-modules/}},plugins: [
new HtmlWebpackPlugin({
inject: true.// All js scripts are placed after the body
hash: true.// Generate hash for static resources for clear caching
cache: true.// Issue files only when they are changed
title: 'react admin'.filename: 'index.html'.template: path.resolve(__dirname, 'index.html'),
minify: {
collapseWhitespace: true.// Fold white space
removeComments: true.// Delete comments
removeRedundantAttributes: true.removeScriptTypeAttributes: true.removeStyleLinkTypeAttributes: true}}),new CleanWebpackPlugin(),
],
optimization: { // Public code is pulled away
splitChunks:{ // Enable code splitting with default configuration items
chunks: 'all'}}}Copy the code- This configures our code splitting capability, and we continue to configure our production and development configuration
- Then modify webpack.dev.js, first introduce webpack-merge and webpack.common.js, then merge, because the loader in CSS is inconsistent with the production environment. Now webpack also needs to specify mode for the configuration, which can be production or deveopment. In this case, it is development configuration, so we add a new field mode: ‘development’, which ends as follows
// webpack.dev.js
const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const common = require('./webpack.common.js')
module.exports = merge(common, {
mode: 'development'.output: {
filename: '[name].js'.path: path.resolve(__dirname, 'dist'),
chunkFilename: '[name].bundle.js'
},
module: {
rules: [{test: /\.(le|c)ss$/.use: [
'style-loader',
{
loader: 'css-loader'.options: {
sourceMap: true // Whether to enable style lookup}}, {loader: 'postcss-loader'.// Prefix the browser
options: {
ident: 'postcss'.sourceMap: true.plugins: loaders= > [
require('autoprefixer')({})]}}, {loader: 'less-loader'.// Parse the style file
options: {
sourceMap: true}}]}]},devtool: 'inline-source-map'.plugins: [
new webpack.HotModuleReplacementPlugin(), // Module hot replacement
new webpack.NamedModulesPlugin() // Hot update returns the filename instead of the file ID].devServer: {
contentBase: './dist'.// Static file directory for browser display
clientLogLevel: 'warning'.// Outputs the log level
hot: true.// Start hot update
publicPath: '/'.// Browser access path
compress: true.// Enable gzip compression
port: 8822.open: true.// Automatically launches the browser
overlay: { // Whether an error or warning overrides the online error message
warnings: true.errors: true
},
quiet: true.proxy: { / / agent
},
watchOptions: { // Monitor file configurations
poll: true.ignored: /node_modules/.aggregateTimeout: 300 // Default, webPack can set the build delay when you make continuous changes.}}})Copy the code- Run NPM run dev again to find the same configuration as before, then we also merge the production configuration, and add a mode: production
- Merge webpack-merge with webpack.common.js and merge with webpack.common.js as follows
// webpack.prod.js
const path = require('path')
const TerserWebpackPlugin = require('terser-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const merge = require('webpack-merge')
const common = require('./webpack.common.js')
module.exports = merge(common, {
mode: 'production'.devtool: 'source-map'.output: {
filename: '[name].[chunkhash].js'.path: path.resolve(__dirname, 'dist'),
chunkFilename: '[name].bundle.js'
},
module: {
rules: [{test: /\.(le|c)ss$/.use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'.options: {
sourceMap: true // Whether to enable style lookup}}, {loader: 'postcss-loader'.// Prefix the browser
options: {
ident: 'postcss'.sourceMap: true.plugins: loaders= > [
require('autoprefixer')({})]}}, {loader: 'less-loader'.// Parse the style file
options: {
sourceMap: true}}]}]},plugins: [
new MiniCssExtractPlugin({// Package the CSS into a separate CSS file
filename: '[name].[hash:5].css'.chunkFilename: '[id].[hash:5].css'}),].optimization: {
minimizer: [
/ / js compressed
new TerserWebpackPlugin({
cache: true.// Enable file caching
parallel: true.// multi-threaded call
sourceMap: true // Error check
}),
new OptimizeCssAssetsWebpackPlugin({}) / / CSS compression]}})Copy the code- The configuration of the production and development environment is completed above, but there are some omissions in the previous configuration. One is that the CSS extraction rule is not configured in the development environment, and the other is that the image resource loading, font library and icon in react development are not configured
- So we’re going to set the environment variable in the webpack command to differentiate between the development and production environment. We’re going to reference the cross-env package. The NPM I cross-env -d command is used to set the compatibility of environment variables for each platform
- Then change the startup command in package.json to “dev”: “cross-env NODE_ENV=development webpack-dev-server –open –config webpack.dev.js”, “build”: “Cross-env NODE_ENV=production webpack –config webpack.prod.js” then print process.env.node_env in webpack.common.js, NPM run dev process.env.node_env is ‘development’ and NPM run build process.env.node_env is ‘production’. Delete the CSS packing configuration in webpack.prod.js and add the following configuration in webpack.common.js
// webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV === 'development' // The value set on the command line
console.log(devMode)
module.exports = {
entry: {... },module: {... },plugins: [
new MiniCssExtractPlugin({// Package CSS into a single CSS file to generate different CSS during development and generation
filename: devMode ? '[name].css' : '[name].[hash:5].css'.chunkFilename: devMode ? '[id].css' : '[id].[hash:5].css'}),... ] }Copy the code- Next, we need to process the image. In the development, we will often introduce image resources according to the relative path of the current file, but our packaging is based on the entry file, so it often leads to the error of the final image reference path. Here, we need to use urL-loader to help us process the image path. Will replace our reference path with the packaged file path.
- Url-loader also provides the function of transferring images to dataUrl, so that the path of transferring images to dataUrl can be directly introduced to avoid network request. However, if the images are too large, our encoding rate will be affected. In this case, network image request should be used. Limit in url-loader is to control the size of the image to be converted to dataUrl, and access the image address if the image is larger than this limit.
- NPM I url-loader file-loader-d
- Here we will configure the images in each format, which will be used for both production and development. Therefore, we will configure the images in webpack.common.js as follows
// webpack.common.js. module.exports = {entry: {... },module: {
rules: [{test: /\.(jpg|png|gif|svg)$/.use: [{loader: 'url-loader'.options: {
limit: 10000.name: '[name]-[hash:5].[ext]'.outputPath: 'img/'}}]}... ] },plugins: [...]. }Copy the code- In this way, when the image is within 10K, we will introduce it into the path of dataUrl, and put the image in the IMG folder
- Webpack also provides image compression function for us, which is convenient to reduce the volume of our project. We need to use image-webpack-loader to configure, or download the package NPM I image-webpack-loader -d first
- Then, related configuration is required in both development and production, so the configuration is still carried out in webpack.common.js. The configuration is as follows
// webpack.common.js. module.exports = {entry: {... },module: {
rules: [{test: /\.(jpg|png|gif|svg)$/.use: [{loader: 'url-loader'.options: {
limit: 10000.name: '[name]-[hash:5].[ext]'.outputPath: 'img/'}}, {loader: 'image-webpack-loader'.options: {
mozjpeg: {
progressive: true.quality: 65
},
optipng: {
enabled: false
},
pngquant: {
quality: [0.65.0.9].speed: 4
},
gifsicle: {
interlaced: false
},
webp: {
quality: 75}}}]}},plugins: [...]. }Copy the code- The above has completed the configuration of the pictures under development. Next, configure the font library, using urL-loader again, and the configuration rules are consistent with the pictures, as follows
. module.exports = {entry: {... },module: {
rules: [{test: /\.(woff2? |eot|ttf|otf)(\? . *)? $/.use: [{loader: 'url-loader'.options: {
// If the file size is smaller than limit, url-loader will convert the file to DataUR
limit: 10000.name: '[name]-[hash:5].[ext]'.ourput: 'fonts/'}}],},]},plugins: [...]. }Copy the code- The react configuration file is not a problem anymore. Here is the configuration file for this chapter. You can also choose the source code to view it
- In the next chapter we configure typeScript, and then the project begins in earnest
// webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV === 'development'
console.log(devMode)
module.exports = {
entry: {
app: './index.js'.test: './index.jsx'
},
module: {
rules: [{test: /\.(jpg|png|gif|svg)$/.use: [{loader: 'url-loader'.options: {
limit: 10000.name: '[name]-[hash:5].[ext]'.outputPath: 'img/'}}, {loader: 'image-webpack-loader'.options: {
mozjpeg: {
progressive: true.quality: 65
},
optipng: {
enabled: false
},
pngquant: {
quality: [0.65.0.9].speed: 4
},
gifsicle: {
interlaced: false
},
webp: {
quality: 75}}}]}, {test: /\.(woff2? |eot|ttf|otf)(\? . *)? $/.use: [{loader: 'url-loader'.options: {
// If the file size is smaller than limit, url-loader will convert the file to DataUR
limit: 10000.name: '[name]-[hash:5].[ext]'.ourput: 'fonts/'}}],}, {test: /\.(js)x? $/.use: ['babel-loader'].exclude: /node-modules/}},plugins: [
new MiniCssExtractPlugin({// Package the CSS into a separate CSS file
filename: devMode ? '[name].css' : '[name].[hash:5].css'.chunkFilename: devMode ? '[id].css' : '[id].[hash:5].css'
}),
new HtmlWebpackPlugin({
inject: true.// All js scripts are placed after the body
hash: true.// Generate hash for static resources for clear caching
cache: true.// Issue files only when they are changed
title: 'react admin'.filename: 'index.html'.template: path.resolve(__dirname, 'index.html'),
minify: {
collapseWhitespace: true.// Fold white space
removeComments: true.// Delete comments
removeRedundantAttributes: true.removeScriptTypeAttributes: true.removeStyleLinkTypeAttributes: true}}),new CleanWebpackPlugin(),
],
optimization: { // Public code is pulled away
splitChunks:{ // Enable code splitting with default configuration items
chunks: 'all'}}}// webpack.dev.js
const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const common = require('./webpack.common.js')
module.exports = merge(common, {
output: {
filename: '[name].js'.path: path.resolve(__dirname, 'dist'),
chunkFilename: '[name].bundle.js'
},
module: {
rules: [{test: /\.(le|c)ss$/.use: [
'style-loader',
{
loader: 'css-loader'.options: {
sourceMap: true // Whether to enable style lookup}}, {loader: 'postcss-loader'.// Prefix the browser
options: {
ident: 'postcss'.sourceMap: true.plugins: loaders= > [
require('autoprefixer')({})]}}, {loader: 'less-loader'.// Parse the style file
options: {
sourceMap: true}}]}]},devtool: 'inline-source-map'.plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin()
],
devServer: {
contentBase: './dist'.// Static file directory for browser display
// clientLogLevel: 'warning', // Output log level
hot: true.// Start hot update
publicPath: '/'.// Browser access path
compress: true.// Enable gzip compression
port: 8822.open: true.// Automatically launches the browser
overlay: { // Whether an error or warning overrides the online error message
warnings: true.errors: true
},
quiet: true.proxy: { / / agent
},
watchOptions: { // Monitor file configurations
poll: true.ignored: /node_modules/.aggregateTimeout: 300 // Default, webPack can set the build delay when you make continuous changes.}}})// webpack.prod.js
const path = require('path')
const TerserWebpackPlugin = require('terser-webpack-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const merge = require('webpack-merge')
const common = require('./webpack.common.js')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = merge(common, {
devtool: 'source-map'.output: {
filename: '[name].[chunkhash].js'.path: path.resolve(__dirname, 'dist'),
chunkFilename: '[name].bundle.js'
},
module: {
rules: [{test: /\.(le|c)ss$/.use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'.options: {
sourceMap: true // Whether to enable style lookup}}, {loader: 'postcss-loader'.// Prefix the browser
options: {
ident: 'postcss'.sourceMap: true.plugins: loaders= > [
require('autoprefixer')({})]}}, {loader: 'less-loader'.// Parse the style file
options: {
sourceMap: true}}]}]},plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'server'.analyzerHost: '127.0.0.1'.analyzerPort: 7778.reportFilename: 'report.html'.defaultSizes: 'parsed'.openAnalyzer: true.generateStatsFile: false.statsFilename: 'stats.json'.statsOptions: null.logLevel: 'info'}),].optimization: {
minimizer: [
/ / js compressed
new TerserWebpackPlugin({
cache: true.// Enable file caching
parallel: true.// multi-threaded call
sourceMap: true // Error check
}),
new OptimizeCssAssetsWebpackPlugin({}) / / CSS compression]}})Copy the code