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

時間  2020-07-07
標籤 webpack 入門 指南 基於 v4.41.2 简体版
原文   原文鏈接

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

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

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

1、使用webpack以前的準備工做

在開始以前，請確保安裝了 node.js的最新版本。這裏給你們推薦http://www.javashuo.com/article/p-mpdcimfc-hw.html，你們能夠經過這篇文章來安裝node.js並進行環境變量配置。前端

2、開始使用webpack

一、建立練習文件夾，本人將該文件夾命名爲webpackTest(根目錄)，並經過CMD進入該文件夾下

二、建立package.json文件及安裝webpack

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

命令：npm init -ynode

運行結果：react

 目錄結構：webpack

 代碼內容：web

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

運行結果：

 

目錄結構：

 三、初始文件設置

在根目錄下建立兩個文件夾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());

四、正式使用webpack

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

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

運行結果：

 

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

目錄結構：

頁面結果：

 

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

五、經過配置文件使用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

運行結果：

 六、更便捷的執行打包任務：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)，以及許多其餘加強功能。

七、生成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"//打包後輸出文件的文件名
    }
}

八、使用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

運行結果：

頁面結果：

 九、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;
};

十、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打包:

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

 

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

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。

十二、插件（Plugins）

插件（Plugins）是用來拓展Webpack功能的，它們會在整個構建過程當中生效，執行相關的任務。Loaders和Plugins經常被弄混，可是他們實際上是徹底不一樣的東西，能夠這麼來講，loaders是在打包構建過程當中用來處理源文件的（JSX，Scss，Less..），一次處理一個，插件並不直接操做單個文件，它直接對整個構建過程其做用。Webpack有不少內置插件，同時也有不少第三方插件，可讓咱們完成更加豐富的功能。

使用插件的方法

要使用某個插件，咱們須要經過npm安裝它，而後要作的就是在webpack的配置文件webpack.config.js中的plugins關鍵字部分添加該插件的一個實例（plugins是一個數組）繼續上面的例子，咱們添加了一個給打包後代碼添加版權聲明的插件。

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

運行結果：

 

 

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

  1. 移除dist文件夾，利用此插件，index.html文件會自動生成，此外CSS已經經過前面的操做打包到JS中了
  2. 在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>
  3. 更新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也很簡單，只須要作兩項配置：

  1. 在webpack配置文件中添加HMR插件
  2. 在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時，能夠熱加載模塊了,每次保存就能在瀏覽器上看到更新內容。

1三、產品階段的構建

目前爲止，咱們已經使用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()
    ],
    ······
};

3、總結

本文主要是參考網友zhangwang 的參考2這篇文章的，有些內容該參考文章中寫的比個人詳細一些，我至關因而按照這位網友的步驟，從新把坑又踩了一遍。下面我會把容易出坑的地方在給你們總結一下：

一、正式使用webpack

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

該命令適用於webpack4.x

二、Babel的安裝與配置

  1. babel-loader@8+會與當前的webpack版本衝突，推薦使用babel-loader@7.1.5
  2. babel-preset-es2015和babel-preset-env頗有意思，你們能夠研究下

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

把css-loader版本降到2.1.1以後，能夠指定css的類名格式

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

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

四、產品構建階段：

  1. package.json下scripts腳本build值，Windows下設置爲"set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress"
  2. 優化插件UglifyJsPlugin，webpack4+已經不是內置的，須要npm install。
  3. extract-text-webpack-plugin@4.0.0-beta.0，使用這個版本，兼容webpack4+
  4. 去除build文件中的殘餘文件，引入定義方式爲const { CleanWebpackPlugin } = require('clean-webpack-plugin')，不要用const  CleanWebpackPlugin  = require('clean-webpack-plugin')，並注意plugins。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程