[[427986]]

本文轉(zhuǎn)載自微信公眾號(hào)「前端萬有引力」，作者 一川 。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端萬有引力公眾號(hào)。

1.webpack的基本概念

1.1 webpack是什么?

webpack是一個(gè)現(xiàn)代js應(yīng)用程序的靜態(tài)模塊打包器(module bundler)，一種前端資源構(gòu)建工具。

• 什么是前端資源構(gòu)建工具?在瀏覽器中是不認(rèn)識(shí)sass、less、ts等web資源和js高級(jí)語法，只有通過webpack這樣的構(gòu)建工具來將它們一一編譯成瀏覽器能夠讀取的js文件。
• 什么是靜態(tài)資源打包器?在webpack處理應(yīng)用程序時(shí)，它會(huì)遞歸構(gòu)建一個(gè)依賴關(guān)系圖，將應(yīng)用程序需要的所有模塊打包成一個(gè)或多個(gè)bundle。

1.2 webpack可以用來做什么?

webpack作為前端工程師最常用的前端資源構(gòu)建工具，能夠解決很多在開發(fā)中的遇到的痛點(diǎn)和難點(diǎn)。

• 可以不依賴后端，解決調(diào)用后端接口時(shí)的跨域問題
• 在代碼改動(dòng)后自動(dòng)刷新瀏覽器，有緩存時(shí)也無需清除緩存
• 可以方便解決css和js新特性在各瀏覽器上的兼容性問題，提高自己的開發(fā)效率
• 無需使用額外的打包平臺(tái)和編寫打包腳本，也無需單獨(dú)對(duì)js、css等進(jìn)行打包壓縮

當(dāng)然，webpack的強(qiáng)大不止這些，它有很多簡(jiǎn)單方便的配置能夠提升你的開發(fā)效率。

2. webpack的核心配置

常用的核心配置如下：

• 入口 entry
• 輸出 output
• 加載器 loader
• 插件 plugin
• 模式 mode
• 其它配置等

當(dāng)然，以上列舉的是常用的配置，其它的需求可以查找官方文檔進(jìn)行閱讀：[https://webpack.docschina.org/concepts/]

2.1 入口 entry

入口(entry)毫無疑問指的是webpack以哪個(gè)或哪些文件作為打包的起點(diǎn)，以哪個(gè)模塊來構(gòu)建內(nèi)部依賴圖。webpack會(huì)根據(jù)依賴圖去分析各個(gè)模塊之間的依賴關(guān)系，從而進(jìn)行打包。

//單文件入口，string形式：打包形成一個(gè)chunk，輸出一個(gè)bundle文件，當(dāng)然在實(shí)際開發(fā)中的靈活性不大 
entry:"./src/index.js" 
 
//多文件入口，array形式：所有文件最終形成一個(gè)chunck，輸出一個(gè)bundle文件 
entry:["./src/index.js","./src/main.js"] 
 
//多文件入口，object形式：多個(gè)入口文件就形成多個(gè)chunk，最終輸出多個(gè)bundle文件，而chunk的名稱就是對(duì)象的key值.雖然這種方式比較繁瑣，但是其擴(kuò)展性比較強(qiáng)，配置可以重復(fù)使用，也可以配合其它配置組合使用。 
entry:{ 
  index:"./src/index.js", 
  main:"./src/main.js" 
} 

當(dāng)然在描述入口的對(duì)象的時(shí)候，還有許多其它配置屬性，具體可以查看文檔。

• dependOn: 當(dāng)前入口所依賴的入口。它們必須在該入口被加載前被加載。
• filename: 指定要輸出的文件名稱。
• import: 啟動(dòng)時(shí)需加載的模塊。
• library: 指定 library 選項(xiàng)，為當(dāng)前 entry 構(gòu)建一個(gè) library。
• runtime: 運(yùn)行時(shí) chunk 的名字。如果設(shè)置了，就會(huì)創(chuàng)建一個(gè)新的運(yùn)行時(shí) chunk。在 webpack 5.43.0 之后可將其設(shè)為 false 以避免一個(gè)新的運(yùn)行時(shí) chunk。
• publicPath: 當(dāng)該入口的輸出文件在瀏覽器中被引用時(shí)，為它們指定一個(gè)公共 URL 地址。請(qǐng)查看 output.publicPath。

2.2 輸出 output

輸出(output)顯而易見就是告訴webpack在哪里輸出打包后的資源bundles，以及如何命名這些輸出文件。當(dāng)然主要文件默認(rèn)為"./dist/main.js"，其它文件則放在"./dist"文件夾中。

// 打包出口  
output:{ 
    // 輸出文件夾路徑 
    path:path.resolve(__dirname,"dist"), 
    // 文件名 
    // filename:"bundle.js" 
    // 如果多個(gè)入口起點(diǎn)，應(yīng)當(dāng)使用占位符確保每個(gè)文件具有唯一名稱 
    filename:"[name].js", 
    // 所有資源引入公共路徑前綴，用于生產(chǎn)環(huán)境需謹(jǐn)慎 
    publicPath:"",//編譯時(shí)，不知道其輸出文件的地址，則將其置空，在運(yùn)行時(shí)通過入口起點(diǎn)文件的__webpack_public_path__進(jìn)行動(dòng)態(tài)配置。 
    chunkFilename: "[contenthash:10].chunk.js", 
    clean: true, //打包前清空輸出目錄，相當(dāng)于clean-webpack-plugin插件的作用。 
    /* 當(dāng)用 Webpack 去構(gòu)建一個(gè)可以被其他模塊導(dǎo)入使用的庫時(shí)需要用到library */ 
    library: { 
        name: "[name]",//整個(gè)庫向外暴露的變量名 
        type: "window"//庫暴露的方式 
    } 
} 

切記：即使可以存在多個(gè) entry 起點(diǎn)，但只能指定一個(gè) output 配置。

2.3 加載器 loader

正如你所知道的，webpack只能解析js和json文件，這是其天生自帶的能力。而loader的能力就是讓webpack可以去處理其它類型的文件，將其轉(zhuǎn)為webpack能夠解析的模塊文件js或json，以提供給應(yīng)用程序使用，生成到依賴圖中。

// 加載器 
loader:{ 
    // 匹配文件類型，服從正則表達(dá)式語法 
    test:/\.css/, 
    // 定義在轉(zhuǎn)換時(shí)，使用到哪些loader，自下而上、自右至左進(jìn)行處理 
    use:[ 
      "style-loader",//創(chuàng)建style標(biāo)簽，將js文件中的樣式資源提取出來，添加到index.html文件的head標(biāo)簽中 
      "css-loader",//將css文件轉(zhuǎn)變成commonjs格式加載到j(luò)s文件中 
      { 
        loader:"postcss-loader",//css的兼容性處理，切記：需要預(yù)先在package.json文件中配置browserlist 
        options:{ 
          postcssOptions:{ 
            ident:"postcss", 
            // postcss-preset-env插件：幫postcss找到package.json中的browserslist配置，根據(jù)配置加載指定的兼容性樣式 
            plugins:[require("postcss-preser-env")()] 
          } 
        } 
      } 
    ] 
  }, 
  {  
      test: /\.js$/,  
      // 注意需要在package.json配置browserslist，否則babel-loader不生效  
      // js兼容處理 babel  
      loader: "babel-loader",  
      // 規(guī)則只使用一個(gè)loader時(shí)推薦寫法  
      options: {  
          presets: [  
          [  
              "@babel/preset-env", 
              // 預(yù)設(shè)：指示babel做怎么樣的兼容處理  
              {  
                  useBuiltIns: "usage",  
                  //按需加載  
                  corejs: {  
                      version: "3",  
                  },  
                  targets: "defaults",  
              }  
           ]  
         ]  
    }  
} 

2.4 插件 plugin

插件plugin：插件其實(shí)就是輔助loader去執(zhí)行范圍更廣的人物，從打包優(yōu)化、文件壓縮、資源管理以及重新注入環(huán)境變量。

// CleanWebpackPlugin幫助你在打包時(shí)自動(dòng)清除dist文件，學(xué)習(xí)時(shí)使用比較方便 
// const { CleanWebpackPlugin } = require("clean-webpack-plugin"); //從webpack5開始，webpack內(nèi)置了該功能，只要在ouput中配置clear為true即可 
 
// HtmlWebpackPlugin幫助你創(chuàng)建html文件，并自動(dòng)引入打包輸出的bundles文件。支持html壓縮。 
const HtmlWebpackPlugin = require("html-webpack-plugin"); 
 
// 該插件將CSS提取到單獨(dú)的文件中。它會(huì)為每個(gè)chunk創(chuàng)造一個(gè)css文件。需配合loader一起使用 
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 
 
// 該插件將在Webpack構(gòu)建過程中搜索CSS資源，并優(yōu)化\最小化CSS 
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin"); 
 
// vue-loader V15版本以上，需要引入VueLoaderPlugin插件，它的作用是將你定義過的js、css等規(guī)則應(yīng)用到vue文件中去。 
const { VueLoaderPlugin } = require('vue-loader') 
 
module.exports = { 
    module: { 
        rules: [ 
            { 
                test: /\.vue$/, 
                loader: "vue-loader" 
            }, 
            { 
                test: /\.css$/, 
                use: [ 
                    // MiniCssExtractPlugin.loader的作用就是把css-loader處理好的樣式資源（js文件內(nèi)），單獨(dú)提取出來 成為css樣式文件 
                    MiniCssExtractPlugin.loader,//生產(chǎn)環(huán)境下使用，開發(fā)環(huán)境還是推薦使用style-loader 
                    "css-loader", 
                ], 
            }, 
        ], 
    }, 
    plugins: [ 
        new HtmlWebpackPlugin({ 
            template:"index.html" 
        }), 
        new MiniCssExtractPlugin({ 
            filename: "css/built.css", 
        }), 
        new OptimizeCssAssetsWebpackPlugin(), 
        new VueLoaderPlugin(), 
    ] 
} 

2.5 模式

模式mode用于告知webpack需要使用對(duì)應(yīng)環(huán)境模式下的配置，可以是production、development或者none，當(dāng)然默認(rèn)是production。

使用mode模式有兩種方式，可以是在配置對(duì)象中設(shè)置mode選項(xiàng)。

module.exports = { 
    mode:"development" 
} 

也可以是在package.json中的cli進(jìn)行配置:

webpack --mode=development 

官方文檔中是這樣寫的：

如果要根據(jù) webpack.config.js 中的 mode 變量更改打包行為，則必須將配置導(dǎo)出為函數(shù)，而不是導(dǎo)出對(duì)象：

ar config = { 
  entry: './app.js', 
  //... 
}; 
 
module.exports = (env, argv) => { 
  if (argv.mode === 'development') { 
    config.devtool = 'source-map'; 
  } 
 
  if (argv.mode === 'production') { 
    //... 
  } 
 
  return config; 
}; 

其它常用配置：

module.exports = { 
    // 解析模塊的規(guī)則： 
    resolve: { 
        // 配置 解析模塊路徑別名：可簡(jiǎn)寫路徑。 
        alias: { 
            "@": path.resolve(__dirname, "src") 
        }, 
        // 配置 省略文件路徑的后綴名。默認(rèn)省略js和json。也是webpack默認(rèn)認(rèn)識(shí)的兩種文件類型 
        extensions: [".js", ".json", ".css"], // 新加css文件 
        // 告訴webpack解析模塊是去找哪個(gè)目錄 
        // 該配置明確告訴webpack，直接去上一層找node_modules。 
        modules: [path.resolve(__dirname, "../node_modules")], 
    }, 
    // devServer（開發(fā)環(huán)境下配置）： 
    devServer: { 
        // 運(yùn)行代碼的目錄 
        contentBase: path.resolve(__dirname, "build"), 
        // 為每個(gè)靜態(tài)文件開啟gzip壓縮 
        compress: true, 
        host: "localhost", 
        port: 5000, 
        open: true, // 自動(dòng)打開瀏覽器 
        hot: true, //開啟HMR功能 
        // 設(shè)置代理 
        proxy: { 
            // 一旦devServer(5000端口)接收到/api/xxx的請(qǐng)求，就會(huì)用devServer起的服務(wù)把請(qǐng)求轉(zhuǎn)發(fā)到另外一個(gè)服務(wù)器（3000） 
            // 以此來解決開發(fā)中的跨域問題 
            api: { 
                target: "htttp://localhost:3000", 
                // 發(fā)送請(qǐng)求時(shí)，請(qǐng)求路徑重寫：將/api/xxx  --> /xxx （去掉/api） 
                pathRewrite: { 
                    "^api": "", 
                }, 
            }, 
        }, 
    }, 
 
    // optimization（生產(chǎn)環(huán)境下配置） 
    optimization: { 
        // 提取公共代碼 
        splitChunks: { 
            chunks: "all", 
        }, 
        minimizer: [ 
            // 配置生產(chǎn)環(huán)境的壓縮方案：js和css 
            new TerserWebpackPlugin({ 
                // 多進(jìn)程打包 
                parallel: true, 
                terserOptions: { 
                    // 啟動(dòng)source-map 
                    sourceMap: true, 
                }, 
            }), 
        ], 
    }, 
}; 

3參考文章

webpack官方文檔 

Webpack5.0學(xué)習(xí)總結(jié)-基礎(chǔ)篇