從零開始搭建一個 Webpack 開發環境配置（附 Demo）

暖生發表於2019-01-30

Web開發環境

本文使用 Webpack 從零開始搭建一個開發環境的腳手架配置，在此做個記錄，也方便以後使用。

前言

我的上一篇文章簡單介紹了一下 Webpack 的一些核心概念和基本配置，需要了解的朋友可以先參考一下Webpack 的簡單介紹

從 webpack v4.0.0 開始，可以不用引入一個配置檔案。直接使用 webpack 命令就可進行打包。但是，一般我們需要進行更靈活的配置功能，所以本文我也建立一個 webpack 的配置檔案，對webpack 的一些屬性進行配置。

本文 Demo 地址

環境搭建

專案結構

首先我們建立一個目錄，初始化 npm，然後在本地安裝 webpack，接著安裝 webpack-cli（此工具用於在命令列中執行 webpack）：

$ mkdir webpack-dev-demo && cd webpack-dev-demo

$ npm init -y

$ npm install webpack webpack-cli --save-dev
複製程式碼

project

  webpack-dev-demo
  |- package.json
  |- /public
    |- index.html
  |- /src
    |- index.js
複製程式碼

src/index.js

function component() {
    var element = document.createElement('div');

    element.innerHTML = 'Hello World';
  
    return element;
}
  
document.body.appendChild(component());
複製程式碼

public/index.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Webpack 開發環境配置</title>
</head>
<body>
    
</body>
</html>
複製程式碼

package.json

{
  "name": "webpack-dev-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1"
  }
}

複製程式碼

建立配置檔案

在專案根目錄下建立 webpack.config.js 配置檔案

project

  webpack-dev-demo
  |- package.json
  |- /public
    |- index.html
  |- /src
    |- index.js
+ |- webpack.config.js
複製程式碼

配置入口和輸出

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name]-[hash:8].js',
        path: path.resolve(__dirname, 'dist')
    }
}
複製程式碼

執行 webpack

$ npm run build
複製程式碼

控制檯的列印結果

可以看到列印日誌，打包成功了，但是此時在瀏覽器開啟我們的 index.html 檔案，卻發現介面上什麼都不顯示，這個也好理解，因為 index.html 此時還沒有引入任何的 js 檔案。所以這個時候就要將打包後的檔案引入到 index.html 檔案中，但是可以看到 dist 資料夾下的 js 檔名有很多的 hash 值，而且每次編譯都可能不同，怎麼辦呢？這時候就要引入 html-webpack-plugin 外掛了

html-webpack-plugin 外掛的使用

安裝外掛：

$ npm install html-webpack-plugin --save-dev
複製程式碼

使用外掛：

webpack.config.js

...
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    ...
    plugins: [
        new HTMLWebpack({
            // 用於生成的HTML文件的標題
            title: 'Webpack 開發環境配置',
            // webpack 生成模板的路徑
            template: './public/index.html'
        })
    ]
}
複製程式碼

關於 html-webpack-plugin 外掛更多配置請參考：外掛文件。

再次執行 webpack

$ npm run build
複製程式碼

可以看到 dist 資料夾下生成了一個 index.html 檔案，在瀏覽器中開啟這個 index.html 檔案，可以看到，'Hello World' 已經能夠正常顯示了

至此，專案能夠正常打包了，但是還不夠，此時可以看到 dist 資料夾下有兩個 js 檔案，但是明明只打了一個包啊。是因為另一個包使我們上一次操作打出來的，並沒有刪除掉。所以，為了避免 dist 資料夾中的檔案變得雜亂，我們還需要引入 clean-webpack-plugin 外掛幫助我們清理 dist 資料夾

clean-webpack-plugin 外掛的使用

安裝外掛：

$ npm install clean-webpack-plugin --save-dev
複製程式碼

用法：new CleanWebpackPlugin(paths [, {options}])

webpack.config.js

...
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    ...
    plugins: [
        ...,
        // 用法：new CleanWebpackPlugin(paths [, {options}])
        new CleanWebpackPlugin(['dist'])
    ]
}
複製程式碼

再次執行 webpack

$ npm run build
複製程式碼

此時 dist 資料夾下只有一個 js 和 html 檔案了。說明外掛配置成功了，關於 clean-webpack-plugin 更多配置請參考：外掛文件。

配置 Http 服務並進行實時預覽

安裝 webpack-dev-server 包：

$ npm install --save-dev webpack-dev-server
複製程式碼

使用：

webpack.config.js

...
const webpack = require('webpack');

module.exports = {
    ...
    devServer: {
        // 必須配置的選項，服務啟動的目錄，預設為跟目錄
        contentBase: './dist',
        // 使用熱載入時需要設定為 true
        hot: true,
        /**
         * 下面為可選配置
         */
        // 指定使用一個 host。預設是 localhost
        host: 'localhost',
        // 埠號
        port: 8000,
        // 當使用 HTML5 History API 時，任意的 404 響應都可能需要被替代為 index.html。通過設定為 true 進行啟用
        historyApiFallback: {
            disableDotRule: true
        },
        // 出現錯誤時是否在瀏覽器上出現遮罩層提示
        overlay: true,
        /**
         * 在 dev-server 的兩種不同模式之間切換
         *   預設情況下，應用程式啟用內聯模式 inline
         *   設定為 false，使用 iframe 模式，它在通知欄下面使用 <iframe> 標籤，包含了關於構建的訊息
         */
        inline: true,
        /**
         * 統計資訊，列舉型別，可供選項：
         *      "errors-only": 只在發生錯誤時輸出
         *      "minimal": 只在發生錯誤或有新的編譯時輸出
         *      "none": 沒有輸出
         *      "normal": 標準輸出
         *      "verbose": 全部輸出
         */
        stats: "errors-only",
        // 設定介面請求代理，更多 proxy 配置請參考 https://github.com/chimurai/http-proxy-middleware#options
        proxy: {
            '/api/': {
                changeOrigin: true,
                // 目標地址
                target: 'http://localhost:3000',
                // 重寫路徑
                pathRewrite: {
                    '^/api/': '/'
                }
            }
        }
    },
    plugins: [
        ...,
        // 新增 NamedModulesPlugin，以便更容易檢視要修補(patch)的依賴，由於設定了 mode: 'development'，所以這個外掛可以省略
        // new webpack.NamedModulesPlugin(),
        // 進行模組熱替換
        new webpack.HotModuleReplacementPlugin()
    ]
}
複製程式碼

啟用熱載入功能：(上面已經新增了) 1、在 devServer 配置中新增 hot: true 屬性 2、在 plugins 中新增 new webpack.NamedModulesPlugin() 和 new webpack.HotModuleReplacementPlugin()

在 package.json 中新增一個執行命令

package.json

...
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
+   "start": "webpack-dev-server"
}
...
複製程式碼

啟動 Http 服務

執行命令：

$ npm run start
複製程式碼

可以看到控制檯列印輸出：

開啟瀏覽器，輸入：http://localhost:8000/，可以看到瀏覽器中可以正常顯示 Hello World。

模式配置

webpack 配置中有一個 mode 屬性的配置，三個可選屬性：

production 會將 process.env.NODE_ENV 的值設為 production。啟用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin。
development 會將 process.env.NODE_ENV 的值設為 development。啟用 NamedChunksPlugin 和 NamedModulesPlugin。
none 不選用任何預設優化選項

這裡我們配置的是開發環境，所以需要將 mode 設定為 development

webpack.config.js

...
module.exports = {
+   mode: 'development',
    ...
}
複製程式碼

啟用除錯工具 Source Map

此時專案能夠正常執行，所以沒有什麼問題，但是現在我們修改一下，將 index.js 中的 return element 改成錯誤的 return ele。我們 F12 開啟開發工具，可以看到控制檯的錯誤提示，點進去卻發現跟我們寫的程式碼不一致，難以對錯誤的程式碼進行除錯，此時 Source Map 就派上用場了。

在 webpack.config.js 中新增 devtool 屬性

webpack.config.js

...
module.exports = {
    mode: 'development',
+   devtool: inline-source-map
    ...
}
複製程式碼

devtool 的多個屬性之間的差異

devtool	構建速度	重新構建速度	生產環境	品質(quality)
(none)	+++	+++	yes	打包後的程式碼
eval	+++	+++	no	生成後的程式碼
cheap-eval-source-map	+	++	no	轉換過的程式碼（僅限行）
cheap-module-eval-source-map	o	++	no	原始原始碼（僅限行）
eval-source-map	--	+	no	原始原始碼
cheap-source-map	+	o	yes	轉換過的程式碼（僅限行）
cheap-module-source-map	o	-	yes	原始原始碼（僅限行）
inline-cheap-source-map	+	o	no	轉換過的程式碼（僅限行）
inline-cheap-module-source-map	o	-	no	原始原始碼（僅限行）
source-map	--	--	yes	原始原始碼
inline-source-map	--	--	no	原始原始碼
hidden-source-map	--	--	yes	原始原始碼
nosources-source-map	--	--	yes	無原始碼內容

再次執行專案：

$ npm run start
複製程式碼

可以看到報錯依舊，但是在開發工具的控制檯上，檢視錯誤提示，可以根據提示清楚的找到我們寫的程式碼所在位置.

測試之後請將錯誤的 return ele 改為正確的 return element

為專案新增模組解析規則

此時，開發環境已經配置的差不多了，但是我現在想給 div 加一個樣式，想讓文字程式設計藍色，居中顯示，那麼此時就需要用的 loader 了，因為 webpack 預設無法解析 css，所以就需要我們自己配置了

配置 css 模組解析

安裝所需外掛：

$ npm install css-loader style-loader --save-dev
複製程式碼

css-loader 用來解析 css 檔案，而 style-loader 則用來將解析好的 css 內容注入到 JavaScript 裡。由於 loader 執行順序是從下到上，所以要將 css-loader 寫在下面。

使用：

webpack.config.js

...
module.exports = {
    ...
    plugins: [...],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    // 還可以給 loader 新增一些配置
                    {
                        loader: 'css-loader',
                        options: {
                            // 開啟 sourceMop
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    }
}
複製程式碼

在 src 目錄下新建一個 css 檔案

src/index.css：

div {
    color: blue;
    text-align: center;
}
複製程式碼

src/index.js

require('./index.css');

...
複製程式碼

重新執行專案：

$ npm run start
複製程式碼

可以看到瀏覽器上此時文字顏色已經變藍，並且居中顯示。

配置其他模組解析

除了 css 之外，其他檔案在 webpack 也都被認為是一個模組，也都需要對應的 loader 進行解析。下面就不一一演示了，先把程式碼貼出來看一看。

下載所有需要的外掛：

$ npm install file-loader csv-loader xml-loader html-loader markdown-loader --save-dev
複製程式碼

webpack.config.js

...
module.exports = {
    ...
    plugins: [...],
    module: {
        rules: [
            ...
            // 解析圖片資源
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            // 解析 字型
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            },
            // 解析資料資源
            {
                test: /\.(csv|tsv)$/,
                use: [
                    'csv-loader'
                ]
            },
            // 解析資料資源
            {
                test: /\.xml$/,
                use: [
                    'xml-loader'
                ]
            },
            // 解析 MakeDown 檔案
            {
                test: /\.md$/,
                use: [
                    "html-loader", 
                    "markdown-loader"
                ]
            }
        ]
    }
}
複製程式碼

這些配置基本上可以滿足常規開發中使用到的各種模組資源，不過在開發過程中可能還會需要用到 less、scss 等 css 預編譯語言，還需要使用 less-loader，sass-loader 進行配置。更多配置用法這裡也無法一一詳述，等大家用到的時候再去查閱對應文件即可。

使用 babel 進行配置

目前專案可以正常執行，但是現在 ES6、7 語法已經出來了，但是瀏覽器中還不能完全識別，所以我們需要 babel 講 js 檔案轉換成瀏覽器可以識別的 ES5 語法。

安裝 bable-loader 外掛

$ npm install babel-core babel-loader --save-dev
複製程式碼

babel 還能進行配置，可以像上面那樣直接在 loader 中進行配置，也可以在根目錄下建立 .babelrc 檔案配置，專案執行會自動從此檔案中讀取

使用 babel-loader：

webpack.config.js

...
module.exports = {
    ...
    plugins: [...],
    module: {
        rules: [
            {
                test: /\.js/,
                include: path.resolve(__dirname, 'src'),
                loader: 'babel-loader?cacheDirectory',
            },
        ]
    }
}
複製程式碼

babel 的 cacheDirectory 屬性

預設值為 false。當有設定時，指定的目錄將用來快取 loader 的執行結果。之後的 webpack 構建，將會嘗試讀取快取，來避免在每次執行時，可能產生的、高效能消耗的 Babel 重新編譯過程。如果設定了一個空值 (loader: 'babel-loader?cacheDirectory') 或者 true (loader: babel-loader?cacheDirectory=true)，loader 將使用預設的快取目錄 node_modules/.cache/babel-loader，如果在任何根目錄下都沒有找到 node_modules 目錄，將會降級回退到作業系統預設的臨時檔案目錄。

使用 cacheDirectory 選項，將 babel-loader 提速至少兩倍。

babel 的 Presets 配置

presets 屬性告訴 Babel 要轉換的原始碼使用了哪些新的語法特性，一個 Presets 對一組新語法特性提供支援，多個 Presets 可以疊加。 Presets 其實是一組 Plugins 的集合，每一個 Plugin 完成一個新語法的轉換工作。Presets 是按照 ECMAScript 草案來組織的，通常可以分為以下三大類：

已經被寫入 ECMAScript 標準裡的特性，由於之前每年都有新特性被加入到標準裡，所以又可細分為：
- es2015 包含在2015里加入的新特性；
- es2016 包含在2016里加入的新特性；
- es2017 包含在2017里加入的新特性；
- env 包含當前所有 ECMAScript 標準裡的最新特性。
被社群提出來的但還未被寫入 ECMAScript 標準裡特性，這其中又分為以下四種：
- stage0 只是一個美好激進的想法，有 Babel 外掛實現了對這些特性的支援，但是不確定是否會被定為標準；
- stage1 值得被納入標準的特性；
- stage2 該特性規範已經被起草，將會被納入標準裡；
- stage3 該特性規範已經定稿，各大瀏覽器廠商和 Node.js 社群開始著手實現；
- stage4 在接下來的一年將會加入到標準裡去。
為了支援一些特定應用場景下的語法，和 ECMAScript 標準沒有關係，例如 babel-preset-react 是為了支援 React 開發中的 JSX 語法。

babel 的 Plugins 配置

plugins 屬性告訴 Babel 要使用哪些外掛，外掛可以控制如何轉換程式碼。

安裝專案中需要使用的 Presets 外掛

$ npm install babel-preset-env babel-preset-stage-0 --save-dev
複製程式碼

安裝專案中需要的 babel Plugin

$ npm install babel-plugin-transform-class-properties babel-plugin-transform-runtime babel-runtime --save-dev
複製程式碼

babel-plugin-transform-class-properties 可以在專案中使用新增的 class 屬性用法
babel-plugin-transform-runtime 由於 babel 轉換檔案時會在每個檔案中都寫入輔助程式碼，使用此外掛可以直接使用 babel-runtime 中的程式碼進行轉換，避免程式碼冗餘。所以 babel-plugin-transform-runtime 和 babel-runtime 成對使用

.babelrc

{
    "presets": ["env", "stage-0"],
    "plugins": [
        "transform-runtime",
        "transform-class-properties"
    ]
}
複製程式碼

配置完成，此時就可以在專案中自由的使用 ES6 等新增 js 語法了。

使用 friendly-errors-webpack-plugin

有時候專案提示錯誤，可能是編譯錯誤，可能是 ESLint 提示錯誤等等，我們希望錯誤提示能夠友好一些，就可以使用這個外掛

外掛安裝：

npm install friendly-errors-webpack-plugin --save-dev
複製程式碼

使用：

webpack.config.js

...
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

module.exports = {
    ...,
    plugins: [
        ...
        new FriendlyErrorsWebpackPlugin()
    ]
}
複製程式碼

更多配置請參考外掛文件

配置模組如何解析 resolve

開發的時候我們經常會需要引入自己寫的檔案模組，可能會需要按照路徑一級一級的找，這個時候我們就可以配置 resolve，為一些常用的路徑設定別名

配置：

webpack.config.js

...
module.exports = {
    ...
    plugins: [...],
    modules: {...},
    resolve: {
        alias: {
            src: path.resolve(__dirname, 'src')
        }
    }
}
複製程式碼

使用：無論在任何檔案裡，引入 src 目錄下的 index.css 檔案時，路徑都可以按照下面的這個引入路徑來寫

index.js

- require('./index.css');
+ import 'src/index.css';
複製程式碼

重新執行專案，發現專案正常啟動，index.css 中的樣式也正常生效

至此，一個簡單的開發環境的 Webpack 腳手架搭建完成了。

最終的專案結構以及檔案程式碼

project

  webpack-dev-demo
  |- package.json
  |- /public
    |- index.html
  |- /src
    |- index.js
    |- index.css
複製程式碼

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Webpack 開發環境配置</title>
</head>
<body>
    
</body>
</html>
複製程式碼

src/index.js

import 'src/index.css';

function component() {
    var element = document.createElement('div');

    element.innerHTML = 'Hello World';
  
    return element;
  }
  
document.body.appendChild(component());
複製程式碼

src/index.css

div {
    color: blue;
    text-align: center;
}
複製程式碼

.babelrc

{
    "presets": ["env", "stage-0"],
    "plugins": [
        "transform-runtime",
        "transform-class-properties"
    ]
}
複製程式碼

webpack.config.js

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    mode: 'development',
    devtool: 'inline-source-map',
    entry: './src/index.js',
    output: {
        filename: '[name]-[hash:8].js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        // 必須配置的選項，服務啟動的目錄，預設為跟目錄
        contentBase: './dist',
        // 使用熱載入時需要設定為 true
        hot: true,
        /**
         * 下面為可選配置
         */
        // 指定使用一個 host。預設是 localhost
        host: 'localhost',
        // 埠號
        port: 8000,
        // 當使用 HTML5 History API 時，任意的 404 響應都可能需要被替代為 index.html。通過設定為 true 進行啟用
        historyApiFallback: {
            disableDotRule: true
        },
        // 出現錯誤時是否在瀏覽器上出現遮罩層提示
        overlay: true,
        /**
         * 在 dev-server 的兩種不同模式之間切換
         *   預設情況下，應用程式啟用內聯模式 inline
         *   設定為 false，使用 iframe 模式，它在通知欄下面使用 <iframe> 標籤，包含了關於構建的訊息
         */
        inline: true,
        /**
         * 統計資訊，列舉型別，可供選項：
         *      "errors-only": 只在發生錯誤時輸出
         *      "minimal": 只在發生錯誤或有新的編譯時輸出
         *      "none": 沒有輸出
         *      "normal": 標準輸出
         *      "verbose": 全部輸出
         */
        stats: "errors-only",
        // 設定介面請求代理，更多 proxy 配置請參考 https://github.com/chimurai/http-proxy-middleware#options
        proxy: {
            '/api/': {
                changeOrigin: true,
                // 目標地址
                target: 'http://localhost:3000',
                // 重寫路徑
                pathRewrite: {
                    '^/api/': '/'
                }
            }
        }
    },
    plugins: [
        new HTMLWebpackPlugin({
            // 用於生成的HTML文件的標題
            title: 'Webpack 開發環境配置',
            // webpack 生成模板的路徑
            template: './public/index.html'
        }),
        // 用法：new CleanWebpackPlugin(paths [, {options}])
        new CleanWebpackPlugin(['dist']),
        // 新增 NamedModulesPlugin，以便更容易檢視要修補(patch)的依賴，由於設定了 mode: 'development'，所以這個外掛可以省略
        // new webpack.NamedModulesPlugin(),
        // 進行模組熱替換
        new webpack.HotModuleReplacementPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.js/,
                include: path.resolve(__dirname, 'src'),
                loader: 'babel-loader?cacheDirectory'
            },
            // 解析 css
            {
                test: /\.css$/,
                include: path.resolve(__dirname, 'src'),
                use: [
                    'style-loader',
                    // 還可以給 loader 新增一些配置
                    {
                        loader: 'css-loader',
                        options: {
                            // 開啟 sourceMop
                            sourceMap: true
                        }
                    }
                ]
            },
            // 解析圖片資源
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            // 解析 字型
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            },
            // 解析資料資源
            {
                test: /\.(csv|tsv)$/,
                use: [
                    'csv-loader'
                ]
            },
            // 解析資料資源
            {
                test: /\.xml$/,
                use: [
                    'xml-loader'
                ]
            },
            // 解析 MakeDown 檔案
            {
                test: /\.md$/,
                use: [
                    "html-loader", 
                    "markdown-loader"
                ]
            }
        ]
    },
    resolve: {
        alias: {
            src: path.resolve(__dirname, 'src')
        }
    }
}
複製程式碼

package.json

{
  "name": "webpack-dev-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "clean-webpack-plugin": "^1.0.1",
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}
複製程式碼

原始碼地址

本文 Demo 地址

總結

本文篇幅較長，感謝各位的耐心閱讀。本文主要從入口、輸出、外掛（Plugins）、模組處理（Module）、loader、解析（resolve）等 6 個配置項著手配置了一個基本的 webpack 開發環境腳手架。本文主要講解的內容為：

loader 的作用以及如何配置使用
babel 的作用以及配置項
各個外掛的功能以及適用場景
解析能夠為開發帶來的效率

本文內容對於已經熟練掌握 Webpack 的朋友來說，可能有些淺薄，但是著重講解了各個配置項的功能以及配置後對專案產生的效果。對於準備入門 webpack 的朋友應該會有一定的幫助。

從零開始搭建webpack+react開發環境
2018-05-08
WebReact開發環境
從零開始使用 Webpack 搭建 Vue3 開發環境
2020-07-09
WebVue開發環境
從零開始搭建一個簡單的基於webpack的vue開發環境
2018-01-11
WebVue開發環境
從零開始開發一個 Webpack
2018-07-12
Web
[ 從零開始配置一個 Windows 前端開發環境 ] - 一：WT + WSL
2020-03-27
Windows前端開發環境
從零開始搭建本地 Docker 開發環境
2019-04-23
Docker開發環境
VUE從零開始環境搭建
2020-10-29
Vue
[ 從零開始配置一個 Windows 前端開發環境 ] - 二：vscode
2020-03-30
Windows前端開發環境VSCode
從零搭建和配置OSX開發環境
2017-07-03
開發環境
從零開始配置基本的前端開發環境（windows）
2018-12-08
前端開發環境Windows
webpack從零開始搭建多頁面（一）:webpack起步到執行一個簡單的demo
2019-02-16
Web
從零開始搭建React全家桶環境
2018-01-31
React
從零開始--webpack 4 配置
2019-04-08
Web
VsCode從零開始配置一個屬於自己的Vue開發環境
2019-05-17
VSCodeVue開發環境
從零搭建前端開發環境----React+Ts+Webpack基礎搭建
2023-03-11
前端開發環境ReactWeb
從0開始搭建preact開發環境
2018-08-10
React開發環境
M1版Mac從零開始搭建Golang開發環境
2022-01-09
MacGolang開發環境
從零開始搭建webpack應用
2018-03-25
Web
從零搭建嵌入式開發環境
2022-07-15
開發環境
從零開始寫專案第一篇【搭建環境】
2018-12-18
Webpack 配置 React 開發環境
2017-07-02
WebReact開發環境
從零開始構建一個webpack專案
2019-10-24
Web
Windows環境下從零開始Zend Framework 2.0 (ZF2)環境搭建
2012-10-09
WindowsFramework
從零搭建Golang開發環境--go修仙序章
2020-10-02
Golang開發環境
使用webpack搭建react開發環境
2018-05-14
WebReact開發環境
從零開始搭建一個 hexo 部落格。
2018-12-12
Hexo
從零開始搭建一個vue專案
2018-03-08
Vue
從零開始搭建一個mock服務
2018-05-11
Mock
Flutter 從一個demo開始
2019-06-12
Flutter
「基礎搭建」從零開始，基於 Webpack5 搭建一個 Vue-Cli
2022-03-16
WebVue
Webpack(開發、生產環境配置)
2020-11-13
Web
webpack配置React開發環境(上)
2017-03-08
WebReact開發環境
React + Typescript + Webpack 開發環境配置
2016-12-04
ReactTypeScriptWeb開發環境
使用 Webpack 進行生產環境配置（附 Demo）
2019-02-01
Web
ArcGIS API for JavaScript開發環境搭建及第一個例項demo
2015-09-25
APIJavaScript開發環境
從零開始開發一個大型網站
2017-12-20
網站
react+webpack+webstorm開發環境搭建
2019-02-16
ReactWebORM開發環境
基於Webpack搭建React開發環境
2018-05-16
WebReact開發環境

從零開始搭建一個 Webpack 開發環境配置（附 Demo）

前言

環境搭建

專案結構

建立配置檔案

配置入口和輸出

執行 webpack

html-webpack-plugin 外掛的使用

clean-webpack-plugin 外掛的使用

配置 Http 服務並進行實時預覽

模式配置

啟用除錯工具 Source Map

為專案新增模組解析規則

配置 css 模組解析

配置其他模組解析

使用 babel 進行配置

babel 的 cacheDirectory 屬性

babel 的 Presets 配置

babel 的 Plugins 配置

使用 friendly-errors-webpack-plugin

配置模組如何解析 resolve

最終的專案結構以及檔案程式碼

原始碼地址

總結

相關文章