章首發在我的個人博客：http://www.brandhuang.com/article/1586446191183

webpack基礎，自己配置 webpack 進行資源打包

這只是我個人學習整理的個人筆記，可以直接跳過前面去看文章中的「參考文章」

重要提示

紙上得來終覺淺，絕知此事要躬行

請一定動手敲一敲代碼，看一看效果

請一定動手敲一敲代碼，看一看效果

請一定動手敲一敲代碼，看一看效果

Webpack介紹

一個現代 JavaScript 應用程序的靜態模塊打包器，當 webpack 處理應用程序時，會遞歸構建一個依賴關系圖，其中包含應用程序需要的每個模塊，然后將這些模塊打包成一個或多個 bundle。

Webpack 僅能理解 Javascript 和 JSON 文件，需要通過 Loader 來轉換

Webpack核心概念

• Entry（入口）
• Output（輸出）
• Loader（允許 Webpack 處理他類型的文件，并將其轉換為可被您的應用程序使用并添加到依賴關系圖的有效模塊。）
• Plugins（插件是 Webpack的基礎，可用來處理任何 Loader 不能處理的事情）
• Mode（配置編譯環境，可選: development、production 和 none， 默認值production）
• Browser Compatibility（瀏覽器兼容性，支持所有兼容 ES5 的瀏覽器「IE8及以下版本除外」，若要支持舊版瀏覽器，需要先加載一個polyfill）

Webpack 安裝與項目初始化

1. 項目初始化

創建文件夾 webpack-demo，進入文件夾執行

npm init -y

從 webpack 4 版本開始，webpack-cli 分離成一個單獨的模塊，安裝 webpack 時還需要單獨安裝 webpack-cli

不建議全局安裝 webpack，采用本地安裝的方式

npm install webpack webpack-cli --save-dev

在 webpack-demo 目錄下新建 webpack.config.js

entry 配置

Simple rule: one entry point per HTML page. SPA: one entry point, MPA: multiple entry points.

一個HTML頁面一個入口，單頁面一個入口，多頁面多個入口

官方地址：entry-context

module.exports={
    entry: './src/index.js' //webpack的默認配置
}
module.exports={
    entry: {
        app: './src/index.js' // app是輸出的文件名,output中配置了filename后，這個名字無效
    } //
}
module.exports={
    entry: [
        './src/index.js',
        './src/index2.js'
    ]
}

entry 的配置可以是 字符串、數組、對象。

output 配置

const path=require('path'); // node提供
module.exports={
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'), //輸出到的文件夾
        filename: 'bundle.js', // 編譯后輸出的文件名
        publicPath: '/' //通常是CDN地址
    }
}

Webpack 打包 js 文件

本文所使用的 webpack 版本：

webpack@4.42.1
webpack-cli@3.3.11

從 Webpack v4 開始，不引入任何配置文件的情況下也可以使用。

在 webpack-demo 下創建 src/index.js，在其中寫點內容

let arr=[1,2,3]
arr.map((item)=> {console.log(item)})

執行 npx webpack --mode=development 進行打包。

執行完后，在 webpack-demo 下可看到一個 dist 文件夾，其中的 main.js 文件，即為默認打包后的文件。

查看 main.js 文件

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("let arr=[1,2,3]\narr.map((item)=> {console.log(item)})\n\n//# sourceURL=webpack:///./src/index.js?");

/***/ })

代碼還是箭頭函數，沒有被打包成低版本代碼，這不是我們所需要的。此時需要使用 webpack 的 babel-loader 來將代碼轉換到低版本。

安裝 babel-loader

npm install babel-loader --save-dev

安裝 babel 依賴：推薦讀下：不容錯過的 Babel7 知識

npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime --save-dev

npm install @babel/runtime @babel/runtime-corejs3

配置 loader

module.exports={
    module: {
        rules:[
            {
                test: /\.js$/,
                use: ['babel-loader'],
                exclude: /node_modules/
            }
        ]
    }
}

創建 .babelrc 文件，配置 babel

// 配置babel方式一
{
    "presets": ["@babel/preset-env"],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "corejs": 3
            }
        ]
    ]
}

// 配置 babel 方式二：在webpack.config.js中配置

module.exports={
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"],
                        plugins: [
                            [
                                "@babel/plugin-transform-runtime",
                                {
                                    "corejs": 3
                                }
                            ]
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
}

loader 是從右向左（或者從下至上）執行的

比如要配置 less-loader，還需要配置 css-loader 和 style-loader，代碼如下

module.exports={
    module: {
        rules: [
            {
                test: /\.(le|c)ss$/,
                use: ['style-loader', 'css-loader', 'less-loader'],
                exclude: /node_modules/
            }
        ]
    }
}

webpack 使用 loader 的方式建議閱讀官方文檔：Webpack Using Loaders

設置 mode

告知 webpack 使用相應的模式進行優化打包，打包出的文件有所不同。

默認值： production

可設置： none、 production 和 development。

OptionDescriptiondevelopmentSets process.env.NODE_ENV on DefinePlugin to value development . Enables NamedChunksPlugin and NamedModulesPlugin .productionSets process.env.NODE_ENV on DefinePlugin to value production . Enables FlagDependencyUsagePlugin , FlagIncludedChunksPlugin , ModuleConcatenationPlugin , NoEmitOnErrorsPlugin , OccurrenceOrderPlugin , SideEffectsFlagPlugin and TerserPlugin .noneOpts out of any default optimization options

將打包后的 js 文件自動添加到 html 中

需要用到插件 html-webpack-plugin

npm install html-webpack-plugin --save-dev

在 webpack-demo 目錄下新建 public/index.html

修改 webpack.config.js

const HtmlWebpackPlugin=require("html-webpack-plugin")
module.exports={
    ...,
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html', // 打包后的文件名
        })
    ]
}

安裝 cross-env，用來提供一個兼容性好的 scripts 來使用環境變量

npm install crosee-env --save-dev

具體用法，在 packge.json 中的 scripts 中添加內容

"start": "cross-env NODE_ENV=development webpack",

之前編譯執行的是 npx webpack --mode=development，現在只需要執行 npm run start

如何在瀏覽器中實時展示效果

使用到的插件 webpack-dev-server

npm install webpack-dev-server --save-dev

修改 package.json

"start": "cross-env NODE_ENV=development webpack-dev-server",

配置 webpack-dev-server

官方文檔：dev-server

// webpack.config.js
module.expots={
    ...,
    devServer: {
         port: '8080', //默認是8080
        quiet: false, //默認不啟用,如果開啟了，控制臺不會看到除了初始啟動信息外的任何console信息，包括錯誤提示
        inline: true, //默認開啟 inline 模式，如果設置為false,開啟 iframe 模式
        stats: 'errors-only', //終端僅打印 error
        overlay: true, //默認不啟用，是否全屏顯示編譯的錯誤信息
        clientLogLevel: "silent", //日志等級
        compress: true //是否啟用 gzip 壓縮
    }
}

DevTool配置

方便我們在控制臺看到我們在代碼中的console信息或者錯誤信息的實際行數，方便定位問題，否則控制臺會顯示編譯后的位置，和實際位置打不一樣

官方可選參數：devtool配置

修改 webpack.config.js

module.exports={
    ...,
    devtool: 'cheap-module-eval-source-map' //開發環境下使用,線上設置為 none 或者  source-map
}

編譯 less 文件

需要用到插件 less-loader、css-loader 、 style-loader、postcss-loader 和 autoprefixer，后兩個是自動添加兼容性前綴。

npm install style-loader less-loader css-loader postcss-loader autoprefixer --save-dev

新建文件 src/index.less

@color: red;
body{
  background-color: @color;
}

修改 webpack.config.js

module.exports={
    ...,
    module: {
         rules:[
            ...,
            {
                test: /\.(le|c)ss$/,
                use: ['style-loader', 'css-loader', {
                    loader: 'postcss-loader',
                    options: {
                        plugins: function () {
                            return [
                                require('autoprefixer')({
                                    "overrideBrowserslist": [
                                        ">0.25%",
                                        "not dead"
                                    ]
                                })
                            ]
                        }
                    }
                }, 'less-loader'],
                exclude: /node_modules/
            }
        ]
    }
}

推薦在根目錄新建 .browserslistrc 文件來配置 postcss-loader

處理圖片/字體文件等

需要用到插件 url-loader 和 file-loader

url-loader 處理資源時，將配置的limit限制大小以內的資源以 DataURL 返回

官方文檔：url-loader、file-loader

npm install url-loader file-loader --save-dev

配置 webpack.config.js,參考 vue-cli2.x 構建的項目配置

module.exports={
    ...,
     module: {
         rules:[
            ...,
             {
                test: /\.(woff2?|eot|ttf|otf|png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                limit: 10240, // 10k，大于 10k 將使用 file-loader
                esModule: false, // file-loader的配置，默認使用ES Module，否則使用 CommonJS
                }
            }
         ]
     }
}

清空 dist 文件夾

每次打包時，舊的打包文件不是基本不是我們需要的，所以需要清空文件夾，懶得手動去刪除文件夾，需要使用插件 clean-webpack-plugin

每次執行打包后都會清空文件夾中的內容重新生成

npm install clean-webpack-plugin -D

修改 webpack.config.js 的 plugins

const { CleanWebpackPlugin }=require('clean-webpack-plugin');
module.exports={
    ...,
    plugins: [
        ...,
        new CleanWebpackPlugin()
    ]
}

最后

一個基礎的webpack就配置完了

參考文章

官方文檔地址，建議隨時查閱鞏固：Webpack官網

祭出掘金大佬的三篇文章，從基礎到進階都有，跟著做完肯定有收獲

• 帶你深度解鎖Webpack系列(基礎篇)
• 帶你深度解鎖Webpack系列(進階篇)
• 帶你深度解鎖Webpack系列(優化篇)

一些 webpack 相關面試題

Webpack 的熱更新原理

Webpack 的熱更新又稱熱替換 （Hot Module Replacement），縮寫為 HMR。 這個機制可以做到 「不用刷新瀏覽器」 而將新變更的模塊替換掉舊的模塊。

1. webpack 使用 webpack-dev-server 啟動一個本地服務
2. 啟動的本地服務與瀏覽器之間維護了一個 Websocket
3. webpack 監聽源文件的變化，當開發者保存文件時觸發webpack的重新編譯，編譯完成后通過socket向客戶端推送當前編譯的hash值。
4. 客戶端通過websocket接收到推送過來的hash值。
5. 客戶端接收到 hash值 后，通過 Ajax 向服務端發送請求，服務端返回包含所有需要更新模塊的的hash值構成的的一個json。
6. 獲取到 json 后，再通過 jsonp 獲取到最新的模塊代碼。
7. 通過 HotModulePlugin 進行更新處理，

細節參考：Webpack HMR 原理解析

webpack的構建流程

1. 初始化參數：從配置文件和 Shell 語句中讀取與合并參數，得出最終的參數；
2. 開始編譯：用上一步得到的參數初始化 Compiler 對象，加載所有配置的插件，開始執行編譯；
3. 確定入口：根據配置中的 entry 找出所有的入口文件；
4. 編譯模塊：從入口文件出發，調用所有配置的 Loader 對模塊進行翻譯，再找出該模塊依賴的模塊，再遞歸本步驟直到所有入口依賴的文件都經過了本步驟的處理；
5. 完成模塊編譯：在經過第4步使用 Loader 翻譯完所有模塊后，得到了每個模塊被翻譯后的最終內容以及它們之間的依賴關系；
6. 輸出資源：根據入口和模塊之間的依賴關系，組裝成一個個包含多個模塊的 Chunk，再把每個 Chunk 轉換成一個單獨的文件加入到輸出列表，這步是可以修改輸出內容的最后機會；
7. 輸出完成：根據配置確定輸出的路徑和文件名，把文件內容寫入到文件系統。

如何提高webpack的構建速度

1. 多入口情況下，使用 CommonsChunkPlugin 來提取公共代碼
2. 通過 externals 配置來提取常用庫
3. 利用 DllPlugin 和 DllReferencePlugin 預編譯資源模塊 通過 DllPlugin 來對那些我們引用但是絕對不會修改的npm包來進行預編譯，再通過 DllReferencePlugin 將預編譯的模塊加載進來。
4. 使用 Happypack 實現多線程加速編譯
5. 使用 webpack-uglify-parallel 來提升 uglifyPlugin 的壓縮速度。 原理上 webpack-uglify-parallel 采用了多核并行壓縮來提升壓縮速度
6. 使用 Tree-shaking 和 Scope Hoisting 來剔除多余代碼

題目后續還會再收集添加一部分

<template>
 <div id="my-component">...</div>
</template>
<script>
 export default {...}
</script>
<style>
 #my-component {...}
</style>

module: {
 rules: [
 {
 test: /\.vue$/,
 loader: 'vue-loader',
 options: {
 loaders: {
 // Override the default loaders
 }
 }
 },
 ]
}

resolve: {
 alias: {
 'vue$': 'vue/dist/vue.esm.js' // Use the full build
 }
},

if (process.env.NODE_ENV !=='production') {
 warn(("Error in " + info + ": \"" + (err.toString()) + "\""), vm);
}

if (process.env.NODE_ENV==='production') {
 module.exports.plugins=(module.exports.plugins || []).concat([
 new webpack.DefinePlugin({
 'process.env': {
 NODE_ENV: '"production"'
 }
 }),
 new webpack.optimize.UglifyJsPlugin()
 ])
}

new webpack.optimize.CommonsChunkPlugin({
 name: 'vendor',
 minChunks: function (module) {
 return module.context && module.context.indexOf('node_modules') !==-1;
 }
})

output: {
 filename: '[name].[chunkhash].js'
},

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>test-6</title>
 </head>
 <body>
 <div id="app"></div>
 <!-- built files should go here, but will be auto injected -->
 </body>
</html>

new HtmlWebpackPlugin({
 filename: 'index.html'
 template: 'index.html',
 inject: true,
 chunksSortMode: 'dependency'
}),

Vue.component('async-component', function (resolve, reject) {
 setTimeout(()=> {
 resolve({
 // Component definition including props, methods etc.
 });
 }, 1000)
})

Vue.component('async-component', function (resolve) {
 require(['./AsyncComponent.vue'], resolve)
});

const HomePage=resolve=> require(['./HomePage.vue'], resolve);
const rounter=new VueRouter({
 routes: [
 {
 path: '/',
 name: 'HomePage',
 component: HomePage
 }
 ]
})

式是Vue CLI項目中的一個重要概念，默認情況下它有三種模式：

• development 被 vue-cli-service serve 使用
• test 由 vue-cli-service test:unit 使用
• production 由 vue-cli-service build 和 vue-cli-service test:e2e 使用

通過傳遞–mode選項標志，可以覆蓋用于命令的默認模式。例如，如果要在build命令中使用開發變量：

vue-cli-service --mode development

運行 vue-cli-service 時，將從所有相應的文件加載環境變量，如果它們不包含 NODE_ENV 變量，則會相應地進行設置。

例如，NODE_ENV 將在生產模式下設置為 “production”，在測試模式下設置為 “test”，否則默認為 “development”；然后 NODE_ENV 將確定應用程序運行的主要模式-開發、生產或測試-并因此創建什么樣的webpack配置。

• 將 NODE_ENV 設置為 “test” 時，Vue CLI會創建一個webpack配置，用于單元測試并對其進行優化，它不處理單元測試不需要的圖像和其他資產。
• NODE_ENV=development 創建一個webpack配置，該配置啟用HMR，不散列資產或創建供應商包，以便在運行dev服務器時能夠快速重新構建。
• 運行 vue cli service build 時，無論要部署到什么環境，都應始終將節點環境設置為“生產”以獲取可供部署的應用程序。

注意：如果 NODE_ENV 的環境中有默認值，則它在運行 vue-cli-service 命令時將刪除或進行顯示設置。

環境變量

環境變量我們可以從它的模式還有變量內容進行認識和了解：

我們可以通過在項目根目錄中放置以下文件來指定環境變量：

.env               // 在所有情況下加載
.env.local         // 在所有情況下加載，被git忽略
.env.[mode]        // 僅以指定模式加載
.env.[mode].local  // 僅在指定模式下加載，被git忽略

一個環境文件僅包含環境變量的key=value對；

只有以開頭的變量 VUE_APP_才會使用靜態嵌入到客戶端包中 webpack.DefinePlugin；

加載的變量將對所有 vue-cli-service 命令，插件和依賴項可用。

在客戶端代碼中使用 Env 變量

console.log(process.env.VUE_APP_SECRET)

在構建過程中，process.env.VUE_APP_SECRET 將被相應的值替換。在的情況下 VUE_APP_SECRET=secret，將被替換 "secret"。

所有已解析的env變量都將 public/index.html 在HTML插值中討論的內部可用。

局部變量

默認情況下，.gitignore 將忽略本地env文件。

有時候我們有不需要提交到代碼塊的env變量時，而且項目托管也在公共存儲庫中時，這種情況下，我們應該改用 .env.local 文件。.local 也可以附加到特定于模式的env文件中。