轉載請注明 來源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack生產環境基本配置

直接上webpack的配置文件webpack.config.js
這里增加了自定義js、imgs、media等目錄。
各類型資源的配置說明參見后續相關章節。

一、安裝所需的npm包

# 需要用npm安裝的依賴包
> npm i  webpack@4.41.6  webpack-cli@3.3.11   style-loader@1.1.3  css-loader@3.4.2  less-loader@5.0.0  less@3.11.1 html-webpack-plugin@4.5.2  file-loader@5.0.2  url-loader@3.0.0  html-loader@0.5.5  file-loader@5.0.2  url-loader@3.0.0  html-loader@0.5.5  webpack-dev-server@3.10.3  mini-css-extract-plugin@0.9.0  postcss-loader@3.0.0  postcss-preset-env@6.7.0  optimize-css-assets-webpack-plugin@5.0.3  eslint@7.32.0 eslint-config-airbnb-base@15.0.0  eslint-loader@4.0.2 eslint-plugin-import@2.28.1 babel-loader@8.3.0 @babel/preset-env@7.14.7  @babel/core@7.14.6    @babel/polyfill@7.12.1  core-js@3.32.1 -D

二、webpack.config.js webpack的配置文件詳解

/*
    開發環境配置，能讓代碼運行。

    webpack.config.js webpack的配置文件
    作用:指示webpack干哪些活(當你運行webpack指令時,會加載里面的配置)
    所有構建工具都是基于nodejs平臺運行的~模塊化默認采用commonjs.
    loader: 1.下載 2.使用(配置loader)
    plugins: 1.下載2. 引入 3.使用

    路徑： ./webpack.config.js
*/

// resolve用來拼接絕對路徑的方法
const { resolve } = require('path');
// 引入打包 html 文件的插件 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 引入壓縮 css 的插件 optimize-css-assets-webpack-plugin
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

// 設置 nodejs 環境變量,決定使用‘browserslist‘的哪個環境
// process.env.NODE_ENV = 'development';

// 復用 loader
const commonCssLoader = [
    // use數組中loader執行順序:從右到左,從下到上依次執行
    // 創建style標簽,將js中的樣式資源插入進行,添加到head中生效
    // 'style-loader',
    // 這個loader取代style-loader。作用:提取js中的css成單獨文件            
    {
        loader: MiniCssExtractPlugin.loader,
        options: {
            // 這里可以指定一個 publicPath
            // 默認使用 webpackOptions.output中的publicPath
            publicPath: '../'
        },
    },
    // 將css文件變成commonjs模塊加載js中,里面內容是樣式字符串
    'css-loader',
    /*
        css兼容性處理: postcss --> postcss-loader postcss-preset-env
        postcss-preset-env的作用是幫postcss找到package.json中browserslist里面的配置,
        通過配置加載指定的css兼容性樣式，可以在 github上找到 browserslist 的更多配置。
        以下舉例應該在package.json 配置的內容。
        ========package.json  文件 begin=========
                        "browserslist":{
                            //開發環境-->設置node環境變量: process.env.NODE_ENV = development
                            "development":[
                                "last 1 chrome version",
                                "last 1 firefox version",
                                "last 1 safari version",
                                "ie 9-12"
                            ],
                            //生產環境：默認是生產環境
                            "production":[
                                ">0.2%",
                                "not dead",
                                "not op_mini all"
                            ]
                        },
            ========package.json  文件 end=========
    */
    //使用loader的默認配置
    //'postcss-loader"
    //修改loader的配置
    {
        loader: 'postcss-loader',
        options: {
            ident: 'postcss',
            plugins: () => [
                // postcss的插件
                require('postcss-preset-env')()
            ]

        }
    }
]
module.exports = {
    // webpack配置
    // 入口起點文件
    entry: './src/js/index.js',
    // 輸出
    output: {
        // 輸出文件名
        filename: 'js/built.js',
        // 輸出路徑
        // __dirname nodejs的變量,代表當前文件的目錄絕對路徑
        path: resolve(__dirname, 'build'),
    },
    // loader的配置
    module: {
        rules: [
            // 詳細loader配置
            //不同文件必須配置不同loader處理

            // 打包 css 文件的詳細loader配置
            {
                // 匹配哪些文件
                test: /\.css$/,
                // 使用哪些loader進行處理
                use: [...commonCssLoader],
            },

            //打包less 文件的詳細loader配置
            {
                //匹配哪些文件
                test: /\.less$/,
                //使用哪些loader進行處理
                use: [
                    ...commonCssLoader,
                    //將less文件編譯成css文件
                    //需要下載less-loader和less
                    'less-loader'
                ]
            },

            /*
           語法檢查: eslint-loader eslint
           注意:只檢查自己寫的源代碼,第三方的庫是不用檢查的
           設置檢查規則:
               airbnb-->eslint-config-airbnb-base eslint-plugin-import eslint

               在package.json中eslintConfig中設置
                 "eslintConfig": {
                       "extends": "airbnb-base"
                   }
           
           */
            {
                test: /\.js$/,
                // 指定檢查的目錄，或者配置排除某些文件夾
                // include: [path.resolve(__dirname, 'src')], 
                // 注意:只檢查自己寫的源代碼,第三方的庫是不用檢查的,這里排除node_modules文件夾
                exclude: /node_modules/,
                loader: 'eslint-loader',
                /*
                1. pre 優先處理
                2. normal 正常處理（默認）
                3. inline 其次處理
                4. post 最后處理
                */
                enforce: 'pre',
                options: {
                    // 這里的配置項參數將會被傳遞到 eslint 的 CLIEngine
                    // 自動修復eslint的錯誤
                    fix: true,
                },
            },
            /*
                 js兼容性處理:babel-loader @babel/core @babel/preset-env
                 1.基本js兼容性處理 @babel/preset-env
                 問題：只能轉換基本語法，如promise不能轉換 
                 2．全部js兼容性處理 --> @babel/polvfill
                 問題：我只要解決部分兼容性問題，但是將所有兼容性代碼全部引入，體積太大了~ 
                 3. 需要做兼容性處理的就做：按需加載 --> core-js
                 */
            {
                test: /\.(?:js|mjs|cjs)$/,
                // 指定檢查的目錄，或者配置排除某些文件夾
                // include: [path.resolve(__dirname, 'src')], 
                // 注意:只檢查自己寫的源代碼,第三方的庫是不用檢查的,這里排除node_modules文件夾
                loader: "babel-loader",
                exclude: /node_modules/,
                options: {
                    // 預設：指示 babel 做怎么樣的兼容性處理
                    "presets": [
                        [
                            "@babel/preset-env",
                            {
                                // 按需加載
                                useBuiltIns: 'usage',
                                // 制定 core-js 版本
                                corejs: {
                                    version: 3
                                },
                                //指定兼容性做到哪個版本的瀏覽器
                                targets: {
                                    chrome: '60',
                                    firefox: '60',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]
                    ]
                }
            },
            {
                // 問題：默認處理不了 html 中的 img 圖片
                // 處理圖片資源
                test: /\.(jpg|png|gif)$/,
                // 使用一個loader
                // 下載url-loader file-loader
                loader: 'url-loader',
                options: {
                    // 圖片大小小于8kb,就會被base64處理
                    // 優點:減少請求數量(減輕服務器壓力)
                    // 缺點:圖片體積會更大(文件請求速度更慢)
                    limit: 8 * 1024,
                    // 問題:因為url-loader默認使用es6模塊化解析, 而html-loader默認引入圖片是commonjs
                    // 解析時會出問題: [object Module]
                    // 解決:關閉url-loader的es6模塊化,使用commonjs解析
                    esModule: false,
                    // 給圖片進行重命名
                    // [hash:10]取圖片的hash的前10位
                    // [ext]取文件原來擴展名
                    name: '[hash:10].[ext]',
                    // 設置輸出目錄，將打包的圖片資源放到imgs文件夾
                    outputPath: './imgs',
                },
            },
            {
                test: /\.html$/,
                // 處理html文件的img圖片(負責引入img,從而能被url-loader進行處理)
                loader: 'html-loader',
                options:
                {
                    // 默認情況下,生成使用ES塊語法的Js模塊
                    // 問題:生成的圖片顯示錯誤
                    // 解決: esModule改為false
                    esModule: false,
                },
            },
            {
                // 打包其他資源(除了html/js/css資源以外的資源)
                // 排除css/is/html資源
                exclude: /\.(css|js|html|less|jpg|png|gif)$/,
                loader: 'file-loader',
                options:
                {
                    // 給資源進行重命名
                    // [hash:10]取資源的hash的前10位
                    // [ext]取文件原來擴展名
                    name: '[hash:10]. [ext]',
                    // 設置輸出目錄，將打包的其他資源放到media 文件夾
                    outputPath: './media',
                },
            },

        ],
    },
    // plugins的配置
    plugins: [
        // 詳細的plugins配置
        // html-webpack-plugin
        // 功能:默認會創建一個空的HTML, 自動引入打包輸出的所有資源(JS/CSS)
        // 需求:需要有結構的HTML文件
        new HtmlWebpackPlugin({
            // 復制../src/index.html'文件,并自動引入打包輸出的所有資源(JS/CS5)
            template: './src/index.html',
            //壓縮 html 代碼
            minify: {
                //移除空格
                collapseWhitespace: true,
                //移除注釋
                removeComments: true
            }
        }),
        new MiniCssExtractPlugin({
            //對輸出的css文件進行重命名，這里單獨為生成的 css 創建一個 css 文件夾。
            filename: './css/[name].css',
            chunkFilename: "./css/[id].css",
            ignoreOrder: false,
            linkType: "text/css",
        }),
        // 壓縮 css
        new OptimizeCssAssetsWebpackPlugin(),
    ],
    // 模式  development  開發環境，production 生產環境
    // mode: 'development',
    // 生產環境下會自動壓縮js代碼
    mode: 'production',

    // 開發服務器devServer:用來自動化(自動編譯, 自動打開瀏覽器, 自動刷新瀏覽器)
    // 特點:只會在內存中編譯打包,不會有任何輸出
    // 啟動devServer指令為: npx webpack-dev-server
    devServer: {
        // 項目構建后路徑
        contentBase: resolve(__dirname, 'build'),
        // 啟動gzip壓縮
        compress: true,
        // 端口號
        port: 3000,
        // 自動打開瀏覽器
        open: true,
    },
};

三、去除webpack.config.js配置文件過多的注釋

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');

// 設置 nodejs 環境變量,決定使用‘browserslist‘的哪個環境
// process.env.NODE_ENV = 'development';

// 復用 loader
const commonCssLoader = [
    {
        loader: MiniCssExtractPlugin.loader,
        options: {
            // 這里可以指定一個 publicPath
            // 默認使用 webpackOptions.output中的publicPath
            publicPath: '../'
        },
    },
    'css-loader',
    {
        loader: 'postcss-loader',
        options: {
            ident: 'postcss',
            plugins: () => [
                require('postcss-preset-env')()
            ]

        }
    }
]
module.exports = {
    // webpack配置
    // 入口起點文件
    entry: './src/js/index.js',
    // 輸出
    output: {
        // 輸出文件名
        filename: 'js/built.js',
        // 輸出路徑
        // __dirname nodejs的變量,代表當前文件的目錄絕對路徑
        path: resolve(__dirname, 'build'),
    },
    // loader的配置
    module: {
        rules: [
            // 詳細loader配置
            //不同文件必須配置不同loader處理

            // 打包 css 文件的詳細loader配置
            {
                test: /\.css$/,
                use: [...commonCssLoader],
            },

            //打包less 文件的詳細loader配置
            {
                test: /\.less$/,
                use: [
                    ...commonCssLoader,
                    'less-loader'
                ]
            },

            /*
           語法檢查: eslint-loader eslint
           注意:只檢查自己寫的源代碼,第三方的庫是不用檢查的
           */
            {
                test: /\.(?:js|mjs|cjs)$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                /*
                1. pre 優先處理
                2. normal 正常處理（默認）
                3. inline 其次處理
                4. post 最后處理
                */
                enforce: 'pre',
                options: {
                    // 自動修復eslint的錯誤
                    fix: true,
                },
            },
            /*
                 js兼容性處理
            */
            {
                test: /\.(?:js|mjs|cjs)$/,
                // 注意:只檢查自己寫的源代碼,第三方的庫是不用檢查的,這里排除node_modules文件夾
                loader: "babel-loader",
                exclude: /node_modules/,
                options: {
                    // 預設：指示 babel 做怎么樣的兼容性處理
                    "presets": [
                        [
                            "@babel/preset-env",
                            {
                                // 按需加載
                                useBuiltIns: 'usage',
                                // 制定 core-js 版本
                                corejs: {
                                    version: 3
                                },
                                //指定兼容性做到哪個版本的瀏覽器
                                targets: {
                                    chrome: '60',
                                    firefox: '60',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]
                    ]
                }
            },
            {
                // 問題：默認處理不了 html 中的 img 圖片
                // 處理圖片資源
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    // 圖片大小小于8kb,就會被base64處理
                    limit: 8 * 1024,
                    // 解決:關閉url-loader的es6模塊化,使用commonjs解析
                    esModule: false,
                    // 給圖片進行重命名
                    // [hash:10]取圖片的hash的前10位
                    // [ext]取文件原來擴展名
                    name: '[hash:10].[ext]',
                    // 設置輸出目錄，將打包的圖片資源放到imgs文件夾
                    outputPath: './imgs',
                },
            },
            {
                test: /\.html$/,
                // 處理html文件的img圖片(負責引入img,從而能被url-loader進行處理)
                loader: 'html-loader',
                options:
                {
                    // 解決: esModule改為false
                    esModule: false,
                },
            },
            {
                // 打包其他資源(除了html/js/css資源以外的資源)
                // 排除css/is/html資源
                exclude: /\.(css|js|html|less|jpg|png|gif)$/,
                loader: 'file-loader',
                options:
                {
                    // 給資源進行重命名
                    // [hash:10]取資源的hash的前10位
                    // [ext]取文件原來擴展名
                    name: '[hash:10]. [ext]',
                    // 設置輸出目錄，將打包的其他資源放到media 文件夾
                    outputPath: './media',
                },
            },

        ],
    },
    // plugins的配置
    plugins: [

        new HtmlWebpackPlugin({
            // 復制../src/index.html'文件,并自動引入打包輸出的所有資源(JS/CS5)
            template: './src/index.html',
            //壓縮 html 代碼
            minify: {
                //移除空格
                collapseWhitespace: true,
                //移除注釋
                removeComments: true
            }
        }),
        new MiniCssExtractPlugin({
            //對輸出的css文件進行重命名，這里單獨為生成的 css 創建一個 css 文件夾。
            filename: './css/[name].css',
            chunkFilename: "./css/[id].css",
            ignoreOrder: false,
            linkType: "text/css",
        }),
        // 壓縮 css
        new OptimizeCssAssetsWebpackPlugin(),
    ],
    // 模式  development  開發環境，production 生產環境
    // mode: 'development',
    // 生產環境下會自動壓縮js代碼
    mode: 'production',

    // 開發服務器devServer:用來自動化(自動編譯, 自動打開瀏覽器, 自動刷新瀏覽器)
    // 啟動devServer指令為: npx webpack-dev-server
    devServer: {
        // 項目構建后路徑
        contentBase: resolve(__dirname, 'build'),
        // 啟動gzip壓縮
        compress: true,
        // 端口號
        port: 3000,
        // 自動打開瀏覽器
        open: true,
    },
};

四、package.json 文件

{
  "name": "notes_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "eword <eword@eword.name> (http://www.eword.name/)",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "babel-loader": "^8.3.0",
    "core-js": "^3.32.1",
    "css-loader": "^3.4.2",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.28.1",
    "file-loader": "^5.0.2",
    "find-cache-dir": "^5.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^4.5.2",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^1.1.3",
    "uninstall": "0.0.0",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 9-12"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "eslintConfig": {
    "extends": "airbnb-base"
  }
}

五、工程目錄

.
├── build
│   ├── css
│   │   ├── 1.css
│   │   └── 2.css
│   ├── imgs
│   │   ├── 32de6ca13b.jpg
│   │   ├── 5e7e5c80c7.jpg
│   │   └── ae7bf15c0d.jpg
│   ├── index.html
│   ├── js
│   │   ├── 1.built.js
│   │   ├── 2.built.js
│   │   └── built.js
│   └── media
│       └── cffec944b5. ttf
├── src
│   ├── css
│   │   ├── iconfont.css
│   │   └── index.less
│   ├── imgs
│   │   ├── img.jpg
│   │   ├── img1.jpg
│   │   ├── img2.jpg
│   │   └── img3.jpg
│   ├── index.html
│   ├── js
│   │   ├── iconfont.js
│   │   └── index.js
│   └── media
│       ├── iconfont.json
│       └── iconfont.ttf
└── webpack.config.js