webpack入門指南（基於webpack v4.41.2）

本文轉載自查看原文 2019-12-11 18:43 354 打包工具

2019年12月5日初稿，目前webpack已經更新到v4.41.2，本文正是基於該版本，在windows8.1操作系統下進行的demo編譯，適用於想入門webpack的前端開發人員。

webpack官方使用指南（參考1）：https://www.webpackjs.com/guides/getting-started/

本文參考（參考2）：https://segmentfault.com/a/1190000006178770?utm_source=tag-newest#comment-area

一、使用webpack之前的准備工作

在開始之前，請確保安裝了 node.js的最新版本。這里給大家推薦https://www.cnblogs.com/zhouyu2017/p/6485265.html，大家可以通過這篇文章來安裝node.js並進行環境變量配置。

二、開始使用webpack

1、創建練習文件夾，本人將該文件夾命名為webpackTest(根目錄)，並通過CMD進入該文件夾下

2、創建package.json文件及安裝webpack

a、在根目錄下創建package.json文件，這是一個標准的npm說明文件，里面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等。在終端中使用npm init -y命令可以自動創建這個package.json文件.

命令：npm init -y

運行結果：

目錄結構：

代碼內容：

//package.json
{
  "name": "webpackTest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

b、創建完成package.json之后安裝webpack，按照官方推薦使用局部（本地）安裝，這里安裝最新版本（此時最新版本為v4.41.2，當你看到這篇文章時，其版本可能又已經更新，你可以通過npm install --save-dev webpack@4.41.2來下載該版本），其中webpack-cli工具用於在命令行中運行 webpack。

命令：npm install webpack webpack-cli --save-dev

運行結果：

目錄結構：

3、初始文件設置

在根目錄下創建兩個文件夾src、dist，src文件夾用來存放原始數據和我們將寫的JavaScript模塊，dist文件夾用來存放之后供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個index.html文件）。接下來，再創建3個文件：

index.html--放入dist文件夾中

style.css--放入src文件夾中

test.js--放入main文件夾中

目錄結構：

在index.html文件中寫入最基礎的html代碼，它在這里目的在於引入打包后的js文件（這里我們先把之后打包后的js文件命名為bundle.js，之后我們還會詳細講述），代碼如下：

<!-- 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 Sample Project</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

在test.js中定義一個返回包含“Hello WebPack!”文本的html元素的函數,並依據CommonJS規范導出這個函數為一個模塊，代碼如下：

// test.js
module.exports = function() {
    var testCon = document.createElement("div");
    testCon.textContent = "Hello WebPack!";
    return testCon;
};

main.js文件中我們寫入下述代碼，用以把testCon模塊返回的節點插入頁面，代碼如下：

//main.js 
const testContent = require("./test.js");
document.querySelector("#root").appendChild(testContent());

4、正式使用webpack

在終端根目錄下輸入以下命令：

npx webpack src/main.js --output dist/bundle.js

運行結果：

可以看出webpack同時編譯了main.js和test.js，並且注意下面的目錄結構，dist文件夾中已經自動生成了編譯之后的輸出文件bundle.js。

目錄結構：

頁面結果：

此時，我們已經通過webpack打包了一個文件。

5、通過配置文件使用webpack

在 webpack 4 中，可以無須任何配置使用，然而大多數項目會需要很復雜的設置，這就是為什么 webpack 仍然要支持配置文件。這比在終端中手動輸入大量命令要高效的多，所以我們需要創建一個取代以上使用 CLI 選項方式的配置文件，該配置文件其實也是一個簡單的JavaScript模塊，我們可以把所有的與打包相關的信息放在里面。

繼續上面的例子來說明如何寫這個配置文件，在當前練習文件夾的根目錄下新建一個名為webpack.config.js的文件，我們在其中寫入如下所示的簡單配置代碼，目前的配置主要涉及到的內容是入口文件路徑和打包后文件的存放路徑，內容具體如下：

// webpack.config.js
module.exports = {
    entry:  __dirname + "/src/main.js",//唯一入口文件
    output: {
      path: __dirname + "/dist",//打包后的文件存放的地方
      filename: "bundle.js"//打包后輸出文件的文件名
    }
}

注：“__dirname”是node.js中的一個全局變量，它指向當前執行腳本所在的目錄。

有了這個配置之后，再打包文件，只需在終端里運行npx webpack --config webpack.config.js命令就可以了，這條命令會自動引用webpack.config.js文件中的配置選項。

命令：npx webpack --config webpack.config.js

運行結果：

6、更便捷的執行打包任務：NPM腳本（NPM Scripts）

考慮到用 CLI 這種方式來運行本地的 webpack 不是特別方便，我們可以設置一個快捷方式。在 package.json 添加一個 NPM腳本（NPM Scripts）"build":"webpack"或者"start":"webpack"，這里我們使用前者，代碼如下：

{
  "name": "webpackTest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
　　 "start": "webpack",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  }
}

npm的start命令是一個特殊的腳本名稱，其特殊性表現在，在命令行中使用npm start就可以執行其對於的命令，如果對應的此腳本名稱不是start，想要在命令行中運行時，需要這樣用npm run {script name}如npm run build，我們在命令行中輸入npm run build試試，輸出結果如下：

現在只需要使用npm run build就可以打包文件了。

webpack的功能不止於此，我們還可以通過對配置文件的配置方式指定 loader 規則(loader rules)、插件(plugins)、解析選項(resolve options)，以及許多其他增強功能。

7、生成source maps(使調試更容易)

開發總是離不開調試，方便的調試能極大的提高開發效率，不過有時候通過打包后的文件，你是不容易找到出錯了的地方，對應的你寫的代碼的位置的，source maps就是來幫我們解決這個問題的。

通過簡單的配置，webpack就可以在打包時為我們生成的source maps，這為我們提供了一種對應編譯文件和源文件的方法，使得編譯后的代碼可讀性更高，也更容易調試。在webpack的配置文件中配置source maps，需要配置devtool，它有以下四種不同的配置選項（本文的參考2已經介紹過，這里不再贅述），在小到中型項目開發環境中我們對webpack.config.js文件這樣配置：

// webpack.config.js
module.exports = {
    devtool: 'eval-source-map',
    entry:  __dirname + "/src/main.js",//唯一入口文件
    output: {
      path: __dirname + "/dist",//打包后的文件存放的地方
      filename: "bundle.js"//打包后輸出文件的文件名
    }
}

8、使用webpack構建本地服務器

我們可以基於node.js構建一個webpack提供的一個可選的本地開發服務器，這樣瀏覽器監聽代碼的修改，並自動刷新顯示修改后的結果。該服務器是一個單獨的組件，在webpack中進行配置之前需要單獨安裝它作為項目依賴：

命令：npm install --save-dev webpack-dev-server

運行結果：

更改配置文件webpack.config.js：

// webpack.config.js
module.exports = {
    devtool: 'eval-source-map',
    entry:  __dirname + "/src/main.js",//唯一入口文件
    output: {
      path: __dirname + "/dist",//打包后的文件存放的地方
      filename: "bundle.js"//打包后輸出文件的文件名
    },
    devServer: {
        contentBase: "./dist",//設置本地服務器所加載的頁面所在的目錄
        port:"8082",//設置默認監聽端口為8082，如果省略，默認為”8080“
        historyApiFallback: true,//不跳轉，在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設置為true，所有的跳轉將指向index.html
        inline: true//是否實時刷新
    }
}

在package.json中的scripts對象中添加如下命令"server": "webpack-dev-server --open"，用以開啟本地服務器：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
　　 "start": "webpack",
    "build": "webpack",
    "server": "webpack-dev-server --open"
}

在終端中輸入npm run server 即可在本地的8082端口查看結果：

命令：npm run server

運行結果：

頁面結果：

9、loader

loader讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉換為 webpack 能夠處理的有效模塊，然后你就可以利用 webpack 的打包能力，對它們進行處理。

本質上，webpack loader 將所有類型的文件，轉換為應用程序的依賴圖（和最終的 bundle）可以直接引用的模塊。比如說分析轉換scss為css，或者把下一代的JS文件（ES6，ES7)轉換為現代瀏覽器兼容的JS文件，對React的開發而言，合適的Loaders可以把React的中用到的JSX文件轉換為JS文件。

注意：loader 能夠import導入任何類型的模塊（例如 .css 文件），這是 webpack 特有的功能，其他打包程序或任務執行器的可能並不支持。這種語言擴展是有很必要的，因為這可以使開發人員創建出更准確的依賴關系圖。

Loaders需要單獨安裝並且需要在webpack.config.js中的modules關鍵字下進行配置，Loaders的配置包括以下幾方面：

test：一個用以匹配loaders所處理文件的拓展名的正則表達式（必須）
loader：loader的名稱（必須）
include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）
query：為loaders提供額外的設置選項（可選）

在配置loader之前，我們把test.js里的問候消息放在一個單獨的JSON文件里,並通過合適的配置使test.js可以讀取該JSON文件的值，各文件修改后的代碼如下：

在src文件夾中創建帶有問候信息的JSON文件，命名為config.json:

{
    "testText":"Hello WebPack!"
}

更新后的test.js：

//test.js
var config = require('./config.json');
module.exports = function() {
    var testCon = document.createElement("div");
    testCon.textContent = config.testText;
    return testCon;
};

10、Babel的安裝與配置

Babel其實是一個編譯JavaScript的平台，它可以編譯代碼幫你達到以下目的：

讓你能使用最新的JavaScript代碼（ES6，ES7...），而不用管新標准是否被當前使用的瀏覽器完全支持
讓你能使用基於JavaScript進行了拓展的語言，比如React的JSX
...

Babel其實是幾個模塊化的包，其核心功能位於稱為babel-core的npm包中，webpack可以把其不同的包整合在一起使用，對於每一個你需要的功能或拓展，你都需要安裝單獨的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

我們先來一次性（npm可以一次性安裝多個依賴模塊，模塊之間用空格隔開）安裝這些依賴包：

命令：

npm install --save-dev babel-core babel-loader@7.1.5 babel-preset-es2015 babel-preset-react

注意：默認babel-loader最新8.0+版本的話會產生沖突，這里采用7.1.5版本

運行結果（這是修改babel-loder版本之前的運行結果）：

在webpack.config.js中配置Babel的方法如下:

// webpack.config.js
module.exports = {
    devtool: 'eval-source-map',
    entry:  __dirname + "/src/main.js",//唯一入口文件
    output: {
      path: __dirname + "/dist",//打包后的文件存放的地方
      filename: "bundle.js"//打包后輸出文件的文件名
    },
    devServer: {
        contentBase: "./dist",//設置本地服務器所加載的頁面所在的目錄
        port:"8082",//設置默認監聽端口，如果省略，默認為”8080“
        historyApiFallback: true,//不跳轉，在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設置為true，所有的跳轉將指向index.html
        inline: true//是否實時刷新
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "es2015", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
}

現在你的webpack的配置已經允許你使用ES6以及JSX的語法了，繼續用上面的例子進行測試，不過這次我們會使用React，記得先安裝 React 和 React-DOM：

命令：npm install --save react react-dom

運行結果：

接下來我們使用ES6的語法，更新test.js並返回一個React組件:

//test.js
import React, {Component} from 'react'
import config from './config.json';

class TestCon extends Component{
    render() {
        return (<div>{config.testText}</div>);
    }
}
export default TestCon;

修改main.js如下，使用ES6的模塊定義和渲染Greeter模塊:

// main.js
import React from 'react';
import {render} from 'react-dom';
import TestCon from './test';

render(<TestCon />, document.getElementById('root'));

重新使用npm run build打包:

打包成功，瀏覽器和之前顯示的內容一樣：

11、一切皆模塊，資源管理

Webpack有一個不可不說的優點，它把所有的文件都都當做模塊處理，JavaScript代碼，CSS和fonts以及圖片等等通過合適的loader都可以被處理。接下來我們將以css為例進行操作。

webpack提供兩個工具處理樣式表，css-loader和 style-loader，二者處理的任務不同，css-loader使你能夠使用類似@import和url(...)的方法實現require()的功能，style-loader將所有的計算后的樣式加入頁面中，二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中。繼續上面的例子：

命令：npm install --save-dev style-loader css-loader

運行結果：

在webpack.config.js的module中添加如下代碼：

// webpack.config.js
module.exports = {
    devtool: 'eval-source-map',
    entry:  __dirname + "/src/main.js",//唯一入口文件
    output: {
      path: __dirname + "/dist",//打包后的文件存放的地方
      filename: "bundle.js"//打包后輸出文件的文件名
    },
    devServer: {
        contentBase: "./dist",//設置本地服務器所加載的頁面所在的目錄
        port:"8082",//設置默認監聽端口，如果省略，默認為”8080“
        historyApiFallback: true,//不跳轉，在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設置為true，所有的跳轉將指向index.html
        inline: true//是否實時刷新
    },
    module: {
        rules: [{
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: [
                        "es2015", "react"
                    ]
                }
            },
            exclude: /node_modules/
        },{
            test: /\.css$/,
            use: [{
                loader: "style-loader"
            },{
                loader: "css-loader" }]
        }]
    }
}

請注意這里對同一個文件引入多個loader的方法。

接下來，在src文件夾里創建一個名字為"main.css"的文件，對一些元素設置樣式：

/* main.css */
*{
    padding: 0px;
    margin: 0px;
    font-size: 16px;
    font-family:'幼圓', 'Times New Roman', Times, serif;
    color: #333;
    list-style: none;
}
html,body{
    width: 100%;
    height: 100%;
}

我們這里例子中用到的webpack只有單一的入口，其它的模塊需要通過import，require，url等與入口文件建立其關聯，為了讓webpack能找到”main.css“文件，我們把它導入”main.js “中，如下：

// main.js
import React from 'react';
import {render} from 'react-dom';
import TestCon from './test';
import './main.css';

render(<TestCon />, document.getElementById('root'));

在終端該項目根目錄下輸入命令npm run build：

運行結果：

頁面結果：

可以看到，樣式已經渲染成功。接下來，咱們繼續看一個更加真實的css模塊實踐。

Css module

在過去的一些年里，JavaScript通過一些新的語言特性，更好的工具以及更好的實踐方法（比如說模塊化）發展得非常迅速。模塊使得開發者把復雜的代碼轉化為小的，干凈的，依賴聲明明確的單元，配合優化工具，依賴管理和加載管理可以自動完成。不過，前端的另外一部分，CSS發展就相對慢一些，大多的樣式表卻依舊巨大且充滿了全局類名，維護和修改都非常困難。

被稱為Css module的技術意在把JS的模塊化思想帶入CSS中來，通過CSS模塊，所有的類名，動畫名默認都只作用於當前模塊。Webpack對CSS模塊化提供了非常好的支持，只需要在CSS loader中進行簡單配置即可，然后就可以直接把CSS的類名傳遞到組件的代碼中，這樣做有效避免了全局污染。具體的代碼如下：

// webpack.config.js
module.exports = {
    ······
    module: {
        rules: [{
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: [
                        "es2015", "react"
                    ]
                }
            },
            exclude: /node_modules/
        },{
            test: /\.css$/,
            use: [{
                loader: "style-loader"
            },{
                loader: "css-loader",
                options: {
                    modules: true// 指定啟用css modules
                }
            }]
        }]
    }
}

我們在src文件夾下創建一個test.css文件來進行一下測試:

/* test.css */
.root {
    background-color: red;
    padding: 10px;
    border: 1px solid #999;
}

導入.root到test.js中：

//test.js
import React, {Component} from 'react'
import config from './config.json';
import styles from './test.css';//導入

class TestCon extends Component{
    render() {
        return (<div className={styles.root}>{config.testText}</div>);//使用cssModule添加類名的方法
    }
}
export default TestCon;

這樣的話，就可以放心使用了，相同的類名也不會造成不同組件之間的污染。

命令：npm run build

運行結果：

頁面結果：

CSS預處理器

Sass和Less之類的預處理器是對原生CSS的拓展，它們允許你使用類似於variables，nesting，mixins，inheritance等不存在於CSS中的特性來寫CSS，CSS預處理器可以這些特殊類型的語句轉化為瀏覽器可識別的CSS語句，以下是常用的CSS 處理loaders：

Less Loader
Sass Loader
Stylus Loader

不過其實也存在一個CSS的處理平台-Post-Css，它可以幫助你的CSS實現更多的功能。下面我們舉例來說如何使用PostCSS，我們使用PostCSS來為CSS代碼自動添加適應不同瀏覽器的CSS前綴。

首先安裝postcss-loader 和autoprefixer （自動添加前綴的插件）

命令：npm install --save-dev postcss-loader autoprefixer

運行結果：

接下來，接下來，在webpack配置文件webpack.config.js中添加postcss-loader，在根目錄新建postcss.config.js：

// webpack.config.js
module.exports = {
    ······
    module: {
        rules: [{
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: [
                        "es2015", "react"
                    ]
                }
            },
            exclude: /node_modules/
        },{
            test: /\.css$/,
            use: [{
                loader: "style-loader"
            },{
                loader: "css-loader",
                options: {
                    modules: true// 指定啟用css modules
                }
            },{
                loader: "postcss-loader"
            }]
        }]
    }
}

// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

目錄結構：

運行命令：npm run build

運行結果：

至此，本文已經談論了處理JS的Babel和處理CSS的PostCSS的基本用法，它們其實也是兩個單獨的平台，配合webpack可以很好的發揮它們的作用。接下來介紹Webpack中另一個非常重要的功能-Plugins。

12、插件（Plugins）

插件（Plugins）是用來拓展Webpack功能的，它們會在整個構建過程中生效，執行相關的任務。Loaders和Plugins常常被弄混，但是他們其實是完全不同的東西，可以這么來說，loaders是在打包構建過程中用來處理源文件的（JSX，Scss，Less..），一次處理一個，插件並不直接操作單個文件，它直接對整個構建過程其作用。Webpack有很多內置插件，同時也有很多第三方插件，可以讓我們完成更加豐富的功能。

使用插件的方法

// webpack.config.js
const webpack = require('webpack');
module.exports = {
    ······
    module: {
        ······
    },
    plugins: [
        new webpack.BannerPlugin('版權所有，翻版必究')
    ]
}

通過這個插件，打包后的JS文件顯示如下：

這就是webpack插件的基礎用法了，下面給大家推薦幾個常用的插件。

HtmlWebpackPlugin

這個插件的作用是依據一個簡單的index.html模板，生成一個自動引用你打包后的JS文件的新index.html。這在每次生成的js文件名稱不同時非常有用（比如添加了hash值）。

安裝命令：npm install --save-dev html-webpack-plugin

運行結果：

這個插件自動完成了我們之前手動做的一些事情，在正式使用之前需要對一直以來的項目結構做一些更改：

移除dist文件夾，利用此插件，index.html文件會自動生成，此外CSS已經通過前面的操作打包到JS中了

在src目錄下，創建一個index.tmpl.html一個index.tmpl.html文件模板，這個模板包含title等必須元素，在編譯過程中，插件會依據此模板生成最終的html頁面，會自動添加所依賴的 css, js，favicon等文件，index.tmpl.html中的模板源代碼如下：

<!-- index.tmpl.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 Sample Project</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

更新webpack的配置文件，新建一個build文件夾用來存放最終的輸出文件：

// webpack.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    devtool: 'eval-source-map',
    entry:  __dirname + "/src/main.js",//唯一入口文件
    output: {
      path: __dirname + "/build",//打包后的文件存放的地方
      filename: "bundle.js"//打包后輸出文件的文件名
    },
    devServer: {
        contentBase: "./dist",//設置本地服務器所加載的頁面所在的目錄
        port:"8082",//設置默認監聽端口，如果省略，默認為”8080“
        historyApiFallback: true,//不跳轉，在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設置為true，所有的跳轉將指向index.html
        inline: true//是否實時刷新
    },
    module: {
        rules: [{
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: [
                        "es2015", "react"
                    ]
                }
            },
            exclude: /node_modules/
        },{
            test: /\.css$/,
            use: [{
                loader: "style-loader"
            },{
                loader: "css-loader",
                options: {
                    modules: true// 指定啟用css modules
                }
            },{
                loader: "postcss-loader"
            }]
        }]
    },
    plugins: [
        new webpack.BannerPlugin('版權所有，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/src/index.tmpl.html"//new 一個這個插件的實例，並傳入相關的參數
        })
    ]
}

再次執行npm run build你會發現，build文件夾下面生成了bundle.js和index.html。目錄結構如下：

Hot Module Replacement

Hot Module Replacement（HMR）也是webpack里很有用的一個插件，它允許你在修改組件代碼后，自動刷新實時預覽修改后的效果。在webpack中實現HMR也很簡單，只需要做兩項配置：

在webpack配置文件中添加HMR插件
在Webpack Dev Server中添加“hot”參數

不過配置完這些后，JS模塊其實還是不能自動熱加載的，還需要在你的JS模塊中執行一個Webpack提供的API才能實現熱加載，雖然這個API不難使用，但是如果是React模塊，使用我們已經熟悉的Babel可以更方便的實現功能熱加載。

整理下我們的思路，具體實現方法如下：

babel和webpack是獨立的工具
二者可以一起工作
二者都可以通過插件拓展功能
HMR是一個webpack插件，它讓你能瀏覽器中實時觀察模塊修改后的效果，但是如果你想讓它工作，需要對模塊進行額外的配額
Babel有一個叫做react-transform-hrm的插件，可以在不對React模塊進行額外的配置的前提下讓HMR正常工作

還是繼續上例來實際看看如何配置:

// webpack.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    devtool: 'eval-source-map',
    entry:  __dirname + "/src/main.js",//唯一入口文件
    output: {
      path: __dirname + "/build",//打包后的文件存放的地方
      filename: "bundle.js"//打包后輸出文件的文件名
    },
    devServer: {
        contentBase: "./dist",//設置本地服務器所加載的頁面所在的目錄
        port:"8082",//設置默認監聽端口，如果省略，默認為”8080“
        historyApiFallback: true,//不跳轉，在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設置為true，所有的跳轉將指向index.html
        inline: true,//是否實時刷新
        hot: true,
    },
    module: {
        rules: [{
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader"
            },
            exclude: /node_modules/
        },{
            test: /\.css$/,
            use: [{
                loader: "style-loader"
            },{
                loader: "css-loader",
                options: {
                    modules: true// 指定啟用css modules
                }
            },{
                loader: "postcss-loader"
            }]
        }]
    },
    plugins: [
        new webpack.BannerPlugin('版權所有，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/src/index.tmpl.html"//new 一個這個插件的實例，並傳入相關的參數
        }),
        new webpack.HotModuleReplacementPlugin()//熱加載插件
    ]
}

安裝react-transform-hrm:

命令：npm install --save-dev babel-plugin-react-transform react-transform-hmr

在根目錄下新建.babelrc，配置Babel：

//.babelrc
{
    "presets": [
        "es2015", "react"
    ],
    "env": {
        "development": {
            "plugins": [["react-transform", {
                "transforms": [{
                    "transform": "react-transform-hmr",
                    "imports": ["react"],
                    "locals": ["module"]
                }]
            }]]
        }
    }
}

現在當你使用React時，可以熱加載模塊了,每次保存就能在瀏覽器上看到更新內容。

13、產品階段的構建

目前為止，我們已經使用webpack構建了一個完整的開發環境。但是在產品階段，可能還需要對打包的文件進行額外的處理，比如說優化，壓縮，緩存以及分離CSS和JS。

對於復雜的項目來說，需要復雜的配置，這時候分解配置文件為多個小的文件可以使得事情井井有條，以上面的例子來說，我們創建一個webpack.production.config.js的文件，在里面加上基本的配置,它和原始的webpack.config.js很像，如下：

// webpack.production.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    devtool: 'null', //注意修改了這里，這能大大壓縮我們的打包代碼
    entry:  __dirname + "/src/main.js",//唯一入口文件
    output: {
      path: __dirname + "/build",//打包后的文件存放的地方
      filename: "bundle.js"//打包后輸出文件的文件名
    },
    devServer: {
        contentBase: "./dist",//設置本地服務器所加載的頁面所在的目錄
        port:"8082",//設置默認監聽端口，如果省略，默認為”8080“
        historyApiFallback: true,//不跳轉，在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設置為true，所有的跳轉將指向index.html
        inline: true,//是否實時刷新
        hot: true,
    },
    module: {
        rules: [{
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader"
            },
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [{
                    loader: "css-loader",
                    options: {
                        modules: true
                    }
                }, {
                    loader: "postcss-loader"
                }],
            })
        }]
    },
    plugins: [
        new webpack.BannerPlugin('版權所有，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/src/index.tmpl.html"//new 一個這個插件的實例，並傳入相關的參數
        }),
        new webpack.HotModuleReplacementPlugin() //熱加載插件
    ],
};

package.json進行如下修改：

{
  "name": "webpackTest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "build": "set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress",
    "server": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.7.3",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^3.3.0",
    "html-webpack-plugin": "^3.2.0",
    "postcss-loader": "^3.0.0",
    "react-transform-hmr": "^1.0.4",
    "style-loader": "^1.0.1",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  },
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

接下先不要進行打包，上述的webpack.production.config.js中的樣式模塊中使用了ExtractTextPlugin，所以我們需要對插件進行優化。

優化插件

webpack提供了一些在發布階段非常有用的優化插件，它們大多來自於webpack社區，可以通過npm安裝，通過以下插件可以完成產品發布階段所需的功能：

OccurenceOrderPlugin：為組件OccurenceOrderPlugin分配ID，通過這個插件webpack可以分析和優先考慮使用最多的模塊，並為它們分配最小的ID
UglifyJsPlugin：壓縮JS代碼
ExtractTextPlugin：分離CSS和JS文件

我們繼續用例子來看看如何添加它們，OccurenceOrder 是內置插件，你需要做的只是安裝其它非內置插件：

命令：npm install --save-dev extract-text-webpack-plugin@4.0.0-beta.0 uglifyjs-webpack-plugin

在配置文件webpack.production.config.js的plugins后引用它們:

// webpack.production.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    devtool: 'null', //注意修改了這里，這能大大壓縮我們的打包代碼
    entry:  __dirname + "/src/main.js",//唯一入口文件
    output: {
      path: __dirname + "/build",//打包后的文件存放的地方
      filename: "bundle.js"//打包后輸出文件的文件名
    },
    devServer: {
        contentBase: "./dist",//設置本地服務器所加載的頁面所在的目錄
        port:"8082",//設置默認監聽端口，如果省略，默認為”8080“
        historyApiFallback: true,//不跳轉，在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設置為true，所有的跳轉將指向index.html
        inline: true,//是否實時刷新
        hot: true,
    },
    module: {
        rules: [{
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader"
            },
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            use: [{
                loader: "style-loader"
            },{
                loader: "css-loader",
                options: {
                    modules: true// 指定啟用css modules
                }
            },{
                loader: "postcss-loader"
            }]
        }]
    },
    plugins: [
        new webpack.BannerPlugin('版權所有，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/src/index.tmpl.html"//new 一個這個插件的實例，並傳入相關的參數
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new ExtractTextPlugin("style.css")
    ],
    optimization: {//壓縮js
        minimizer: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: false
                }
            })
        ]
    }
};

此時執行npm run build可以看見代碼是被壓縮后的：

運行結果：

壓縮后的bundle.js:

緩存

緩存無處不在，使用緩存的最好方法是保證你的文件名和文件內容是匹配的（內容改變，名稱相應改變）。webpack可以把一個哈希值添加到打包的文件名中，使用方法如下,添加特殊的字符串混合體（[name], [id] and [hash]）到輸出文件名前：

// webpack.production.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    devtool: 'null', //注意修改了這里，這能大大壓縮我們的打包代碼
    entry:  __dirname + "/src/main.js",//唯一入口文件
    output: {
      path: __dirname + "/build",//打包后的文件存放的地方
      filename: "bundle-[hash].js"//打包后輸出文件的文件名
    },
······
};

打包：npm run build

運行結果：

目錄結構：

去除`build`文件中的殘余文件

添加了hash之后，會導致改變文件內容后重新打包時，文件名不同而內容越來越多，因此這里介紹另外一個很好用的插件clean-webpack-plugin。

安裝命令：npm install --save-dev clean-webpack-plugin

運行結果：

在配置文件的webpack.production.config.js中做相應配置：

// webpack.production.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    ······
    plugins: [
        new webpack.BannerPlugin('版權所有，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/src/index.tmpl.html"//new 一個這個插件的實例，並傳入相關的參數
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new ExtractTextPlugin("style.css"),
        new CleanWebpackPlugin()
    ],
    ······
};

三、總結

本文主要是參考網友zhangwang 的參考2這篇文章的，有些內容該參考文章中寫的比我的詳細一些，我相當於是按照這位網友的步驟，重新把坑又踩了一遍。下面我會把容易出坑的地方在給大家總結一下：

1、正式使用webpack

命令：npx webpack src/main.js --output dist/bundle.js

該命令適用於webpack4.x

2、Babel的安裝與配置

babel-loader@8+會與當前的webpack版本沖突，推薦使用babel-loader@7.1.5
babel-preset-es2015和babel-preset-env很有意思，大家可以研究下

3、一切皆模塊，資源管理 css module

把css-loader版本降到2.1.1之后，可以指定css的類名格式

卸載（刪除）命令：npm uninstalll --save-dev css-loader

下載命令： npm installl --save-dev css-loader@2.1.1

4、產品構建階段：

package.json下scripts腳本build值，Windows下設置為"set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress"
優化插件UglifyJsPlugin，webpack4+已經不是內置的，需要npm install。
extract-text-webpack-plugin@4.0.0-beta.0，使用這個版本，兼容webpack4+
去除build文件中的殘余文件，引入定義方式為const { CleanWebpackPlugin } = require('clean-webpack-plugin')，不要用const CleanWebpackPlugin = require('clean-webpack-plugin')，並注意plugins。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Webpack入門 webpack入門 webpack 使用優化指南 [轉]webpack 使用優化指南 webpack4入門 webpack入門--前端必備 webpack——快速入門【一】 webpack基礎入門【webpack】-- 入門與解析 Android Studio 入門指南

webpack入門指南（基於webpack v4.41.2）

一、使用webpack之前的准備工作

二、開始使用webpack

1、創建練習文件夾，本人將該文件夾命名為webpackTest(根目錄)，並通過CMD進入該文件夾下

2、創建package.json文件及安裝webpack

3、初始文件設置

4、正式使用webpack

5、通過配置文件使用webpack

6、更便捷的執行打包任務：NPM腳本（NPM Scripts）

7、生成source maps(使調試更容易)

8、使用webpack構建本地服務器

9、loader

10、Babel的安裝與配置

11、一切皆模塊，資源管理

Css module

CSS預處理器

12、插件（Plugins）

使用插件的方法

HtmlWebpackPlugin

Hot Module Replacement

13、產品階段的構建

優化插件

緩存

去除build文件中的殘余文件

三、總結

免責聲明！

去除`build`文件中的殘余文件