webpack4.0實(shí)戰(zhàn)那些事兒

褰辯話發(fā)布于2019-08-22 15:55 / 2960人閱讀

摘要：剛剛發(fā)布，官網(wǎng)自稱最大的特點(diǎn)就是零配置。本文就詳細(xì)介紹一下實(shí)戰(zhàn)那些事兒。自動(dòng)刷新監(jiān)聽本地源代碼的變化，自動(dòng)重新構(gòu)建刷新瀏覽器。自動(dòng)發(fā)布更新完代碼后，自動(dòng)構(gòu)建出線上發(fā)布代碼并傳輸給發(fā)布系統(tǒng)。代碼塊，一個(gè)由多個(gè)模塊組合而成，用于代碼合并與分割。

webpack4.0剛剛發(fā)布，官網(wǎng)自稱4.0最大的特點(diǎn)就是零配置。本文就詳細(xì)介紹一下webpack4.0實(shí)戰(zhàn)那些事兒。

1 什么是WebPack

打包機(jī)

WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。

構(gòu)建

構(gòu)建就是把源代碼轉(zhuǎn)換成發(fā)布到線上的可執(zhí)行 JavaScrip、CSS、HTML 代碼，包括如下內(nèi)容。

代碼轉(zhuǎn)換：TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS 等。

文件優(yōu)化：壓縮 JavaScript、CSS、HTML 代碼，壓縮合并圖片等。

代碼分割：提取多個(gè)頁面的公共代碼、提取首屏不需要執(zhí)行部分的代碼讓其異步加載。

模塊合并：在采用模塊化的項(xiàng)目里會(huì)有很多個(gè)模塊和文件，需要構(gòu)建功能把模塊分類合并成一個(gè)文件。

自動(dòng)刷新：監(jiān)聽本地源代碼的變化，自動(dòng)重新構(gòu)建、刷新瀏覽器。

代碼校驗(yàn)：在代碼被提交到倉庫前需要校驗(yàn)代碼是否符合規(guī)范，以及單元測(cè)試是否通過。

自動(dòng)發(fā)布：更新完代碼后，自動(dòng)構(gòu)建出線上發(fā)布代碼并傳輸給發(fā)布系統(tǒng)。

構(gòu)建其實(shí)是工程化、自動(dòng)化思想在前端開發(fā)中的體現(xiàn)，把一系列流程用代碼去實(shí)現(xiàn)，讓代碼自動(dòng)化地執(zhí)行這一系列復(fù)雜的流程。構(gòu)建給前端開發(fā)注入了更大的活力，解放了我們的生產(chǎn)力。

2 快速配置 1 核心概念

Entry：入口，Webpack 執(zhí)行構(gòu)建的第一步將從 Entry 開始，可抽象成輸入。

Module：模塊，在 Webpack 里一切皆模塊，一個(gè)模塊對(duì)應(yīng)著一個(gè)文件。Webpack 會(huì)從配置的 Entry 開始遞歸找出所有依賴的模塊。

Chunk：代碼塊，一個(gè) Chunk 由多個(gè)模塊組合而成，用于代碼合并與分割。

Loader：模塊轉(zhuǎn)換器，用于把模塊原內(nèi)容按照需求轉(zhuǎn)換成新內(nèi)容。

Plugin：擴(kuò)展插件，在 Webpack 構(gòu)建流程中的特定時(shí)機(jī)注入擴(kuò)展邏輯來改變構(gòu)建結(jié)果或做你想要的事情。

Output：輸出結(jié)果，在 Webpack 經(jīng)過一系列處理并得出最終想要的代碼后輸出結(jié)果。

2 webpack的工作流程

1 Webpack 啟動(dòng)后會(huì)從Entry里配置的Module開始遞歸解析 Entry 依賴的所有 Module。

2 每找到一個(gè) Module，就會(huì)根據(jù)配置的Loader去找出對(duì)應(yīng)的轉(zhuǎn)換規(guī)則，對(duì) Module 進(jìn)行轉(zhuǎn)換后，再解析出當(dāng)前 Module 依賴的 Module。

3 這些模塊會(huì)以 Entry 為單位進(jìn)行分組，一個(gè) Entry 和其所有依賴的 Module 被分到一個(gè)組也就是一個(gè) Chunk。

4 最后 Webpack 會(huì)把所有 Chunk 轉(zhuǎn)換成文件輸出。在整個(gè)流程中 Webpack 會(huì)在恰當(dāng)?shù)臅r(shí)機(jī)執(zhí)行 Plugin 里定義的邏輯。

3 配置webpack 1) 初始化npm

npm init -y

在要進(jìn)行打包的目錄下初始化npm, 在控制臺(tái)執(zhí)行以上命令后會(huì)生成一個(gè)package.json的文件。

2) install

npm install webpack webpack-cli -D

因?yàn)閺?.0開始，webpack拆分開兩個(gè)包分別是webpack和webpack-cli

3) 配置文件webpack.config.js

module.exports = {
    entry：配置入口文件的地址
    output：配置出口文件的地址
    module：配置模塊,主要用來配置不同文件的加載器
    plugins：配置插件
    devServer：配置開發(fā)服務(wù)器
}

接下來我們就一一介紹一下它們的配置。

3 配置開發(fā)服務(wù)器 1 install

npm install webpack-dev-server -D

2 配置參數(shù)

devServer:{
    contentBase:path.resolve(__dirname,"dist"),// 配置開發(fā)服務(wù)運(yùn)行時(shí)的文件根目錄
    host:"localhost",// 開發(fā)服務(wù)器監(jiān)聽的主機(jī)地址
    compress:true,   // 開發(fā)服務(wù)器是否啟動(dòng)gzip等壓縮
    port:8080        // 開發(fā)服務(wù)器監(jiān)聽的端口
}

3 配置啟動(dòng)參數(shù)

"scripts": {
    "dev": "webpack-dev-server --open --mode development "
}

note

從4.0開始，運(yùn)行webpack時(shí)一定要加參數(shù) --mode development 或者--mode production,分別對(duì)應(yīng)開發(fā)環(huán)境和生產(chǎn)環(huán)境。

4 配置module 1 什么是loader

module主要用來配置不同文件的加載器。談到加載就離不開loader,那什么是loader呢？

loader的概念

通過使用不同的Loader，Webpack可以要把不同的文件都轉(zhuǎn)成JS文件,比如CSS、ES6/7、JSX等。

test：匹配處理文件的擴(kuò)展名的正則表達(dá)式

use：loader名稱，就是你要使用模塊的名稱

include/exclude:手動(dòng)指定必須處理的文件夾或屏蔽不需要處理的文件夾

query：為loaders提供額外的設(shè)置選項(xiàng)

loader的三種寫法

use

loader

use+loader

2 支持加載css文件

install

npm install style-loader css-loader -D

配置加載器

module: {
    rules:[
       {
            test:/.css$/,
            use:["style-loader","css-loader"],
            include:path.join(__dirname,"./src"),
            exclude:/node_modules/
       }        
    ]
}

note

注意：加載器的加載順序?yàn)閺挠抑磷?。即先?b>css-loader解析然后用style-loader將解析后的css文件添加到Head標(biāo)簽中。

3 支持圖片

install

npm install file-loader url-loader html-withimg-loader -D

file-loader 解決CSS等文件中的引入圖片路徑問題

url-loader 當(dāng)圖片較小的時(shí)候會(huì)把圖片BASE64編碼，大于limit參數(shù)的時(shí)候還是使用file-loader 進(jìn)行拷貝

配置加載器

{
    test: /.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)$/,
    loader: {
        loader: "url-loader",
        options: {
            limit: 5 * 1024,// 圖片大小 > limit 使用file-loader, 反之使用url-loader
            outputPath: "images/"http:// 指定打包后的圖片位置
        }
    }
}

usage - 手動(dòng)添加圖片

let logo = require("./images/logo.png");
let img = new Image();
img.src = logo;
document.body.appendChild(img);

usage - 在CSS中引入圖片

.img-bg{
    background: url(./images/logo.png);
    width:173px;
    height:66px;
}

usage - 在HTML中使用圖片

{
    test:/.(html|html)$/,
    use:"html-withimg-loader",
    include:path.join(__dirname,"./src"),
    exclude:/node_modules/
}

4 編譯less 和 sass 1) install

npm install less less-loader node-sass sass-loader -D

2) 配置加載器

把編譯好的代碼放到head里面

{
    test: /.css$/,
    loader: ["style-loader", "css-loader"]
}, {
    test: /.less$/,
    loader: ["style-loader", "css-loader"]
}, {
    test: /.scss$/,
    loader: ["style-loader", "css-loader"]
}

把編譯好的代碼放到多帶帶的文件里面

const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");
let cssExtract = new ExtractTextWebpackPlugin("css.css");
let lessExtract = new ExtractTextWebpackPlugin("less.css");
let sassExtract = new ExtractTextWebpackPlugin("sass.css");
...
{
    test: /.css$/,
    loader: cssExtract.extract({
        use: ["css-loader?minimize"]
    })
}, {
    test: /.less$/,
    loader: lessExtract.extract({
        use: ["css-loader?minimize", "less-loader"]
    })
}, {
    test: /.scss$/,
    loader: sassExtract.extract({
        use: ["css-loader?minimize", "sass-loader"]
    })
}

5 處理CSS3屬性前綴

為了瀏覽器的兼容性，有時(shí)候我們必須加入-webkit,-ms,-o,-moz這些前綴

Trident內(nèi)核：主要代表為IE瀏覽器, 前綴為-ms

Gecko內(nèi)核：主要代表為Firefox, 前綴為-moz

Presto內(nèi)核：主要代表為Opera, 前綴為-o

Webkit內(nèi)核：產(chǎn)要代表為Chrome和Safari, 前綴為-webkit

install

npm install postcss-loader autoprefixer -D

usage

postcss-loader 需要配置 postcss.config.js文件,postcss.config.js 內(nèi)容如下：

 module.exports = {
    plugins: [
        require("autoprefixer")
    ]
}

// 把 post-laoder push 到css的loader數(shù)組中
 {
    test: /.css$/,
    loader: ["style-loader", "css-loader", "postcss-loader"]
}, {
    test: /.less$/,
    loader: ["style-loader", "css-loader", "less-loader"]
}, {
    test: /.scss$/,
    loader: ["style-loader", "css-loader", "sass-loader"]
}

6 轉(zhuǎn)義ES6/ES7/JSX

Babel其實(shí)是一個(gè)編譯JavaScript的平臺(tái),可以把ES6/ES7,React的JSX轉(zhuǎn)義為ES5。

install

npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-react -D

配置加載器

{
    test:/.jsx?$/,
    use: {
        loader: "babel-loader",
        options: {
            presets: ["env","stage-0","react"]// env --> es6, stage-0 --> es7, react --> react
        }
    },
    include:path.join(__dirname,"./src"),
    exclude:/node_modules/
}

5 配置plugins

配置插件

1 自動(dòng)產(chǎn)出html

我們希望自動(dòng)能產(chǎn)出HTML文件，并在里面引入產(chǎn)出后的資源。

install

npm install html-webpack-plugin -D

usage

const HtmlWebpackPlugin = require("html-webpack-plugin");
plugins: [
    new HtmlWebpackPlugin({
        template: "./src/index.html",   // 指定產(chǎn)出的模板
        filename: "base.html",          // 產(chǎn)出的文件名
        chunks: ["common", "base"],     // 在產(chǎn)出的HTML文件里引入哪些代碼塊
        hash: true,                     // 名稱是否哈希值
        title: "base",                  // 可以給模板設(shè)置變量名，在html模板中調(diào)用 htmlWebpackPlugin.options.title 可以使用
        minify: {                       // 對(duì)html文件進(jìn)行壓縮
            removeAttributeQuotes: true // 移除雙引號(hào)
        }
    })
]

2 分離CSS

因?yàn)镃SS的下載和JS可以并行,當(dāng)一個(gè)HTML文件很大的時(shí)候，我們可以把CSS多帶帶提取出來加載

install

npm install extract-text-webpack-plugin@next -D

usage

const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");
let cssExtract = new ExtractTextWebpackPlugin("css.css");
let lessExtract = new ExtractTextWebpackPlugin("less.css");
let sassExtract = new ExtractTextWebpackPlugin("sass.css");

...

module: {
    rules: [
         {
            test: /.css$/,
            loader: cssExtract.extract({
                use: ["css-loader?minimize"]
            })
        }, {
            test: /.less$/,
            loader: lessExtract.extract({
                use: ["css-loader?minimize", "less-loader"]
            })
        }, {
            test: /.scss$/,
            loader: sassExtract.extract({
                use: ["css-loader?minimize", "sass-loader"]
            })
        }
    ]
}

...

plugins: [
    cssExtract,
    lessExtract,
    sassExtract
]

處理圖片路徑問題

const PUBLIC_PATH="/";

output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath:PUBLIC_PATH
}

3 拷貝靜態(tài)文件

有時(shí)項(xiàng)目中沒有引用的文件也需要打包到目標(biāo)目錄

install

npm install copy-webpack-plugin -D

usage

const CopyWebpackPlugin = require("copy-webpack-plugin");
    plugins: [
        new CopyWebpackPlugin([{
            from: path.join(__dirname, "public"),       // 從哪里復(fù)制
            to: path.join(__dirname, "dist", "public")  // 復(fù)制到哪里
    }])
]

4 打包前先清空輸出目錄

install

npm install  clean-webpack-plugin -D

usage

const CleanWebpackPlugin = require("clean-webpack-plugin");
plugins: [
    new CleanWebpackPlugin([path.join(__dirname, "dist")])
]

5 壓縮JS

install

npm install uglifyjs-webpack-plugin -D

usage

onst UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");
plugins: [
    new UglifyjsWebpackPlugin()
]

6 如何調(diào)試打包后的代碼

webapck通過配置可以自動(dòng)給我們source maps文件，map文件是一種對(duì)應(yīng)編譯文件和源文件的方法

usage

devtool:"eval-source-map"

devtool的參數(shù)詳解

source-map 把映射文件生成到多帶帶的文件，最完整最慢

cheap-module-source-map 在一個(gè)多帶帶的文件中產(chǎn)生一個(gè)不帶列映射的Map

eval-source-map 使用eval打包源文件模塊,在同一個(gè)文件中生成完整sourcemap

cheap-module-eval-source-map sourcemap和打包后的JS同行顯示，沒有映射列

7 打包第三方類庫 1 直接引入

import _ from "lodash";
alert(_.join(["a","b","c"],"@"));

2 插件引入

new webpack.ProvidePlugin({
    _:"lodash"
})

8 watch

當(dāng)代碼發(fā)生修改后可以自動(dòng)重新編譯

 watch: true,
    watchOptions: {
        ignored: /node_modules/, //忽略不用監(jiān)聽變更的目錄
        aggregateTimeout: 500,  // 文件發(fā)生改變后多長(zhǎng)時(shí)間后再重新編譯（Add a delay before rebuilding once the first file changed ）
        poll:1000               //每秒詢問的文件變更的次數(shù)
    }

9 服務(wù)器代理

如果你有多帶帶的后端開發(fā)服務(wù)器 API，并且希望在同域名下發(fā)送 API 請(qǐng)求，那么代理某些 URL 會(huì)很有用。

//請(qǐng)求到 /api/users 現(xiàn)在會(huì)被代理到請(qǐng)求 http://localhost:9000/api/users。
proxy: {
    "/api": "http://localhost:9000",
}

10 resolve解析 1 extensions

指定extension之后可以不用在require或是import的時(shí)候加文件擴(kuò)展名,會(huì)依次嘗試添加擴(kuò)展名進(jìn)行匹配

resolve: {
    //自動(dòng)補(bǔ)全后綴，注意第一個(gè)必須是空字符串,后綴一定以點(diǎn)開頭
   extensions: ["",".js",".css",".json"],
},

2 alias

配置別名可以加快webpack查找模塊的速度

每當(dāng)引入jquery模塊的時(shí)候，它會(huì)直接引入jqueryPath,而不需要從node_modules文件夾中按模塊的查找規(guī)則查找

不需要webpack去解析jquery.js文件

const bootstrap = path.join(__dirname,"node_modules/bootstrap/dist/css/bootstrap.css");

resolve: {
    alias: {
        "bootstrap": bootstrap
    }
}

11 暴露全局對(duì)象

install

npm install expose-loader -D

action

把模塊的導(dǎo)出暴露給全局變量，

usage-1

require("expose-loader?libraryName!./file.js");

usage-2

rules: [{
    test: require.resolve("jquery"),// 注意 這里是require的resolve 方法
    use: {
        loader: "expose-loader",
        options: "$"
    }
}]

13 多入口

有時(shí)候我們的頁面可以不止一個(gè)HTML頁面，會(huì)有多個(gè)頁面，所以就需要多入口

usage

// 多個(gè)入口，可以給每個(gè)入口添加html模板
entry: {
    index: "./src/index.js",
    main:"./src/main.js"
},
output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[hash].js",
    publicPath:PUBLIC_PATH
},

plugins: [
    new HtmlWebpackPlugin({
        minify: {
            removeAttributeQuotes:true
        },
        hash: true,
        template: "./src/index.html",
        chunks:["index"],
        filename:"index.html"
    }),
    new HtmlWebpackPlugin({
        minify: {
            removeAttributeQuotes:true
        },
        hash: true,
        chunks:["login"],
        template: "./src/login.html",
        filename:"login.html"
    })]
]

14 externals

如果我們想引用一個(gè)庫，但是又不想讓webpack打包，并且又不影響我們?cè)诔绦蛑幸訡MD、AMD或者window/global全局等方式進(jìn)行使用，那就可以通過配置externals。

webpack.config.js

externals: {
    jquery: "jQuery"
    //如果要在瀏覽器中運(yùn)行，那么不用添加什么前綴，默認(rèn)設(shè)置就是global
},

index.js

const $ = require("jquery");
const $ = window.jQuery;

15 參考文章

webpack官方文檔

webpack官方文檔中文版

webpackGitHub

云服務(wù)器 GPU云服務(wù)器回事兒那些云計(jì)算有那些 cdn那些意思

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93862.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

褰辯話

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Docker安裝QuestDB教程

閱讀 3887·2021-11-24 09:39
#11.11#A400互聯(lián)：全場(chǎng)VPS季付5折優(yōu)惠，洛杉磯聯(lián)通9929線路/香港CN2+移動(dòng)CMI線

閱讀 1864·2021-11-02 14:41
原生js寫一個(gè)無縫輪播圖插件(支持vue)

閱讀 861·2019-08-30 15:53
使用iscroll4可能會(huì)遇到的問題(轉(zhuǎn)：記錄)

閱讀 3521·2019-08-29 12:43
css H5端多行文本實(shí)現(xiàn)省略號(hào)

閱讀 1257·2019-08-29 12:31
【Copy攻城獅日志】"Error: if there's nested dat

閱讀 3129·2019-08-26 13:50
解決ios下的視頻的最后一楨問題

閱讀 846·2019-08-26 13:45
原生開發(fā)、H5開發(fā)和混合開發(fā)的區(qū)別

閱讀 1048·2019-08-26 10:56

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

webpack4.0實(shí)戰(zhàn)那些事兒

相關(guān)文章

webpack4.0優(yōu)化那些事兒

webpack 基礎(chǔ)與項(xiàng)目?jī)?yōu)化實(shí)踐總結(jié)

你該知道的ES6那些事兒

Coding UI 測(cè)試的那些事兒

發(fā)表評(píng)論

0條評(píng)論

褰辯話

男|高級(jí)講師

TA的文章

Docker安裝QuestDB教程

#11.11#A400互聯(lián)：全場(chǎng)VPS季付5折優(yōu)惠，洛杉磯聯(lián)通9929線路/香港CN2+移動(dòng)CMI線

原生js寫一個(gè)無縫輪播圖插件(支持vue)

使用iscroll4可能會(huì)遇到的問題(轉(zhuǎn)：記錄)

css H5端多行文本實(shí)現(xiàn)省略號(hào)

【Copy攻城獅日志】"Error: if there's nested dat

解決ios下的視頻的最后一楨問題

原生開發(fā)、H5開發(fā)和混合開發(fā)的區(qū)別

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

webpack4.0實(shí)戰(zhàn)那些事兒

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！