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

Build a React-hooks project from scratch

Build a React-hooks project from scratch

Configuration of the development environment

Build the production environment

Related Posts

The life cycle of ethereum transactions

Focus on traditional network and learn SDN foundation and cases

Knowledge of Intranet penetration is exempt