webpack4.0 多頁面腳手架

時間 2019-12-08

標籤 webpack4.0 webpack 頁面腳手架简体版

原文原文鏈接

webpack4.0 爬坑記

爬了很久的webpack，第一次上手時，就已是webpack4了，最近又從新來熟悉了一波，javascript

仔細一看，webpack4真的是一個跨時代的做品，對比webpack3有了一個質的飛躍。css

新的公共代碼抽離工具（optimization.SplitChunksPlugin），提取重用代碼，減小打包文件。代替了commonchunkplugin。(不得不說我在這裏踩了很大的一個坑，由於是首次學習webpack，對webpack3不清楚，結果就是學習webpack4的過程當中)
使用HappyPack進行javascript的多進程打包操做。提高打包速度，並增長打包時間顯示。
webpack4多了幾項配置項：mode，optimization。webpack4必須指定是生產環境仍是開發環境，否則會報warning
建立一個weboack.dll.config.js文件打包到類庫dll中，使得開發過程當中不會重複進行打包。能夠大大縮減開發環境打包時間。

npm i purify-css purifycss-webpack -D // 用於css的tree-shaking
npm i webpack-parallel-uglify-plugin -D // 用於js的tree-shaking
npm i happypack@next -D //用於多進程打包js
npm i progress-bar-webpack-plugin -D //用於顯示打包時間和進程
npm i webpack-merge -D //優化配置代碼的工具
npm i optimize-css-assets-webpack-plugin -D //壓縮CSS
npm i chalk -D
npm install css-hot-loader -D // css熱更新
npm i mini-css-extract-plugin -D // 代替了以前的ExtractTextWebapckPlugin css代碼分離
npm i cross-env -D // 各個系統環境變量能夠進行統一設置
複製代碼

如下是一些基礎配置html

<!--複製靜態資源文件-->
    new CopyWebpackPlugin([
        {
            from: path.resolve(__dirname, '../static'),
            to: path.resolve(__dirname, '../dist/static'),
            ignore: ['.*']
        }
    ]),
    <!--分離js中的css，以link標籤插入-->
    new MiniCssExtractPlugin({
        filename: "static/css/[name].css",
        chunkFilename: "[name].css"
    }),
    <!--多線程打包-->
    new HappyPack({ //開啓多線程打包
        id: 'happy-babel-js',
        loaders: ['babel-loader?cacheDirectory=true'],
        threadPool: happyThreadPool
    }),
    <!--打包時間顯示-->
    new ProgressBarPlugin({
        format: 'build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)'
    })
複製代碼

其實我以爲webpack4已經有了時間顯示了，在命令行加一個--progress，就能顯示加載進度。許多配置只須要加一個命令就能夠了前端

postcss-loader，在這裏我有必要說一下這個，真的是一個很好的一個工具，能夠省卻不少css的書寫。autoprefixer這是postcss-loader的一個插件。打包的時候能自動幫你加瀏覽器前綴。我以爲是很好用的。方便了許多java

在根目錄下創建一個postcss.config.js的配置文件node

module.exports = {
  plugins: [
    require("autoprefixer")
  ]
  // "plugins": {
  // // "postcss-import": {},
  // // "postcss-url": {},
  // // to edit target browsers: use "browserslist" field in package.json
  // "autoprefixer": {}
  // }
}

複製代碼

在css配置中,須要注意一點就是loader是從右往左加載，因此先加載的要放在右邊。順序要注意webpack

{
        test: /\.css$/,
        use: [
            'css-hot-loader',
            MiniCssExtractPlugin.loader,
            "css-loader",
            {
                loader: "postcss-loader",
                options: {
                    config: {
                        path: 'path/to/postcss.config.js'
                    }
                }
            }
        ],
        include: [resolve('src')], //限制範圍，提升打包速度
        exclude: /node_modules/
    }
複製代碼

splitChunks,這是webpack新增的一個api

optimization: {
        // minimizer: true,
        splitChunks: {
            cacheGroups: {
                commons: {
                    chunks: "initial",
                    name: "common",
                    minChunks: 2,
                    maxInitialRequests: 5, // The default limit is too small to showcase the effect
                    minSize: 0 // This is example is too small to create commons chunks
                }
            }
        }
    }
複製代碼

最後談一下多頁面吧！

其實多頁面無非就是動態加載入口，動態加載HtmlWebpackPlugin這個插件生成html模板文件git

const glob = require('glob'); //動態匹配文件路徑
let lists = []
let HtmlPluginLists = []

function getList(path) {
    var list = glob.sync(path);
    list.forEach((item, index) => {
        var name = item.split('/')[4].split('.')[0]
        lists[index] = {}
        lists[index].name = name;
        lists[index].src = item.split('.html')[0]
    })
}
function entryList(path) {
    getList(path);
    lists.forEach((item, index) => {
        HtmlPluginLists[index] = new HtmlWebpackPlugin({
            filename: item.name + '.html',
            template: item.src + '.html',
            chunks: [item.name, "common"],
            vendor: './vendor.dll.js',
            inject: true,
            hash: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            }
        })
    })
    return HtmlPluginLists
}

entryList('./src/view/**/*.html')。 這裏是我須要匹配的地方。
複製代碼