一個webpack單頁面應用的配置

主文件webpack.config.js

/**做用域分析treeshaking */
const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin').default;

const path = require('path');
const glob = require('glob');
/*CSS 樣式表處理部分的插件 */
// CSS TreeShaking
const PurifyCSSPlugin = require('purifycss-webpack');
//提取css
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// HTML 插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

/**生產 / 開發 環境區分 */
const merge = require("webpack-merge");
//merge() 函數用於合併兩個對象或者數組內容到第一個數組。
const argv = require('yargs-parser')(process.argv.slice(2));
//{ _: [], mode: 'production' } 獲取全局變量的狀態
//沒有的話就是開發環境
const _mode = argv.mode || "development";
const _modeFlag = (_mode || "production" ? true : false);
// 引入分支文件中寫的內容
const _mergeConfig = require(`./webpack-config/webpack.${_mode}.js`)


//  清空dist文件夾的插件
const CleanWebpackPlugin = require('clean-webpack-plugin');

const webpackConfig = {
    devServer: {
        port: 3000,
        open: true,
        hot: true,//熱更新
        before(app) { // 自帶默認express的socket
            // 打開http://localhost:3000/api/test ： {"code":200,"message":"JsonPlaceHolder"}
            app.get("/api/test", (req, res) => { //假接口
                res.json({
                    code: 200,
                    message: "JsonPlaceHolder"
                })
            })
        }
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    chunks: "initial",
                    name: 'common',
                    minChunks: 1, //最少引用數
                    maxInitialRequests: 5, // 最多引用數 
                    minSize: 0
                }
            }
        },
        runtimeChunk: {
            name: "runtime"
        }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    // {
                    //     loader: 'style-loader'
                    // },
                    {
                        loader: 'css-loader'
                        // loader: 'css-loader?modules' //css模塊化解析
                        // loader: 'css-loader?modules&localIdentName=[name]_[local]-[hash:base64:5]' //css模塊化解析 index_test-q7KCi
                    }]
            }
        ]
    },
    plugins: [
        new WebpackDeepScopeAnalysisPlugin(),


        new MiniCssExtractPlugin({
            // filename 同步引入css命名
            // chunkFilename 一部引入的css命名 魔法註釋引入 style0.[hash：5].css
            filename: _modeFlag ? 'style/[name].[hash:5].css' : 'style/[name].css',
            chunkFilename: _modeFlag ? 'style/style[id].[hash：5].css' : 'style/style[id].css',
        }),

        new HtmlWebpackPlugin({
            filename: 'index.html', // 輸出後的文件名
            template: 'src/index.html' // 輸出前的源文件
        }),
        // new PurifyCSSPlugin({ 
        //     //腳本中加入的css選擇器不會被加入到裏面，會被抖動掉，正則匹配
        //     // 生成後的HTML文件的絕對路徑
        //     paths: glob.sync(path.join(__dirname, '/dist/*.html')),
        // }),
        new CleanWebpackPlugin(),
    ],
}

//分支文件和主文件合併分支
module.exports = merge(_mergeConfig, webpackConfig);
複製代碼

分支文件

• 生產模式

module.exports = {
    output: {
        filename: 'scripts/[name].[hash:5].bundle.js',
        publicPath: '/'
    }
}
複製代碼

• 開發模式

module.exports = {
    output: {
        filename: 'scripts/[name].bundle.js',
        publicPath: '/'
    }
}
複製代碼

• package.json 文件

{
  "name": "spa",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "dev:server": "webpack-dev-server --mode development",
    "prod": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^2.0.2",
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.7.0",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.1.3",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-deep-scope-plugin": "^1.6.0",
    "webpack-dev-server": "^3.4.1",
    "webpack-merge": "^4.2.1",
    "yargs-parser": "^13.1.0"
  },
  "dependencies": {
    "lodash-es": "^4.17.11",
    "mini-css-extract-plugin": "^0.7.0"
  }
}
複製代碼