一,、項(xiàng)目初始化

npm init -y
npm install --save-dev webpack
npm install webpack-cli -D

創(chuàng)建 webpack.config.js文件 在文件中輸入代碼：

let path=require("path")//引用node核心模塊 => 路徑
module.exports={
    mode:"production", //打包后文件模式 兩種 => development production
    entry:'./src/index.js',//入口文件位置
    output:{
        filename:'bundle.[hash:8].js',  //文件名稱
        path:path.resolve(__dirname,"dist"),//打包后的文件地址為絕對(duì)路徑 名稱為’dist'
        publicPath:''//給所有打包文件引入時(shí)加前綴,，包括css、js,、img,，如果只想處理圖片可以單獨(dú)在url-loader配置中加publicPath
    }
}

運(yùn)行：

npx webpack

【可選】在package.json文件中 ，添加腳本代碼如下：

"scripts":{
    "build":"webpack --config webpack.config.my.js"http://可以操作重命名后的webpack.config.js文件
}

運(yùn)行：

npm run build

二,、本地服務(wù)

使用簡單的服務(wù)插件 webpack-dev-server, 在內(nèi)存中啟動(dòng)

npm install webpack-dev-server -D

運(yùn)行：

npx webpack-dev-server

[可選] 在webpack.config.js文件中添加服務(wù)代碼：

devServer:{//開發(fā)服務(wù)器配置
    port:3000,//端口號(hào)
    progress:true,//是否顯示進(jìn)度條
    contentBase:'./dist',//服務(wù)器啟動(dòng)的位置
    open:true,//自動(dòng)打開瀏覽器
    compress:true//gzip壓縮
    hot:true//啟動(dòng)熱更新
}

【可選】在package.json文件中加入代碼：

"scripts":{
    "dev":"webpack-dev-server --open"http://添加 --open 自動(dòng)打開瀏覽器
 }

運(yùn)行：

npm run dev

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-9tnQ7kg3-1616136915365)(C:\Users\jfq\AppData\Roaming\Typora\typora-user-images\1614309130932.png)]

此報(bào)錯(cuò)解決方案：

npm uninstall -D webpack-cli
npm install -D webpack-cli@3

三,、loader

• loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）；
• loader 可以將所有類型的文件轉(zhuǎn)換為 webpack 能夠處理的有效模塊

在webpack.config.js文件中配置代碼：

module.exports = {
  module: {//模塊
    rules: [//規(guī)則
      { test: /\.css$/, use: 'css-loader' }
    ]
 }
};

推薦使用yarn 進(jìn)行安裝

3.1 處理CSS

包括css less sass 必須在js文件中導(dǎo)入 import '.css’

3.1.1 處理css文件

1,、安裝 style-loader css-loader 模塊

npm install style-loader css-loader -D

2,、在webpack.config.js文件中配置代碼：

//css-loader  用來解析@import這種語法
//style-loader 用來把css插入 header 標(biāo)簽中

//loader的執(zhí)行順序：默認(rèn)是從右向左，從下向上

module.exports={
    module:{
        rules:[
        //{test:/\.css$/,use:['style-loader','css-loader']}//use可以寫成string array object
        {
                test:/\.css$/,
                use:[{
                    loader:"style-loader",
                    options:{
                        insertAt:"top"http://將css放到body上面,；1.0版本已經(jīng)放棄,；現(xiàn)在不使用
                    }
                },
                "css-loader"
                ]
        }
        ]
    }
}

3.1.2 處理less文件

1、安裝 style-loader css-loader less-loader 模塊 和 less 模塊

npm install style-loader css-loader less-loader -D

2,、在webpack.config.js文件中配置代碼：

module.exports={
    module:{
        rules:[
        {
                test:/\.less$/,
                use:[
                {
                    loader:"style-loader",
                },
                "css-loader",
                "less-loader"
                ]
        }
        ]
    }
}

3.1.3 處理sass文件

1. 安裝style-loader css-loader sass-loader 模塊 和 sass 模塊
2. 用法跟less一樣,；

3.1.4 css兼容處理

1、安裝 “postcss-loader autoprefixer” 模塊

yarn add postcss-loader autoprefixer -D

2,、postcss 需要配置文檔 postcss.config.js

module.exports = {
    plugins: {
      // 兼容瀏覽器,，添加前綴
      'autoprefixer':{
          overrideBrowserslist: [
            "Android 4.1",
            "iOS 7.1",
            "Chrome > 31",
            "ff > 31",
            "ie >= 8"
            //'last 10 versions', // 所有主流瀏覽器最近10版本用
        ],
        grid: true
      }
    }
}

3、在 “webpack.config.js”文件中添加配置：

// css
{
  test: /\.css$/, 
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',   
    'postcss-loader'
  ]
}
// less
{
  test: /\.less$/, 
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',                   
    'postcss-loader',
    'less-loader'                   
  ]
},

3.2 處理JS

3.2.1 ESLint語法檢測(cè)

npm install eslint-config-airbnb-base eslint-plugin-import eslint eslint-loader -D

webpack.config.js中配置

/*
eslint語法檢查：eslint-loader eslint
注意：只檢查自己的js代碼,，第三方的庫是不用檢查的
設(shè)置檢查規(guī)則：
packag.json中eslintConfig中設(shè)置~
   "eslintConfig":{
       "extends":"airbnb-base"
    }
aribnb --> eslint-config-airbnb-base eslint-plugin-import eslint
*/
{
   test:/\.js$/,
   exclude:/node_modules/,
   loader: 'eslint-loader',
   options:{
      fix:true//eslint自動(dòng)修復(fù)格式錯(cuò)誤
   }
}

3.在package.json中配置eslintConfig

"eslintConfig": {
    "extends": "airbnb-base"
  }

4.如果配置完成后,，打包時(shí)出現(xiàn)Resolve error: unable to load resolver “node” src\main.js:1:1 錯(cuò)誤，請(qǐng)安裝下面的依賴后再打包

npm install eslint-import-resolver-node -D

3.2.2 JS兼容處理

因?yàn)閑s6語法不兼容部分瀏覽器,，所以要對(duì)項(xiàng)目進(jìn)行配置

1.安裝依賴

npm install babel-loader @babel/preset-env @babel/core core-js -D //第一三方法安裝這個(gè)
npm install  @babel/polyfill -D //第二個(gè)方法安裝這個(gè)

2.三種方法兼容

（1）babel-loader @babel/preset-env @babel/core 兼容

? 只能兼容基本的語法,，但是像是promise語法，無法進(jìn)行兼容

（2）兼容全部js語法 @babel/polyfill

在index.js中引入依賴即可

import '@babel/polyfill’

缺點(diǎn)：全部兼容造成打包文件太大

（3）core-js 配合第一種進(jìn)行按需兼容

3.配置詳情（下面是將eslint檢查與js兼容配置放在了一起,，module中不可以對(duì).js文件(同一種文件)進(jìn)行多次匹配,，多次匹配只會(huì)匹配第一個(gè)，所以要結(jié)合在一起）

{
    test:/\.js$/,
    exclude:/node_modules/,
    use:[
 //要優(yōu)先執(zhí)行eslint-loader,，可使用配置enforce:'pre'　
        {
            loader: 'eslint-loader',
            options:{
                fix:true//eslint自動(dòng)修復(fù)格式錯(cuò)誤
            }
        },
        //js兼容性處理：babel-loader @babel/preset-env @babel/core
        {
            loader: 'babel-loader',
            options:{
                //預(yù)設(shè)：指示babel做怎么樣的兼容性處理
                presets:[
                    [
                        '@babel/preset-env',
                        {
                            // 按需加載
                            useBuiltIns: 'usage',
                            // 指定core-js版本
                            corejs: {
                                version: 3,
                            },
                            // 指定兼容瀏覽器版本范圍
                            targets: {
                                chrome: '70', // 谷歌版本70及以上
                                firefox: '62',
                                ie: '9',
                                safari: '10',
                                edge: '17',
                            }
                        }
                    ]
                ]
            }
        }
    ]
},

所以一般采用第一種加第三種組合進(jìn)行.js文件兼容,，也就是上面貼的代碼。

第二種具體引入方式如下,，不建議使用

{
      test:/\.js$/,
      exclude:/node_modules/,
      loader:'babel-loader',
      options:{
           presets:['@babel/preset-env']
      }
}

3.3 處理其他文件

3.2.1 處理路徑

1. 安裝 file-loader 插件 可以處理 圖片,、字體等

npm install --save-dev file-loader

2. 在webpack.config.js文件中添加代碼配置：

 module.exports = {
    module: {
      rules: [
        {
         test: /\.(png|svg|jpg|gif)$/,  //圖像的格式，也可以判斷字體文件/\.(woff|woff2|eot|ttf|otf)$/
         use: [
          'file-loader'
         ]
        }
      ]
    }
  };

*解析html中的img 如

yarn add html-loader -D

{
  test: /\.html$/,
  use: 'html-loader'
}

3.2.2 當(dāng)圖片小于多少,，用base64編碼

yarn add url-loader -D

//如果過大,，才用file-loader
{
  test: /\.(png|jpg|gif)$/,
  // 當(dāng)圖片小于多少,，用base64,否則用file-loader產(chǎn)生真實(shí)的圖片
  use: {
    loader: 'url-loader',
    options: {
      limit: 200 * 1024,          // 小于200k變成base64
    }
  }
}

3.2.3 打包分類

1.圖片分類

{
  test: /\.(png|jpg|gif)$/,
  // 當(dāng)圖片小于多少，用base64,否則用file-loader產(chǎn)生真實(shí)的圖片
  use: {
    loader: 'url-loader',
    options: {
      limit: 1,  // 200k 200 * 1024
      outputPath: 'img/'   // 打包后輸出地址 在dist/img
    }
  }
},

2.css分類

plugins: [
  new MiniCssExtractPlugin({
    filename: 'css/main.css'
  }),
]

3.希望輸出的時(shí)候,，給這些css,、img加上前綴，傳到服務(wù)器也能訪問:

output: {
  filename: 'bundle.[hash:8].js',   // [hash:8] 只顯示8位hash
  path: path.resolve(__dirname, 'dist'),
  publicPath: 'http://www.'  // 給靜態(tài)資源統(tǒng)一加
},

如果只處理圖片路徑：

{
  test: /\.(png|jpg|gif)$/,
  // 當(dāng)圖片小于多少,，用base64,否則用file-loader產(chǎn)生真實(shí)的圖片
  use: {
    loader: 'url-loader',
    options: {
      limit: 1,  // 200k 200 * 1024
      outputPath: '/img/',   // 打包后輸出地址
      publicPath: 'http://www.'
    }
  }
}

四,、插件[plugins]

4.1html-webpack-plugin

使用'html-webpack-plugin’插件自定義打包html文件

npm install html-webpack-plugin -D

在webpack.config.js文件中，添加配置代碼：

const htmlWebpackPlugin = require('html-webpack-plugin')//引入插件

plugins:[//放置所有的webpack插件
    new htmlWebpackPlugin({//用于使用模板打包時(shí)生成文件
        template:'',//模板文件
        filename:'',//打包后生成的文件
        hash:true,//添加hash值解決緩存問題
        minify:{
            removeAttributeQuotes:true,//刪除屬性雙引號(hào)
            collapseWhitespace:true//折疊空行變?yōu)橐恍?        }
    })
]

4.2 mini-css-extract-plugin

抽離css樣式,，成單獨(dú)文件

npm install mini-css-extract-plugin -D

在webpack.config.js中配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 壓縮css

module.exports={
    plugins: [
      new MiniCssExtractPlugin({
          filename: 'css/main.css'//輸出文件名
      })
    ],
    module:{
        rules:[
            {
              test: /\.css$/,   // css 處理
              use: [
                // {
                //     loader: 'style-loader',
                // },
                // 此時(shí)不需要style-loader
                MiniCssExtractPlugin.loader,   // 抽離
                'css-loader', // css-loader 用來解析@import這種語法,
                'postcss-loader'
              ]
            }
        ]
    }   
}

4.3 壓縮css,，js代碼

yarn add optimize-css-assets-webpack-plugin -D
yarn add uglifyjs-webpack-plugin -D

2、在webpack.config.js文件中配置代碼：

// 用了`mini-css-extract-plugin`抽離css為link需使用`optimize-css-assets-webpack-plugin`進(jìn)行壓縮css,使用此方法壓縮了css需要`uglifyjs-webpack-plugin`壓縮js
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")//壓縮css
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")//壓縮js

module.exports = {
  optimization: {              // 優(yōu)化項(xiàng)
    minimizer: [
      new UglifyJsPlugin({     // 優(yōu)化js
        cache: true,           // 是否緩存
        parallel: true,        // 是否并發(fā)打包
        // sourceMap: true     // 源碼映射 set to true if you want JS source maps
      }),
      new OptimizeCSSAssetsPlugin({})    // css 的優(yōu)化
    ]
  },
  mode: 'production',
  entry: '',
  output: {},
}

五,、配置優(yōu)化項(xiàng)

5.1 模塊熱更新（HMR）

只存在于開發(fā)環(huán)境,，哪塊更新只更新那塊

• 配置熱更新，在devServer中配置hot,，開啟HMR功能

 devServer:{
        contentBase: resolve(__dirname,'build'),//自動(dòng)構(gòu)建目錄,，打包后的文件夾
        compress:true,
        port:3000,
        open:true,
        hot:true//開啟熱更新
    }

此時(shí)樣式文件已經(jīng)可以實(shí)現(xiàn)熱更新，因?yàn)閟tyle-loader內(nèi)部實(shí)現(xiàn)了,但是js和html文件會(huì)出現(xiàn)問題,。

（1）解決html文件問題,，將entry改為數(shù)組，引入index.html文件,，

html文件：默認(rèn)不能使用HMR功能,，同時(shí)會(huì)導(dǎo)致問題：html文件不能熱更新(不用做HMR功能)

 entry:['./src/index.js','./src/index.html'],

（2）解決js文件問題，配置js文件

js文件：默認(rèn)不能使用HMR功能 --需要修改js代碼,，添加支持,，入口js文件是沒法處理的,，這里處理非入口的print.js文件

import print from './print'

print();

if(module.hot){
    //一旦 module.hot 為true,說明開啟了HMR功能,。 -->讓HMR功能代碼失效
    module.hot.accept('./print.js',function(){
        //方法會(huì)監(jiān)聽 print.js文件變化，一旦發(fā)生變化,，其他模塊不會(huì)重新打包構(gòu)建,。
        //會(huì)執(zhí)行后面的回調(diào)函數(shù)
        print();
    })
}

5.2調(diào)試工具（devtool）

利于代碼調(diào)試，顯示報(bào)錯(cuò)準(zhǔn)確行數(shù),；

devtool: 'source-map'  //cheap-module-souce-map

參數(shù)介紹

/**
 * source-map :一種提供源代碼到構(gòu)建后代碼的映射技術(shù)（如果構(gòu)建后代碼出錯(cuò),，可以通過映射追蹤源代碼錯(cuò)誤）
 * [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
 * 
 * source-map:外部
 *  錯(cuò)誤代碼準(zhǔn)確信息 和 源代碼的錯(cuò)誤位置
 * inline-source-map:內(nèi)聯(lián)
 * 錯(cuò)誤代碼準(zhǔn)確信息 和 源代碼的錯(cuò)誤位置
 * 只生成一個(gè)內(nèi)聯(lián)source-map
 * hidden-source-map:外部
 * 錯(cuò)誤代碼的錯(cuò)誤原因，但是沒有錯(cuò)誤位置
 * 不能追蹤源代碼錯(cuò)誤,，只能提示到構(gòu)建后代碼的錯(cuò)誤位置
 * eval-source-map:內(nèi)聯(lián)
 * 每個(gè)文件都生成對(duì)應(yīng)的source-map,，都在eval
 * 錯(cuò)誤代碼準(zhǔn)確信息 和 源代碼的錯(cuò)誤位置
 * nosources-source-map:外部
 * 能找到錯(cuò)誤代碼的準(zhǔn)確信息，但是沒有任何源代碼信息
 * cheap-source-map:外部
 * 提示錯(cuò)誤信息,，和源代碼的錯(cuò)誤位置,，但是只能精確到某一行
 * cheap-module-source-map
 * 錯(cuò)誤代碼準(zhǔn)確信息 和 源代碼的錯(cuò)誤位置
 * module會(huì)將loader的source map加入
 * 
 * 內(nèi)聯(lián) 和 外部的區(qū)別：1.外部生成了文件,，內(nèi)聯(lián)沒有  2.內(nèi)聯(lián)構(gòu)建速度更快
 * 
 * 開發(fā)環(huán)境：速度快，調(diào)試更友好
 *   速度快(eval>inline>cheap>...)
 *      eval-cheap-source-map
 *      eval-source-map
 *   調(diào)試更友好
 *      souce-map
 *      cheap-module-source-map
 *      cheap-source-map
 * 
 *    --> eval-source-map 調(diào)試更友好/  eval-cheap-module-source-map 性能更好
 * 
 * 生產(chǎn)環(huán)境：源代碼要不要隱藏,？調(diào)試要不要更友好
 *    內(nèi)聯(lián)會(huì)讓代碼體積變的非常大,，所以在生產(chǎn)環(huán)境中不使用內(nèi)聯(lián)
 *    nosources-source-map 代碼全部隱藏
 *    hidden-source-map 只隱藏源代碼，會(huì)提示構(gòu)建后代碼錯(cuò)誤信息
 * 
 *    -->source-map / cheap-module-souce-map
 */

react項(xiàng)目中devtool配置如下

devtool: isEnvProduction
      ? shouldUseSourceMap
        ? 'source-map'
        : false
      : isEnvDevelopment && 'cheap-module-source-map',

5.3 提高匹配效率 oneOf

提高loader匹配效率,，使用方法如下,，匹配到一個(gè)loader后，后面的就不會(huì)再繼續(xù)匹配了,。

注意：不能有兩個(gè)配置處理同一種類型文件
module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                // //優(yōu)先執(zhí)行
                enforce:'pre',
                loader:'eslint-loader',
                options:{
                    fix:true
                }
            },
            {
                //下面的loader只會(huì)匹配一個(gè),，處理性能更好
                //注意：不能有兩個(gè)配置處理同一種類型文件
                oneOf:[
                    {
                        test:/\.css$/,
                        use:[...commenCssLoader]
                    },
                    {
                        test:/\.less$/,
                        use:[...commenCssLoader,'less-loader']
                    },
                ]
            }
        ]
    },

5.4 babel緩存

不用重新加載所有的文件，用戶第二次進(jìn)入頁面的時(shí)候直接讀取緩存

1. 在匹配.js文件的loader中寫入配置cacheDirectory

{
    test:/\.js$/,
    exclude:/node_modules/,
    loader:'babel-loader',
    options:{
        presets:[
            [
                '@babel/preset-env',
                {
                    useBuiltIns:'usage',
                    corejs:{version:3},
                    targets:{
                        chrome:'70',
                        firefox:'62',
                        ie:'9',
                        safari:'10',
                        edge:'17',
                    }
                }
            ]
        ],
        //開啟babel緩存
        //第二次構(gòu)建時(shí),，會(huì)讀取之前的緩存
        cacheDirectory:true
    }
},

2. 給輸出的js文件還有css文件設(shè)置打包輸出名稱

output:{
filename:'js/build.[contenthash:10].js',
path:resolve(__dirname,'build')
},
 new MiniCssExtractPlugin({
filename:'css/build.[contenthash:10].css'
}),

配置詳情

/**
 * babel緩存
 *   cacheDirectory:true
 * 文件資源緩存
 *   hash:每次webpack構(gòu)建時(shí)會(huì)生成一個(gè)唯一的hash值,。
 *      問題：因?yàn)閖s和css同時(shí)使用一個(gè)hash值。
 *        如果重新打包,，會(huì)導(dǎo)致所有緩存失效,。(可能只改變了一個(gè)文件)
 *   chunkhash：根據(jù)chunk生成的hash值。如果打包來源于同一個(gè)chunk,那么hash值就一樣
 *      問題：js和css的hash值還是一樣的,。因?yàn)閏ss是在js中被引用的,，兩個(gè)同屬一個(gè)chunk
 *   contenthash: 根據(jù)文件的內(nèi)容生成hash值。不同文件hash值一定不一樣
 */

5.5 tree shaking（樹搖）

去除無用代碼(未使用的代碼)

自動(dòng)開啟條件：

1. 必須使用es6模塊化,。
2. 開啟mode:production環(huán)境,。
3. 在package.json中配置sideEffects

/**
  * tree shaking（樹搖）:
  * 去除無用代碼(未使用的代碼)
  * 自動(dòng)開啟條件：1.必須使用es6模塊化。2.開啟mode:production環(huán)境,。
  * 作用:減少代碼體積
  * 
  * 在package.json中配置
  * "sideEffects":false 所有代碼都沒有副作用 （都可以進(jìn)行tree shaking）
  *   問題：可能會(huì)把css/ @babel/polyfill (副作用)文件干掉
  *   解決：
  *     "sideEffects":["*.css"]
  */

六,、打包多頁應(yīng)用

// 多入口
let path = require('path')；
let HtmlWebpackPlugin = require('html-webpack-plugin'),；

module.exports = {
  mode: 'development',
  entry: {
    home: './src/index.js',
    other: './src/other.js'
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'home.html',
      chunks: ['home']
    }),
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'other.html',
      chunks: ['other', 'home']   // other.html 里面有 other.js & home.js
    }),
  ]
}