1 Extract the CSS into an independent file, perform COMPATIBILITY processing of the CSS, and compress the CSS

// webpack.config.js webpack configuration file // Tell webpack what to do (when you run webpack, // All build tools run on the Node JS platform ~ modularize the default common.js // resolve is used to concatenate the absolute path const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const optimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
//
process.env.NODE_ENV = "developement"Module.exports = {// webpack configuration // entry:'./src/index.js'Output: {// Output filename filename:'./js/build.js', // output path // __dirname nodejs variable, representing the absolute path of the current file directory path: resolve(__dirname,'build'}, // Loader configuration module: {rules: [// details loader configuration {// matches which filestest: /\.css$/, // Which loader is used for processing use: [// create style tags, insert style resources in js, add them to head to take effect //'style-loader'// loader replaces style-loader. Role: to extract the CSS into a single file MiniCssExtractPlugin. Loader, / / will load js, CSS files into a commonjs module content is style string'css-loader', // CSS compatibility processing: postCSS --> postCSs-loader postCSs-env // Compatibility processing for browsers //"browserslist": {// development environment --> Set the node environment variable: process.env.node_env = developement //"development": / / /"last 1 chrome version", / /"last 1 firefox version", / /"last 1 safari version"//], // Production environment //"production": / / /"0.2%" >, / /"not dead", / /"not op_minni all"//post-loader // Modify loader configuration {loader:'postcss-loader',
                        options: {
                            ident: 'postcss', plugins: () => {// postcss plugin require('postcss-preset-env')()}}}]}, {testLess $: /\.less$/, // Which loader is used for processing // Use multiple loaders to process with use use: [// create style tags, insert style resources in JS, add them to head to take effect'style-loader'// Change the CSS file into a commonJS module and load the js file with the style string'css-loader'// To compile less files into CSS files // Download less and less-loaders'less-loader']}, {/ / package exclude other resources / / out CSS, js, HTML resources: / \. (CSS | less | js | HTML) $/, loader:'file-loader',
                options: {
                    name: '[hash:10].[ext]'// Package output folder directory outputPath:'media'}}, {// problem: img images in HTML cannot be processed by defaulttest: / \. (JPG | PNG | | GIF jpeg) $/, / / need to download url - loader and file - loader loader:'url-loader', options: {// Images less than 8KB will be base64 processing, // advantages: reduce the number of requests (reduce server stress) // disadvantages: larger image size (slower file request)limit: 8 * 1024,
                    esModule: false// Rename the image // [hash:10] // [ext];'[hash:10].[ext]',
                    outputPath: 'imgs',}}, {test: /\.html$/, // Handles the img image of the HTML file (responsible for importing img, which can be processed by url-loaderurl-loader)'html-loader'}]}, // plugins: By default, the html-webpack-plugin creates an empty HTML, New HtmlWebpackPlugin({// Copy the./ SRC /index.html file and automatically import all the resources (js/ CSS) template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/build.css'}), / / CSS compression new optimizeCssAssetsWebpackPlugin ()], / / pattern mode:'development'// development mode // mode:'production', // Production mode // devServer is used for automation (automatically compile, automatically open the browser, automatically refresh the browser) // Only compile packages in memory, NPX webpack-dev-server devServer: {contentBase: resolve(__dirname,'build'), // Start gzip compression compress:true, // port: 3000, // automatically open browser open:true,}}Copy the code

Add to our package.json file

"browserslist": {
    "development": [
      "last 1 chrome version"."last 1 firefox version"."last 1 safari version"]."production": [
      "0.2%" >."not dead"."not op_minni all"]}Copy the code