webpack開發(fā)環(huán)境配置

FuisonDesign 發(fā)布于2019-08-23 18:14 / 1365人閱讀

摘要：本次的重點(diǎn)主要集中在開發(fā)環(huán)境上，生產(chǎn)環(huán)境則是使用的默認(rèn)模式。開發(fā)環(huán)境開發(fā)環(huán)境沒什么好說的了，簡單易配置，官網(wǎng)很詳細(xì)。

日常吐槽

經(jīng)過不斷的調(diào)整和測試，關(guān)于 react 的 webpack 配置終于新鮮出爐。本次的重點(diǎn)主要集中在開發(fā)環(huán)境上，生產(chǎn)環(huán)境則是使用 webpack 的 production 默認(rèn)模式。

本次配置主要有：

eslint+prettier;

optimization.splitChunks;

happypack;

DllReferencePlugin & DllPlugin;

...

文檔的重要性

講真，對于初次接觸 webpack 的同學(xué)，怕的可能不是 webpack 的配置，而是長長的 package.json。依賴那么多，你怎么就知道需要哪些依賴呢。不開玩笑，我還真知道。
webpack 的依賴主要是一些 loader 和 plugins。我們知道單頁面引用被打包后，原有的結(jié)構(gòu)基本上不復(fù)存在了。而之前引用的圖片或字體資源還按照之前的路徑查找，肯定是找不到的。那么我們就需要轉(zhuǎn)換工具（順便轉(zhuǎn)換資源）—— url-loader|file-loader。
大多數(shù)人寫樣式時，喜歡使用 css、less、sass。這時也會有對應(yīng)的工具 style-loader, css-loader, less-loader。
想要使用 JavaScript 新特性或處理兼容性，就用 babel-loader。以上這些基本上可以應(yīng)付一些簡單的項目?？蓪嶋H上呢？

我信你個鬼，你這個糟老頭壞的很！

看文檔啊，看官方介紹啊。本次也是通過看 babel 文檔，和一些依賴文檔來配置 webpack 的，全程無壓力，而且很正宗。所以，文檔很重要。

eslint+prettier

如果時團(tuán)隊合作，代碼規(guī)范是很重要的?？梢酝ㄟ^ eslint+prettier 規(guī)范。這兩個工具各有側(cè)重點(diǎn)，不過官網(wǎng)也提供了兩者結(jié)合的方案。詳細(xì)介紹見官網(wǎng)。我個人不習(xí)慣創(chuàng)建太多的配置文件，所以都放在了 package.json 文件中。

//  webpack.common.js
{
    enforce: "pre",
    test: /.m?jsx?$/,
    exclude: /node_modules/,
    loader: "eslint-loader",
    options: {
        fix: true,
        cache: true,
        formatter: require("eslint-friendly-formatter"),
    }
},

"eslintConfig": {
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "extends": [
        "plugin:prettier/recommended"
    ]
},
"prettier": {
    "singleQuote": true,
    "semi": true
},

開發(fā)環(huán)境

開發(fā)環(huán)境沒什么好說的了，簡單易配置，官網(wǎng)很詳細(xì)。

// webpack.dev.js

plugins: {
    //...
    new webpack.HotModuleReplacementPlugin()
},
devtool: "eval-source-map",
devServer: {
contentBase: path.resolve(__dirname, "..", "dist"),
port: APP_CONFIG.port,
hot: true,
open: true
}

// index.js
// 入口處要配置這些，別忘了。
// 因為有冒泡的機(jī)制，所以在頂端加一個就好。
if (module.hot) {
  module.hot.accept("./views/login/index.js", () => {
    render(App) // 渲染應(yīng)用
  })
}

optimization.splitChunks

這個配置是用來分割包的。在性能優(yōu)化上，請求數(shù)和請求包的大小也是很重要的優(yōu)化點(diǎn)。請求數(shù)量和請求數(shù)據(jù)大小要控制在合理的范圍內(nèi)。
不過通常情況下，我們會將包分割為內(nèi)容不變的部分和內(nèi)容變化的部分。這不僅僅是為了將大的包分割成更小的包，也是為了能夠充分利用緩存機(jī)制。

// webpack.common.js
runtimeChunk: "single",
    splitChunks: {
        cacheGroups: {
        verdor: {
            test: /[/]node_modules[/]/,
            name: "verdors",
            chunks: "all",
            priority: -10,
        },
        common: {
            name: "common",
            chunks: "all",
            minChunks: 2,
            priority: -20,
        }
    }
}

happypack

轉(zhuǎn)換文件算是打包過程中比較耗時的事情，通過 happypack 可以將這件事分?jǐn)偨o多個 node 進(jìn)程，這樣就會大大縮短了打包時間（同理，可以考慮使用 thread-loader）。不過進(jìn)程之間的通信是要開銷的，這是一個優(yōu)化方向，要不要采用，還需要酌情考慮。

// loader
{
    test: /.m?jsx?$/,
    exclude: /node_modules/,
    use: "happypack/loader?id=js",
}
// plugins
new HappyPack({
    id: "js",
    threadPool: happyThreadPool,
    loaders: [{
    loader: "babel-loader",
    options: {
        cacheDirectory: true,
        presets: [["@babel/preset-env", {
        "useBuiltIns": "usage",
        "corejs": 3
        }], "@babel/preset-react"],
        plugins: ["@babel/transform-runtime",
        "@babel/plugin-proposal-class-properties", [
            "import",
            {
            "libraryName": "antd",
            "style": true
            }
        ]
        ]
    }
    }]
})

不喜歡多帶帶的 babel 文件，所以 babel 的配置都在這里了。其實，關(guān)于 babel 要配置的內(nèi)容還是挺多的。不過不要怕，babel 的官方文檔有詳細(xì)說明。

DllReferencePlugin & DllPlugin

之前也提到過，通常我們會使用 optimization.splitChunks 來處理第三方庫，將其分割成不變的部分。可是，每次打包的時候都需要重復(fù)這一步驟。
這時候我們就想啊，不變的部分打包一次不就可以了么，之后就只打包那些經(jīng)常變化的部分，這樣不就能提高效率了么？是的， DllReferencePlugin & DllPlugin 基本上要做的就是這么一回事。所以，我們會針對這兩部分做不同的配置。

// webpack.dll.js
new webpack.DllPlugin({
    context: process.cwd(),
    path: path.join(__dirname, "..", "dist", "dll", "[name]-manifest.json"),
    name: "[name]_[hash]"
})
// webpack.common.js
new webpack.DllReferencePlugin({
    context: process.cwd(), 
    manifest: require(path.resolve(__dirname, "..", "dist", "dll", "vendor-manifest.json"))
}),

multi-spa-webpack-cli使用說明

multi-spa-webpack-cli 已經(jīng)發(fā)布到 npm，只要在 node 環(huán)境下安裝即可。一路按 Enter，全部源碼都在里面?。?！

npm install multi-spa-webpack-cli -g

使用步驟如下:

# 1. 初始化項目
multi-spa-webpack-cli init spa-project

# 2. 進(jìn)入文件目錄
cd spa-project

# 3. 安裝依賴
npm install

# 4. 打包不變的部分
npm run build:dll

# 5. 啟動項目（手動打開瀏覽器：localhost:8090）
npm start

webpack 系列：

淺嘗 webpack

手寫webpack腳手架的cli工具

webpack開發(fā)環(huán)境配置

GPU云服務(wù)器云服務(wù)器開發(fā)環(huán)境配置 python開發(fā)環(huán)境配置 app開發(fā)環(huán)境配置 php開發(fā)環(huán)境配置

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104898.html

發(fā)表評論

登陸后可評論

0條評論

FuisonDesign

男|高級講師

我要關(guān)注我要私信

TA的文章

Akkocloud，圣何塞CN2 GIA季度特惠套餐，99元/月，1核/512M內(nèi)存/10gSSD/

閱讀 2523·2021-11-15 18:14
前端開發(fā)工具集

閱讀 1738·2021-10-14 09:42
智能水表是怎樣遠(yuǎn)程監(jiān)控的？

閱讀 3790·2021-10-11 10:58
java程序員的c語言學(xué)習(xí)筆記，一文快速了解

閱讀 3981·2021-10-09 09:44
獨(dú)立開發(fā)變現(xiàn)周刊（第 21 期）：辭職后做了3個產(chǎn)品，終于不用回去上班了

閱讀 2443·2021-09-26 09:55
lisahost：新的全解鎖美國原生IP VPS;206段上架開售,美國CN2?GIA,支持tikt

閱讀 2475·2021-09-24 10:38
iON Cloud九月促銷：美國洛杉磯/聖何塞雲(yún)服務(wù)器，$120/年/2G內(nèi)存/2核/60G [em

閱讀 2058·2021-09-04 16:48
為了7K ，離開網(wǎng)易，值得嗎....

閱讀 3293·2021-09-02 15:21

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

webpack開發(fā)環(huán)境配置

相關(guān)文章

webpack多頁應(yīng)用架構(gòu)系列（七）：開發(fā)環(huán)境、生產(chǎn)環(huán)境傻傻分不清楚？

webpack配置學(xué)習(xí)二-開發(fā)環(huán)境和打包環(huán)境執(zhí)行不同打包

webpack 項目構(gòu)建：（三）開發(fā)環(huán)境——本地服務(wù)器搭建

***webpack4系列教程（九）：開發(fā)環(huán)境和生產(chǎn)環(huán)境***

**基于webpack的前后端分離開發(fā)環(huán)境實戰(zhàn)**

**為什么我們要做三份 Webpack 配置文件**

發(fā)表評論

0條評論

FuisonDesign

男|高級講師

TA的文章

Akkocloud，圣何塞CN2 GIA季度特惠套餐，99元/月，1核/512M內(nèi)存/10gSSD/

前端開發(fā)工具集

智能水表是怎樣遠(yuǎn)程監(jiān)控的？

java程序員的c語言學(xué)習(xí)筆記，一文快速了解

獨(dú)立開發(fā)變現(xiàn)周刊（第 21 期）：辭職后做了3個產(chǎn)品，終于不用回去上班了

lisahost：新的全解鎖美國原生IP VPS;206段上架開售,美國CN2?GIA,支持tikt

iON Cloud九月促銷：美國洛杉磯/聖何塞雲(yún)服務(wù)器，$120/年/2G內(nèi)存/2核/60G [em

為了7K ，離開網(wǎng)易，值得嗎....

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

webpack開發(fā)環(huán)境配置

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！