webpack4學習筆記——基本配置及插件註解

webpack4學習筆記

---

準備工做

安裝webpack、webpack-cli、webpack-dev-server,建立package.json,在package.json的scripts中建立build啓動方式，因爲準備將webpack.config.js放在build文件夾下。

配置以下：

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",
  "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
},

建立build文件夾，在其中建立webpack配置文件webpack.config.js。
注：webpack.config.js中entry、plugins等能夠用到相對路徑的地方，相對路徑都是相對於根目錄。

---

基礎插件與處理

1. html部分

安裝html-webpack-plugin，負責打包html文件

注意，在html文件中不須要手動引入打包後的js文件，html-webpack-plugin會自動將打包後的js文件引入html文件中

2. css部分

安裝loader,如style-loader/css-loader/less-loader

注意，解析less除了安裝less-loader還需安裝less，提供運行環境

安裝 mini-css-extract-plugin用於抽離css

安裝postcss-loader、autoprefixer用於添加樣式兼容性前綴

添加兼容性前綴的功能由autoprefixer完成，postcss-loader至關於一個loader的容器，autoprefixer配置在其中，使postcss-loader在加載css文件時能自動添加兼容性前綴

安裝optimize-css-assets-webpack-plugin用於抽離css

注：此插件是配置在optimization.minimizer中，webpack4將大部分優化相關內容放在optimization中，又根據優化的具體內容劃分爲minimizer、splitChunks等模塊。
注意，抽離的css沒法自動壓縮，所以後續需配置壓縮抽離的css的插件

安裝mini-css-extract-plugin用於壓縮抽離後的css

此插件配置在plugins中

3. js部分

安裝uglifyjs-webpack-plugin用於壓縮js

因爲抽離css時optimization.minimizer的配置，致使webpack4壓縮的默認js相關配置被覆蓋，所以須要手動配置js壓縮，此插件也是放在optimization.minimizer中

安裝babel-loader、@babel/core、@babel/preset-env

(加載器)、(核心模塊，能夠調用transform方法轉換源代碼)、(轉化模塊，es6->es5)

安裝@babel/plugin-proposal-class-properties

@babel模塊很大，所以最好按需下載模塊，此模塊爲class的轉換工具

安裝@babel/plugin-proposal-decorators

class的裝飾器

安裝@babel/plugin-transform-runtime(dev環境)、@babel/runtime(生產環境)

babel只能轉義ES6語法，好比箭頭函數，可是遇到ES6新增的api就無能爲力了，runtime可處理async、Promise、generater等新增API

安裝@babel/polyfill

runtime沒法處理實例上的方法，如'aaa'.includes('aa'),所以需使用@babel/polyfill，@babel/polyfill的使用方式較爲特殊，並不是配置在插件中，可在須要的js文件中引入，或在entry中添加'@babel/polyfill'。

*注：polyfill、runtime做用都是實現ES6相關API，但polyfill是污染全局變量，runtime是使用局部變量，對於實例上的api，必須污染原型鏈上的全局變量，所以runtime沒法處理。因爲runtime是使用局部變量實現，假設多個地方使用了Promise,在使用的地方注入局部變量，勢必會有大量重複代碼，plugin-transform-runtime可經過一些helper函數的注入來減小語法轉換函數的開銷，如多處使用promise時，實現promise的方法指向同一處。*

4. 圖片處理

安裝file-loader或url-loader用於解析圖片文件

webpack運行於nodejs，沒法解析圖片;若圖片採用的是樣式background:url('...'),此種背景圖css-loader會進行解析;file-loader、url-loader均可以解析圖片文件，file-loader是將圖片拷貝至打包後的文件，url-loader與file-loader相比多了可將圖片解析爲base64放入文件中的功能,所以使用時通常添加limit,小於多少比特的文件採用轉換base64(base64同常比原文件大1/3)，limit設爲0的話，url-loader功能與file-loader沒區別了

安裝html-withimg-loader，用於解析html中img

若在html中添加img，圖片地址爲src目錄下的draw.svg，直接打包的話打包後的文件中src地址仍指向src目錄下的src,所以須要html-withimg-loader將html中的img指向的圖片打包至dist；html-withimg-loader並不能直接解析圖片文件，遇到html中的img標籤時，html-withimg-loader需經過file-loader或url-loader對圖片文件進行解析，並修改html中src的指向

5.不一樣類型文件放入相應文件夾

將不一樣類型文件放入相應文件夾，一般在打包的最後一步進行，如js文件的output，圖片文件的url-loader中，css文件若沒有minicss插件，通常默認打包到js文件中，若單獨分離，最後一步爲mini-css-extract-plugin插件處理，所以在此處設置

6. 代碼規範

安裝eslint eslint-loader(可在官網上勾選具體規則，下載配置,不配置會報錯)

7. 暴露對象

若要將某個對象（如jquery）暴露於全局window下

• 安裝並使用expose-loader

若要將對象暴露於每個模塊

• 使用webpack.ProvidePlugin

8.sourceMap

若要在打包後文件的基礎上查看原文件，則須要設置devtool，注意，生產環境若沒在UglifyJsPlugin中設置sourcemap:true,即便設置了devtool也沒法查看原文件（原文件可在F12->Sources->webpack:// 中查看,未設置則無此文件夾），devtool的類型有：

• source-map:大而全，會產生單獨的map文件，可查看報錯部分在原文件的行和列
• eval-source-map:不會產生單獨的文件，但報錯能顯示行和列
• cheap-module-source-map:報錯不會顯示多少列，可是一個單獨的映射文件
• cheap-module-eval-source-map: 不會產生文件，集成在打包後的文件中，報錯不會顯示多少列

9.resolve配置

詳情見代碼註釋：

resolve: {
    // 解析第三方包只從node_modules查找
    // 如代碼中import XX from 'xx';'xx'默認只在node_modules查找
    // 通常引用模塊默認從當前目錄的node_modules查找，找不到則沿着
    // 上一層目錄去查找，此配置縮小查找範圍
    modules:[path.resolve('node_modules')],
    // 通常import XX from 'xx',引入的路徑都是在package.json中'main'配置裏的路徑，
    // 此配置可規定引入時先查找package.json下的哪一個路徑
    // mainFields: ['style','main'],
    // 設置默認入口文件名字，默認是index,所以若配置main,此項目中依賴了'strip-ansi'包，該包package.json
    // 中未配置main,所以默認找index.js，此配置讓這種場景默認找main.js，所以require('strip-ansi')報錯
    // mainFiles: ['main'],
    // 引入文件時若未填寫後綴，先找同名js，再找css，再json,依次從左到右
    // extensions: ['.js','.css','.json'],
    alias:{
        //別名，代碼中'@/'直接指向src目錄
        '@':path.resolve(__dirname,'../src'),
    }

10.經常使用插件

安裝cleanWebpackPlugin(打包前清空dist)

安裝copyWebpackPlugin(文件直接複製)

bannerPlugin(版權聲明插件，不用安裝，webpack內置)

---

經常使用功能

一、代理

webpack代理功能可用於解決跨域問題，將瀏覽器到有跨域問題服務器的請求，轉化爲瀏覽器到無跨域問題的代理服務器，代理服務器到有跨域問題服務器的請求，其效果相似於nginx的proxy_pass；同源策略只針對瀏覽器，服務器到服務器的請求不會有跨域問題。
proxy配置只針對於開發環境，生產環境不會自動搭建服務器。

devServer中配置：

proxy:{
        //匹配/api接口，將其代理到http://localhost:8080
        // 方法1：
        //'/api':'http://localhost:8080'
        // 方法2：
        '/api':{
            target: 'http://localhost:8080',
            // 將路徑替換，/api/name中的/api替換爲空字符串
            pathRewrite:{
                '/api':''
            }
        }
    },

除此以外，還能夠在nodejs搭建的服務器中，利用webpack-dev-middleware啓動webpack,此時打包後的服務器與搭建的服務器同源，也不會引發跨域問題。

二、mock數據

利用devServer提供的生命週期鉤子，在開發環境dev服務器上新增接口。

devServer中配置：

before(app){
        app.get(/^\/api/,(req,res)=>{
            res.json({data:'mock-data-before'})
            })
        }

3.實時打包

build完畢後服務不會馬上結束，修改代碼後可實時打包，至關於build版的熱更新。

新增以下配置：

watch:true, // 實時打包，至關於build的熱更新
    watchOptions:{
        poll:1000, //每1000毫秒輪詢一次
        aggregateTimeout:300, //防抖，中止輸入300ms後才更新
        ignored: /node_modules/, //不監控node_modules
    },

（混合開發APP時可將此功能與打包APP的熱更新相結合？）

源碼地址: https://github.com/goblin-pit...