一個簡單易用的webpack4多頁面腳手架配置加學習

flytam發表於2018-04-13
Web

wepack4搭建多頁面腳手架學習

本文程式碼地址在github

前言：以前剛接觸webpack的時候還是1，當時大概過了下文件操作了一下當時寫的一些註釋。後來開發的時候基本寫react都是用的create-react-app或者找別人的搭好的腳手架用。所以趁著這段時間的間隙加上webpack4剛出也不算久，重新學習加複習下webpack的一些知識。

幾個小tips:

  • extract-text-webpack-plugin必須4+版本才可以在webpack4中用
  • webpack4中提供mode引數後，process.env.NODE_ENV的值為production或development

該配置目前進度：基本可用開發小型多頁面。詳細可見github，歡迎大佬們提供issue或施捨個star2333

使用

yarn
yarn dev // 開發模式 8000埠
yarn build // 構建
複製程式碼

babel

babel的強大性不多說了。我們寫前端最重要的就是裝x。使用各種高大上的ES6789語法來寫js，但是瀏覽器不相容就需要babel來進行轉碼了。

  • babel是不轉換新的關鍵字那些語法。需要通過yarn add babel-plugin-transform-runtime --dev和yarn add babel-runtime --save。再.babelrc中配置。參考

css樣式抽離和熱更新

引入normalize.css消除瀏覽器差異

一般都是使用extract-text-webpack-plugin來實現css樣式抽離，但是抽離的樣式是不支援熱更新的，webpack預設只支援內聯樣式的熱更新。在webpack4的文件中，官方也推薦我們使用mini-css-extract-plugin代替extract-text-webpack-plugin，並且該plugin配合css-hot-loader可以實現樣式抽離和熱重新整理的。所以我們專案採用了用mini-css-extract-plugin+css-hot-loader的方式。

{
            test: /\.css$/,
            use: [
                'css-hot-loader', //支援熱更新
                MiniCssExtractPlugin.loader,
                "css-loader"
            ]
        }
複製程式碼

postcss

postcss 是一個css後處理工具，能讓我們提前使用下一代css語法，幫我們根據配置的目標瀏覽器編譯出瀏覽器能用的css程式碼 todo

css_module

寫react比較常用的 todo

新增類似模板那樣的頭部、尾部、身部頁面拼裝

todo

根據src目錄下的目錄結構自動生成html模板和配置webpack的入口檔案

這樣就不需要手動去設定entry和Pugin中手動生成html了 我們約定了目錄結構如下

  • src\
    • index\ index頁面
      • index.js 入口js檔案
      • index.html
      • index.css
    • other\
      • index.js
      • index.html
      • index.css
    • other2\
      • index.js
      • index.html
      • index.css

我們要做的操作就是

1、掃描src目錄下，取得index other other...這些目錄名，然後把目錄名作為輸入的HtmlWebpackPlugin生成html的檔名，並且引用對應的js

2、設定入口的entry引數

function buildEntriesAndHTML() {
    // 用來構建entery
    const result = glob.sync("src/**/*.js");
    const config = {
        hash: true,
        inject: true
    }
    const entries = {};
    const htmls = [];
    result.forEach(item => {
        const one = path.parse(item);
        entries[one.dir.split("/").slice(-1)[0]] = "./" + item;
        htmls.push(new HtmlWebpackPlugin({
            ...config,
            template: "./" + one.dir + "/index.html",
            chunks: [item]
        }));
    })
    return {
        entries,
        htmls
    }
}
複製程式碼

html熱更新（應該說是重新整理）

jq多頁面應用肯定是要在頁面裡面寫一堆html的，預設情況下webpack server html是不會熱更新，html-webpack-plugin是不會觸發HMR的。 通過raw-loader外掛，開發模式下在每個頁面的入口把頁面的htmlrequire進去即可,這樣就能實現熱重新整理了23333

if (process.env.NODE_ENV === "development") {
    require("./index.html");
}
複製程式碼

這樣每個檔案引入似乎很傻。應該讓工具自動化操作，應該要寫個loader在指定檔案開頭注入上面那段程式碼，然後再給babel處理。根目錄下自己寫了個inject-loader。loader的原理其實就是接受上次的處理結果，把返回值傳給下個loader使用。我們在js檔案babel處理前使用該loader即可

{
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: [{
        loader: 'babel-loader',
        options: {
            cacheDirectory: true // 使用快取
        }
    }, {
        loader: path.resolve("./inject-loader.js") // 開發模式使用注入程式碼實現html熱更新
    }]
}
//inject-loader.js
const path = require("path");
module.exports = function(source) {
    if (path.basename(this.resourcePath) === "index.js") {
        // 我們約定好只有index.js才會注入注入載入程式碼
        return `if (process.env.NODE_ENV === "development") {
        require("./index.html");
    };` + source;
    }
    return source
}
複製程式碼

這樣一個簡單的loader就完成了2333，實現了自動化注入html熱重新整理程式碼

開發環境和生產環境兩份配置

webpack -config ./webpack.xxx.js
複製程式碼

webpack.base.config.js 公用配置 webpack.dev.config.js 開發環境配置 webpack.prod.config.js 生產環境配置

附：webpack4一些遷移指南

本人水平有限，有不足敬請大佬指出。 只作為一個學習專案。一些快取優化和分包載入方面的內容尚未考慮。todo

相關文章