webpack4詳細(xì)教程，從無到有搭建react腳手架（一）

zhkai 發(fā)布于2019-08-23 18:35 / 1105人閱讀

摘要：是一個(gè)現(xiàn)代應(yīng)用程序的靜態(tài)模塊打包器，前端模塊化的基礎(chǔ)。作為一個(gè)前端工程師切圖仔，非常有必要學(xué)習(xí)。官網(wǎng)的文檔非常的棒，中文文檔也非常給力，可以媲美的文檔。建議先看概念篇章，再看指南，然后看和配置總覽。

webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器，前端模塊化的基礎(chǔ)。作為一個(gè)前端工程師（切圖仔），非常有必要學(xué)習(xí)。

webpack官網(wǎng)的文檔非常的棒，中文文檔也非常給力，可以媲美vue的文檔。建議先看概念篇章，再看指南，然后看API和配置總覽。看完指南教程后，需要自主動(dòng)手練習(xí)才能更加有影響，這里記錄下我搭建react開發(fā)環(huán)境的過程

準(zhǔn)備工作 安裝webpack

yarn add webpack webpack-cli -D

創(chuàng)建配置目錄結(jié)構(gòu)

config
    webpack.common.js
    webpack.dev.js
    webpack.prod.js

scripts
    build.js  // 構(gòu)建模式腳本
    start.js  // 開發(fā)模式腳本

src
    index.js

package.json

先嘗試一個(gè)簡單配置 配置啟動(dòng)腳本命令

package.json

...
"license": "MIT",
+ "scripts": {
+     "start": "node ./scripts/start.js",
+     "build": "node ./scripts/build.js"
+ },
"devDependencies": {
    "webpack": "^4.35.2",
    "webpack-cli": "^3.3.5"
}
...

編寫webpack配置, 以 src/index.js 作為主入口，以 build為打包后的目錄

config/webpack.common.js

output path字段這里配置的絕對路徑

        const path = require("path");

        module.exports = {
            entry: "./src/index.js",
            output: {
                path: path.resolve(__dirname, "../build"),
                filename: "bundle.js"
            }
        }

編寫開發(fā)模式運(yùn)行腳本

scripts/build.js

        const webpack = require("webpack");
        const webpackConfig = require("../config/webpack.common.js");

        webpack(webpackConfig, (err, stats) => {
            if(err || stats.hasErrors()){
                console.log("編譯失敗");
            }
        });

webpack node接口文檔： https://www.webpackjs.com/api...

在入口編寫一點(diǎn)內(nèi)容

src/index.js

    
    console.log("hello")

執(zhí)行 yarn build 命令，生成打包目錄

運(yùn)行生成的 `bundle.js`

配置開發(fā)服務(wù)器 - webpack-dev-server 安裝dev服務(wù)器和合并配置工具

    yarn add webpack-dev-server webpack-merge -D

改寫webpack配置文件, common文件導(dǎo)出一個(gè)可傳參數(shù)的基本配置生成器, prod和dev文件使用webpack-merge將通用配置和各自模式下的配置進(jìn)行合并導(dǎo)出

config/webpack.common.js

        
        const path = require("path");

        function webpackCommonConfigCreator(options){
            /**
            * options: 
            *      mode // 開發(fā)模式
            */

            return {
                mode: options.mode,
                entry: "./src/index.js",
                output: {
                    filename: "bundle.js",
                    path: path.resolve(__dirname, "../build"),
                }
            }
        }

        module.exports = webpackCommonConfigCreator;

config/webpack.prod.js

        const webpackConfigCreator = require("./webpack.common");
        const merge = require("webpack-merge");

        const config = {

        }

        const options = {
            mode: "production"
        }

        module.exports = merge(webpackConfigCreator(options), config);

config/webpack.dev.js

        const webpackConfigCreator = require("./webpack.common");
        const merge = require("webpack-merge");

        const config = {

        }

        const options = {
            mode: "development"
        }

        module.exports = merge(webpackConfigCreator(options), config);

script/build.js

        const webpack = require("webpack");
        const webpackConfig = require("../config/webpack.prod.js");

        webpack(webpackConfig, (err, stats) => {
            if(err || stats.hasErrors()){
                console.log("編譯失敗");
            }
        });

yarn build 打包，輸出正常

配置 webpack-dev-server

config/webpack.dev.js

這里的contentBase選項(xiàng)是server模式下的output，開啟server后，webpack會實(shí)時(shí)編譯代碼到內(nèi)存

        ...
        + const path = require("path");

        const config = {
            + devServer: {
            +     contentBase: path.join(__dirname, "../dist")
            + }
        }
        ...

scripts/start.js

        const webpack = require("webpack");
        const webpackDevServer = require("webpack-dev-server");
        const webpackConfig = require("../config/webpack.dev.js");

        const compiler = webpack(webpackConfig);
        const options = Object.assign({}, webpackConfig.devServer, {
            open: true
        })
        const server = new webpackDevServer(compiler, options);

        server.listen(3000, "127.0.0.1", () => {
            console.log("Starting server on http://localhost:8080");
        })

運(yùn)行命令 yarn start, 瀏覽器自動(dòng)彈出窗口，訪問 localhost:3000/bundle.js

相關(guān)鏈接

webpack4詳細(xì)教程，從無到有搭建react腳手架（二）

webpack4詳細(xì)教程，從無到有搭建react腳手架（三）

webpack4詳細(xì)教程，從無到有搭建react腳手架（四）

源碼github倉庫： https://github.com/tanf1995/W...

GPU云服務(wù)器云服務(wù)器家用云服務(wù)器搭建詳細(xì)教程阿里云服務(wù)器搭建終端詳細(xì)教程阿里云服務(wù)器搭建app詳細(xì)教程 webpack4教程

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105479.html

發(fā)表評論

登陸后可評論

0條評論

zhkai

男|高級講師

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

TA的文章

tensorflow安裝包下載

閱讀 3590·2023-04-25 20:41
tensorflow版本怎么看

閱讀 2676·2023-04-25 16:40
Megalayer：美國CN2線路VPS年付159元,香港VPS年付199元起

閱讀 1446·2021-09-23 11:44
暫無補(bǔ)丁!新的0-Day通過濫用MS Office文檔主動(dòng)攻擊Windows

閱讀 1265·2021-09-10 10:51
【建議收藏】兩萬字深度解讀指針，學(xué)好指針看這一篇文章就夠了

閱讀 1695·2021-09-07 09:59
UCloud新版UFile對象存儲上線：ZB 時(shí)代的量販?zhǔn)綄ο蟠鎯?/a>

閱讀 1681·2019-12-27 12:08

每日一練:用css畫一個(gè)棒棒糖

閱讀 574·2019-08-30 15:44
CSS Injection

閱讀 3346·2019-08-30 11:08

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

webpack4詳細(xì)教程，從無到有搭建react腳手架（一）

相關(guān)文章

webpack4詳細(xì)教程，從無到有搭建react腳手架（二）

webpack4詳細(xì)教程，從無到有搭建react腳手架（四）

webpack4詳細(xì)教程，從無到有搭建react腳手架（三）

學(xué)習(xí)從零開始搭建React腳手架

**如何搭建一個(gè)基于react、webpack4、babel7的項(xiàng)目（一）**

發(fā)表評論

0條評論

zhkai

男|高級講師

TA的文章

tensorflow安裝包下載

tensorflow版本怎么看

Megalayer：美國CN2線路VPS年付159元,香港VPS年付199元起

暫無補(bǔ)丁!新的0-Day通過濫用MS Office文檔主動(dòng)攻擊Windows

【建議收藏】兩萬字深度解讀指針，學(xué)好指針看這一篇文章就夠了

UCloud新版UFile對象存儲上線：ZB 時(shí)代的量販?zhǔn)綄ο蟠鎯?/a>

每日一練:用css畫一個(gè)棒棒糖

CSS Injection

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

webpack4詳細(xì)教程，從無到有搭建react腳手架（一）

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

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