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

zhkai 發布于2019-08-23 18:35 / 1096人閱讀

摘要：是一個現代應用程序的靜態模塊打包器，前端模塊化的基礎。作為一個前端工程師切圖仔，非常有必要學習。官網的文檔非常的棒，中文文檔也非常給力，可以媲美的文檔。建議先看概念篇章，再看指南，然后看和配置總覽。

webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器，前端模塊化的基礎。作為一個前端工程師（切圖仔），非常有必要學習。

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

準備工作 安裝webpack

yarn add webpack webpack-cli -D

創建配置目錄結構

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

scripts
    build.js  // 構建模式腳本
    start.js  // 開發模式腳本

src
    index.js

package.json

先嘗試一個簡單配置 配置啟動腳本命令

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"
            }
        }

編寫開發模式運行腳本

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...

在入口編寫一點內容

src/index.js

    
    console.log("hello")

執行 yarn build 命令，生成打包目錄

運行生成的 `bundle.js`

配置開發服務器 - webpack-dev-server 安裝dev服務器和合并配置工具

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

改寫webpack配置文件, common文件導出一個可傳參數的基本配置生成器, prod和dev文件使用webpack-merge將通用配置和各自模式下的配置進行合并導出

config/webpack.common.js

        
        const path = require("path");

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

            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選項是server模式下的output，開啟server后，webpack會實時編譯代碼到內存

        ...
        + 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");
        })

運行命令 yarn start, 瀏覽器自動彈出窗口，訪問 localhost:3000/bundle.js

相關鏈接

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

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

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

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

云服務器 GPU云服務器家用云服務器搭建詳細教程阿里云服務器搭建終端詳細教程阿里云服務器搭建app詳細教程 webpack4教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105479.html

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

摘要：相關鏈接詳細教程，從無到有搭建腳手架一配置插件，這兩個插件基本上是必配的了介紹每次打包時清理上次打包生成的目錄官網指南關于這個插件部分內容已經過時沒有更新，按照官網配置會出錯，所以參考上這個插件文檔來配置，文檔地址生成打相關鏈接 webpack4詳細教程，從無到有搭建react腳手架（一）配置插件 clean-webpack-plugin、 html-webpack-plugin...

cuieney 2019-08-23 18:35 評論0 收藏0
webpack4詳細教程，從無到有搭建react腳手架（四）

摘要：相關鏈接詳細教程，從無到有搭建腳手架一詳細教程，從無到有搭建腳手架二詳細教程，從無到有搭建腳手架三管理打包后目錄結構打包結構如下修改配置通過相對目錄對資源命名前加上目錄名，效果后面的步驟在這里需要安裝一個大型的包，以為例安裝為第三相關鏈接 webpack4詳細教程，從無到有搭建react腳手架（一） webpack4詳細教程，從無到有搭建react腳手架（二） webpack4詳細...

chnmagnus 2019-08-23 18:35 評論0 收藏0
webpack4詳細教程，從無到有搭建react腳手架（三）

摘要：相關鏈接詳細教程，從無到有搭建腳手架一詳細教程，從無到有搭建腳手架二安裝配置創建，效果安裝配置創建效果配置模式修改配置現在編譯后的由動態內聯在中，需要分離到單獨的文件安裝插相關鏈接 webpack4詳細教程，從無到有搭建react腳手架（一） webpack4詳細教程，從無到有搭建react腳手架（二） Css 安裝loader yarn add style-loader css...

Sunxb 2019-08-23 18:35 評論0 收藏0
學習從零開始搭建React腳手架

摘要：寫在前面準備學習一下和相關的東西，官方的腳手架看起來太繁瑣，所以打算自己來搭建一個，參考了這個文檔從零搭建全家桶框架教程步驟上都差不多第一步，依賴總覽完成到我現在半成品的過程中，目前完成開發模式的相關操作，添加了按需加載的地步。寫在前面準備學習一下react和webpack相關的東西，官方的腳手架看起來太繁瑣，所以打算自己來搭建一個，參考了這個文檔從零搭建React全家桶框架教程;...

cod7ce 2019-08-23 11:25 評論0 收藏0
如何搭建一個基于react、webpack4、babel7的項目（一）

摘要：對的工作流程有點模糊，以及據官方文檔稱的升級，性能得到了極大的提升，而還是用的，于是決定從頭開始搭建一個適合團隊的腳手架。保證各文件獲得一致的文件編碼和縮進效果。這些在后面文章中，都會一個個涉及到，此處不做詳細展開。前言寫前端項目這么久了，以前用的 dva 框架，后來用過 create-react-app 框架，都需要針對團隊做一些定制化的修改。對 webpack 的工作流程有點模...

IamDLY 2019-08-23 12:30 評論0 收藏0