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

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

咱們要作的操做就是

一、掃描src目錄下，取得index other other...這些目錄名，而後把目錄名做爲輸入的HtmlWebpackPlugin生成html的文件名，而且引用對應的js

二、設置入口的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