webpack使用學(xué)習(xí)

本分享學(xué)習(xí)借鑒webpack中文官網(wǎng)庐舟，官網(wǎng)鏈接(中文文檔)：https://www.webpackjs.com

此教程本人demo 地址(develop分支代碼)：https://github.com/coffeelife/WebpackStudy/tree/develop

使用github Demo教程

git clone https://github.com/coffeelife/WebpackStudy.git
cd WebpackStudy
npm install
webpack//安裝了webpack的前提下
webpack-dev-server//安裝了webpack-dev-server的情況下咆疗，在瀏覽器localhost:8080/dist/index.html查看效果

5cac4aeae47e4

概念

本質(zhì)上蹋宦，webpack是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)苍匆。當(dāng) webpack 處理應(yīng)用程序時只洒，它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph)纵苛，其中包含應(yīng)用程序需要的每個模塊玉吁，然后將所有這些模塊打包成一個或多個bundle照弥。

四個核心概念

• 入口(entry)
• 輸出(output)
• loader
• 插件(plugins)

入口(entry)

入口起點(entry point)指示 webpack 應(yīng)該使用哪個模塊，來作為構(gòu)建其內(nèi)部依賴圖的開始进副。進入入口起點后这揣，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的∮鞍撸可以通過在webpack 配置中配置entry屬性给赞，來指定一個入口起點（或多個入口起點）。默認值為./src矫户。

單入口模式

用法：entry: string|Array<string>

webpack.config.js

//簡寫
module.exports = {
  entry: './path/to/my/entry/file.js'
};

module.exports = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

多入口模式

用法：entry: {[entryChunkName: string]: string|Array<string>}

webpack.config.js

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

根據(jù)經(jīng)驗：每個 HTML 文檔只使用一個入口起點片迅。

出口(output)

用法(Usage)

output屬性告訴 webpack 在哪里輸出它所創(chuàng)建的bundles，以及如何命名這些文件皆辽，默認值為./dist柑蛇〗嬲酰基本上，整個應(yīng)用程序結(jié)構(gòu)耻台，都會被編譯到你指定的輸出路徑的文件夾中空免。你可以通過在配置中指定一個output字段，來配置這些處理過程盆耽。

在 webpack 中配置output屬性的最低要求是蹋砚，將它的值設(shè)置為一個對象，包括以下兩點：

• filename用于輸出文件的文件名摄杂。
• 目標輸出目錄path的絕對路徑坝咐。

單入口起點

webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

我們通過output.filename和output.path屬性，來告訴 webpack bundle 的名稱析恢，以及我們想要 bundle 生成(emit)到哪里墨坚。

多入口起點

webpack.config.js

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}
//寫入到硬盤：./dist/app.js, ./dist/search.js

如果配置創(chuàng)建了多個單獨的 "chunk"（例如，使用多個入口起點或使用像 CommonsChunkPlugin 這樣的插件）氮昧，則應(yīng)該使用占位符(substitutions)來確保每個文件具有唯一的名稱框杜。

模式(mode)

用法

只在配置中提供mode選項：

module.exports = {
  mode: 'production'
};

或者從CLI參數(shù)中傳遞：

webpack --mode=production

mode: development

// webpack.development.config.js
module.exports = {
+ mode: 'development'
- plugins: [
-   new webpack.NamedModulesPlugin(),
-   new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}

mode: production

// webpack.production.config.js
module.exports = {
+  mode: 'production',
-  plugins: [
-    new UglifyJsPlugin(/* ... */),
-    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    new webpack.NoEmitOnErrorsPlugin()
-  ]
}

loader

loader 用于對模塊的源代碼進行轉(zhuǎn)換振劳。loader 可以使你在import或"加載"模塊時預(yù)處理文件椎组。因此，loader 類似于其他構(gòu)建工具中“任務(wù)(task)”历恐，并提供了處理前端構(gòu)建步驟的強大方法寸癌。loader 可以將文件從不同的語言（如 TypeScript）轉(zhuǎn)換為 JavaScript，或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為 data URL弱贼。loader 甚至允許你直接在 JavaScript 模塊中importCSS文件蒸苇！

安裝

npm install --save-dev css-loader
npm install --save-dev ts-loader

webpack.config.js

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

指示 webpack 對每個.css使用css-loader，以及對所有.ts文件使用ts-loader：

使用loader

在你的應(yīng)用程序中吮旅，有三種使用 loader 的方式：

• 配置（推薦）：在webpack.config.js文件中指定 loader溪烤。
• 內(nèi)聯(lián)：在每個import語句中顯式指定 loader。
• CLI：在 shell 命令中指定它們庇勃。

配置(Configuration)

module.rules允許你在 webpack 配置中指定多個 loader檬嘀。 這是展示 loader 的一種簡明方式，并且有助于使代碼變得簡潔责嚷。同時讓你對各個 loader 有個全局概覽：

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

內(nèi)聯(lián)

可以在import語句或任何等效于 "import" 的方式中指定 loader鸳兽。使用!將資源中的 loader 分開。分開的每個部分都相對于當(dāng)前目錄解析罕拂。

import Styles from 'style-loader!css-loader?modules!./styles.css';

通過前置所有規(guī)則及使用!揍异，可以對應(yīng)覆蓋到配置中的任意 loader全陨。

選項可以傳遞查詢參數(shù)，例如?key=value&foo=bar衷掷，或者一個 JSON 對象烤镐，例如?{"key":"value","foo":"bar"}。

盡可能使用module.rules棍鳖，因為這樣可以減少源碼中的代碼量炮叶，并且可以在出錯時，更快地調(diào)試和定位 loader 中的問題渡处。

CLI

你也可以通過 CLI 使用 loader：

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

這會對.jade文件使用jade-loader镜悉，對.css文件使用style-loader和css-loader。

loader特性

loader 通過（loader）預(yù)處理函數(shù)医瘫，為 JavaScript 生態(tài)系統(tǒng)提供了更多能力侣肄。 用戶現(xiàn)在可以更加靈活地引入細粒度邏輯，例如壓縮醇份、打包稼锅、語言翻譯和其他更多。

• loader 支持鏈式傳遞僚纷。能夠?qū)Y源使用流水線(pipeline)矩距。一組鏈式的 loader 將按照相反的順序執(zhí)行。loader 鏈中的第一個 loader 返回值給下一個 loader怖竭。在最后一個 loader锥债，返回 webpack 所預(yù)期的 JavaScript。
• loader 可以是同步的痊臭，也可以是異步的哮肚。
• loader 運行在 Node.js 中，并且能夠執(zhí)行任何可能的操作广匙。
• loader 接收查詢參數(shù)允趟。用于對 loader 傳遞配置。
• loader 也能夠使用options對象進行配置鸦致。
• 除了使用package.json常見的main屬性盆犁，還可以將普通的 npm 模塊導(dǎo)出為 loader益楼，做法是在package.json里定義一個loader字段糜芳。
• 插件(plugin)可以為 loader 帶來更多特性工禾。
• loader 能夠產(chǎn)生額外的任意文件。

插件(plugins)

插件是 webpack 的支柱功能鳍寂。webpack 自身也是構(gòu)建于改含，你在 webpack 配置中用到的相同的插件系統(tǒng)之上！插件目的在于解決loader無法實現(xiàn)的其他事迄汛。

剖析

webpack插件是一個具有apply屬性的 JavaScript 對象捍壤。apply屬性會被 webpack compiler 調(diào)用骤视，并且 compiler 對象可在整個編譯生命周期訪問。

ConsoleLogOnBuildWebpackPlugin.js

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
    apply(compiler) {
        compiler.hooks.run.tap(pluginName, compilation => {
            console.log("webpack 構(gòu)建過程開始鹃觉！");
        });
    }
}

compiler hook 的 tap 方法的第一個參數(shù)专酗，應(yīng)該是駝峰式命名的插件名稱。建議為此使用一個常量盗扇，以便它可以在所有 hook 中復(fù)用祷肯。

用法

由于插件可以攜帶參數(shù)/選項，你必須在 webpack 配置中疗隶，向plugins屬性傳入new實例佑笋。

根據(jù)你的 webpack 用法，這里有多種方式使用插件斑鼻。

配置

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通過 npm 安裝
const webpack = require('webpack'); //訪問內(nèi)置的插件
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

項目使用webpack

本項目使用yarn操作蒋纬，mac下新建目錄WebpackStudy目錄

初始化項目

yarn init

選項一直enter，init操作之后生成package.json和yarn.lock文件

package.json

{
  "name": "WebpackStudy",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

項目下安裝使用webpack

安裝配置

通過yarn全局安裝webpack,這里我直接安裝的是最新版的

yarn global add webpack
yarn global add webpack-cli
webpack -v //輸出webpack版本號說明成功

package.json

"dependencies": {
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0"
  }

新建webpack.config.js

新建webpack.config.js文件并將下面的代碼拷入文件中

const path = require("path");

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

entry表示入口文件坚弱，此處新建src目錄蜀备，并在該目錄下新建一個index.js文件，作為打包文件的入口文件

output表示出口文件荒叶，path表示輸出文件的目錄碾阁，path.resolve表示輸出文件目錄的解析,__dirname表示當(dāng)前目錄(注意是雙_)，dist表示輸出文件的目錄停撞，filename表示輸出文件的名稱

當(dāng)前文件目錄結(jié)構(gòu)

5cb4323402393

執(zhí)行打包語句

webpack//全局安裝運行
node_modules/.bin/webpack//非全局安裝下使用

如果全局安裝的話直接執(zhí)行webpack就可以瓷蛙，如果不是的話執(zhí)行node_modules下的.bin下的webpack，執(zhí)行完就發(fā)現(xiàn)目錄多了dist文件目錄和該目錄下的index.js

注意提示(這里我在config文件中添加了mode:none再次運行沒有該提示了)

5cb4357f33afb

localhost:WebpackStudy gm$ webpack
Hash: 99630336d25493823585
Version: webpack 4.30.0
Time: 61ms
Built at: 2019-04-15 15:41:00
   Asset      Size  Chunks             Chunk Names
index.js  3.57 KiB       0  [emitted]  main
Entrypoint main = index.js
[0] ./src/js/index.js 0 bytes {0} [built]

同樣可以編輯index.js戈毒，運行webpack查看編譯文件變化。

使用HtmlWebpackPlugin

該插件用來打包html文件横堡，直接在官網(wǎng)搜索該插件就有教程埋市，鏈接網(wǎng)址：https://webpack.js.org/plugins/html-webpack-plugin/#root

github詳細說明網(wǎng)址：https://github.com/jantimon/html-webpack-plugin#options

安裝HtmlWebpackPlugin

yarn add html-webpack-plugin --dev

配置webpack.config.js文件

webpack.config.js

const path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin');//引入插件

module.exports = {
  mode: "none",
  entry: "./src/js/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js"
  },
  plugins: [new HtmlWebpackPlugin()]//引入插件
};

打包

webpack

運行之后發(fā)現(xiàn)在dist目錄下生成一個默認的index.html，并自動引入index.js文件命贴，代碼如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="index.js"></script></body>
</html>

配置屬性(常用)

webpack.config.js

plugins: [new HtmlWebpackPlugin({
      title: 'MyApp',
      filename: 'index.html'
      template: "src/index.html"
  })]

此處我們將原來建好的index.html文件添加一些內(nèi)容

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewPort" content="width=device-width,initial-scale=1">
        <meta name="author" content="gm">
        <title>WebpackStudy</title>
    </head>
    <body>
        <div>WebpackStudy</div>
    </body>
</html>

運行webpack進行文件打包葬项，會發(fā)現(xiàn)dist下的index.html文檔變成自己編寫的文件

安裝使用babel-loader

該loader用來打包腳本文件泞当，官網(wǎng)鏈接網(wǎng)址：https://webpack.js.org/loaders/babel-loader/#root

安裝babel-loader

yarn add babel-loader @babel/core @babel/preset-env --dev

安裝完成之后package.json文件如下,增加babel-loader解析腳本文件

webpack.config.js

"devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "babel-loader": "^8.0.5",
    "html-webpack-plugin": "^3.2.0"
  }

使用babel-loader

配置webpack.config.js

module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"]
          }
        }
      }
    ]
  }

rules表示處理規(guī)則；test表示處理文件的正則匹配文件民珍，這里表示.js文件襟士；exclude表示對該目錄下的文件不進行處理盗飒；use表示使用babel-loader進行處理。

安裝使用babel-present-react插件

使用babel-present-react來處理react文件

安裝

yarn add babel-preset-react --dev

安裝之后package.json文件修改為

package.json

"devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "babel-loader": "^8.0.5",
    "babel-preset-react": "^6.24.1",//增加這條
    "html-webpack-plugin": "^3.2.0"
  }

修改webpack.config.js陋桂，來處理react文件

webpack.config.js

module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env","react"]//此處增加react選項
          }
        }
      }
    ]
  },

將react添加到當(dāng)前項目中

yarn init//剛才執(zhí)行過逆趣，可以不執(zhí)行
yarn add react react-dom

運行該命令之后package.json文件增加react和react-dom

package.json

"dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0"
  }

將index.js文件修改修改為index.jsx，并參照react官網(wǎng)網(wǎng)址：https://react.docschina.org/ 添加內(nèi)容

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, Webpack!</h1>,
  document.getElementById('root')
);

并將index.html文件的div添加id="root"

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewPort" content="width=device-width,initial-scale=1">
        <meta name="author" content="gm">
        <title>WebpackStudy</title>
    </head>
    <body>
        <div id="root">WebpackStudy</div>
    </body>
</html>

修改webpack.config.js配置文件修改入口修改為index.jsx嗜历，并將babel-loader中的rules規(guī)則文件名改為.jsx

webpack.config.js

const path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "none",
  entry: "./src/js/index.jsx",//此處更改![5cb58851485eb](https://i.loli.net/2019/04/16/5cb58851485eb.png)
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js"
  },
  module: {
    rules: [
      {
        test: /\.m?jsx$/,//此處更改
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "react"]
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "MyApp",
      filename: "index.html",
      template: "src/index.html"
    })
  ]
};

點擊運行webpack之后會發(fā)現(xiàn)報錯(報錯截圖如下)宣渗，此處是由于babel-loader、babel-core梨州、babel-preset版本問題導(dǎo)致

5cb5886b939c2

5cb5887b734a8

此處需要將版本使用6.x的版本落包，解決辦法如下

yarn add babel-core@6.26.0 babel-loader@7.1.2 babel-preset-env@1.6.1 --dev

并將webpack.config.js文件，rules修改為以下內(nèi)容

module: {
    rules: [
      {
        test: /\.m?jsx$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["env", "react"]//將它修改為env使用低版本
          }
        }
      }
    ]
  }

在運行就會發(fā)現(xiàn)已經(jīng)打包成功摊唇，用瀏覽器打開就會發(fā)現(xiàn)內(nèi)容修改為Hello Webpack

5cb59a831c36b

.babelsrc文件配置

可以參考網(wǎng)址：https://excaliburhan.com/post/babel-preset-and-plugins.html

安裝使用css-loader和style-loader

該loader用來解析樣式文件咐蝇，css-loader官網(wǎng)網(wǎng)址：https://webpack.js.org/loaders/css-loader/#root，style-loader官網(wǎng)網(wǎng)址：https://webpack.js.org/loaders/style-loader/#root

安裝

yarn add css-loader style-loader --dev

安裝完成之后配置webpack.config.js文件

webpack.config.js

module: {
    rules: [
      {
        test: /\.m?jsx$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["env", "react"]
          }
        }
      },
      {//添加如下配置
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      }
    ]
  }

在目錄添加css目錄巷查，并創(chuàng)建index.css文件

5cb59e991690e

在index.css添加代碼

#root{
    color: red;
}

注意：此時運行webpack有序，發(fā)現(xiàn)樣式并不會生效，此時需要在.jsx文件中引入樣式文件

運行webpack,查看樣式變化岛请，文字變紅

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import '../css/index.css';//加入這一行

ReactDOM.render(
  <h1>Hello, Webpack!</h1>,
  document.getElementById('root')
);

css樣式加載優(yōu)化處理（使用ExtractTextWebpackPlugin）

如果這種方式引入旭寿，你會發(fā)現(xiàn)dist文件下，并沒有樣式文件崇败，在index.js搜索發(fā)現(xiàn)如下代碼

index.js

exports.push([module.i, "#root{\n    color: red;\n}", ""]);

根據(jù)html解析順序的話盅称，css需要等待所有的js代碼加載完成才會進行樣式加載，這樣頁面會有很大的一段白屏?xí)r間后室，接下來進行css樣式加載優(yōu)化處理缩膝。鏈接網(wǎng)址：https://blog.csdn.net/qq_39793127/article/details/78900707

安裝ExtractTextWebpackPlugin

yarn add extract-text-webpack-plugin --dev

使用ExtractTextWebpackPlugin

在webpack.config.js配置文件中引入該插件，并將css文件的打包方式改為ExtractTextWebpackPlugin插件的方式

webpack.config.js

const path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  mode: "none",
  entry: "./src/js/index.jsx",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js"
  },
  module: {
    rules: [
      ...//由于引入太多使用省略號隱藏
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    ...//由于引入太多使用省略號隱藏
    new ExtractTextPlugin("index.css")
  ]
};

5cb5a5d47bbb3

解決方法痛黎，安裝beta 版本

yarn add extract-text-webpack-plugin@next --dev

再次運行webpack，執(zhí)行成功刮吧，dist下增加index.css文件

打包Sass樣式文件(sass-loader)

現(xiàn)在進行sass文件進行打包湖饱，鏈接地址：https://webpack.js.org/plugins/extract-text-webpack-plugin/#extracting-sass-or-less

安裝sass-loader

yarn add sass-loader node-sass --dev

注意，sass-loader以來node-sass和webpack杀捻，使用sass-loader必須安裝另外兩個

在webpack.config.js配置rules規(guī)則井厌，依舊使用ExtractTextWebpackPlugin處理

webpack.config.js

{
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ["css-loader", "sass-loader"]
        })
      }

新建index.scss文件，并更改樣式文件，將背景更改為灰色旗笔，并將字體變成30px大小

index.scss

body{
    background: gray;
    #root{
        font-size: 30px;
    }
}

在index.jsx文件中引入index.scss樣式文件

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import '../css/index.css';
import '../css/index.scss';//添加這一行代碼

ReactDOM.render(
  <h1>Hello, Webpack!</h1>,
  document.getElementById('root')
);

運行webpack之后發(fā)現(xiàn)dist目錄下的index.css文件改變彪置，在網(wǎng)頁打開發(fā)現(xiàn)網(wǎng)頁北京變成灰色，字體變大

index.css

#root{
    color: red;
}
body {
    background: gray; 
}
body #root {
    font-size: 30px; 
}

5cb5abb1c85dc

安裝使用資源處理(file-loader和url-loader)

本文用file-loader的封裝url-loader蝇恶，url-loader類似于file-loader拳魁，但如果文件小于字節(jié)限制，則可以返回DataURL,file-loader官網(wǎng)鏈接：https://webpack.js.org/loaders/file-loader/#root撮弧，url_loader官網(wǎng)鏈接：https://webpack.js.org/loaders/url-loader/#root

安裝url-loader

yarn add file-loader url-loader --dev
//npm install url-loader --save-dev

注意：url-loader依賴于file-loader,所以file-loader也需要安裝

使用url-loader

配置webpack.config.js文件潘懊，在rules添加url-loader配置

webpack.config.js

{
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }

test表示匹配的后綴名，loader表示使用url-loader贿衍，option中的limit表示大于8k生成圖片授舟，小于8k生成DataURL，這里自己照一張圖片放入項目的image目錄下贸辈，執(zhí)行webpack會發(fā)現(xiàn)dist目錄下多了一張打包的圖片释树，修改index.scss的背景樣式，在瀏覽器查看效果

body{
    background: url(../image/test.jpg);
    background-size: 100%;
    #root{
        font-size: 30px;
    }
}

5cb5b169e13cb

使用字體文件font-awesome()

文字文件使用font-awesome擎淤，font-awesome官網(wǎng)地址：http://www.fontawesome.com.cn/faicons/

安裝font-awesome字體文件

yarn add font-awesome

使用font-awesome

在index.jsx文件中編寫奢啥，引入font-awesome里面的css文件，并在標簽上加入className屬性嘴拢，放入fontawesome的樣式

index.jsx

import React from "react";
import ReactDOM from "react-dom";
import "../css/index.css";
import "../css/index.scss";
import "font-awesome/css/font-awesome.min.css";//此處為添加代碼

ReactDOM.render(
  <div>
    <i className="fa fa-address-book"/>//此處為添加代碼
    <h1>Hello, Webpack!</h1>
  </div>,
  document.getElementById("root")
);

這時候運行webpack會如下錯誤桩盲，原因是打包配置里面沒有配置這些類型文件的解析，接下來我們直接用url-loader在rules中來進行字體文件的配置

5cb5bcec9faf5

webpack.config.js

{
        //font-awesome字體文件處理
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192
            }
          }
        ]
      }

5cb5bddfd2eca

公共模塊提出(CommonsChunkPlugin)

該插件是webpack內(nèi)部的插架赌结，直接在webpack.config.js直接配置就可以，直接配置

webpack.config.js

new webpack.optimize.CommonsChunkPlugin({
  name: 'commons',
  // (the commons chunk name)

  filename: 'commons.js',
  // (the filename of the commons chunk)

  // minChunks: 3,
  // (Modules must be shared between 3 entries)

  // chunks: ["pageA", "pageB"],
  // (Only use these entries)
});
//配置文件如果像上面這種配置的話孝冒，報異常：Error: webpack.optimize.CommonsChunkPlugin has //been removed, please use config.optimization.splitChunks instead.
//新版本配置在entry同目錄配置為
optimization: {
    //抽取公共的dm
    splitChunks: {
      cacheGroups: {
        commons: {
          name: "commons",
          chunks: "initial",
          minChunks: 2
        }
      }
    }
  }

配置介紹

// optimization: {
  //   splitChunks: {
  //     chunks: "initial",         // 必須三選一： "initial" | "all"(默認就是all) | "async"
  //     minSize: 0,                // 最小尺寸柬姚，默認0
  //     minChunks: 1,              // 最小 chunk ，默認1
  //     maxAsyncRequests: 1,       // 最大異步請求數(shù)迈倍， 默認1
  //     maxInitialRequests: 1,    // 最大初始化請求書伤靠，默認1
  //     name: () => {},              // 名稱，此選項課接收 function
  //     cacheGroups: {                 // 這里開始設(shè)置緩存的 chunks
  //       priority: "0",                // 緩存組優(yōu)先級 false | object |
  //       vendor: {                   // key 為entry中定義的 入口名稱
  //         chunks: "initial",        // 必須三選一： "initial" | "all" | "async"(默
  認就是異步)
  //         test: /react|lodash/,     // 正則規(guī)則驗證啼染，如果符合就提取 chunk
  //         name: "vendor",           // 要緩存的 分隔出來的 chunk 名稱
  //         minSize: 0,
  //         minChunks: 1,
  //         enforce: true,
  //         maxAsyncRequests: 1,       // 最大異步請求數(shù)， 默認1
  //         maxInitialRequests: 1,    // 最大初始化請求書焕梅，默認1
  //         reuseExistingChunk: true   // 可設(shè)置是否重用該chunk（查看源碼沒有發(fā)現(xiàn)默認值）
  //       }
  //     }
  //   }
  // }

使用webpack-dev-server

webpack-dev-server為您提供了一個簡單的Web服務(wù)器和使用實時重新加載的能力迹鹅。

安裝webpack-dev-server

yarn global add webpack-dev-server --dev
//安裝成功之后運行命令
webpack-dev-server//運行之后在瀏覽器打開localhost:8080查看

打開之后發(fā)現(xiàn)圖片和字體文件找不到，在output中添加pubicPath屬性贞言，這個屬性表示將index.html引入的css和資源文件都加上dist這層目錄斜棚，相當(dāng)于絕對路徑引入，打包之后訪問localhost:8080/dist/index.html,現(xiàn)在就可以直接訪問該網(wǎng)頁了，然后修改樣式或者內(nèi)容弟蚀，網(wǎng)頁會自動重新加載蚤霞。

webpack.config.js

output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/dist/",
    filename: "js/index.js"
  }
  ...
  devServer: {
      port:8086,
      contentBase: './dist'//這個跟publicPath屬性是一樣的作用
  }

此教程本人demo 地址(develop分支代碼)：[https://github.com/coffeelife/WebpackStudy/tree/develop]