1. 簡(jiǎn)介

webpack（模塊打包工具）：webpack是一個(gè)打包模塊化的Javascript的工具，它會(huì) 從入口模塊出發(fā)，識(shí)別出源碼中的模塊化導(dǎo)入語(yǔ)句，遞歸的找出入口文件的所有依賴，將入口和其他所有的依賴打包到一個(gè)單獨(dú)的文件.

2. 安裝

2.1 全局安裝

會(huì)造成多個(gè)項(xiàng)目只能使用同一個(gè)webpack版本

//在webpack 4.0版本需要安裝兩個(gè)
npm install webpack webpack-cli -g
//檢查版本
webpack -v
// 卸載
npm uninstall webpack webpack-cli -g

2.2 局部安裝

支持多個(gè)項(xiàng)目使用不同webpack版本

npm install webpack webpack-cli -D
 //局部安裝 webpack 命令找不到

如何使用 
方法一： ./node_modules/.bin/webpack
node_modules/.bin 下 的文件都是可執(zhí)行文件，都是原文件的軟連接（符號(hào)鏈接）
.bin 下面的文件都是npm 生成的
#!/usr/bin/env node
#!：一般放在第一行，告訴使用者使用什么程序執(zhí)行下面代碼（軟鏈接和符號(hào)鏈接叫法都和這個(gè)有關(guān)系）
/usr/bin/env ：node 的位置
node：使用node執(zhí)行
方法二：npx webpack
npx 會(huì)自動(dòng)查找當(dāng)前依賴包中的可執(zhí)行文件，如果找不到，就會(huì)去 PATH 里找。如果依然找不到，就會(huì)幫你安裝。
方法三： 配置package.json中的script
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webapck"
  },
執(zhí)行 npm run dev
npm run 會(huì)創(chuàng)建一個(gè)shell腳本，這個(gè)腳本把當(dāng)前項(xiàng)目的node_modules/.bin的絕對(duì)路徑放在了系統(tǒng)的環(huán)境變量中


env：查看環(huán)境變量
rm -rf 與 rimraf 一樣都是刪除文件
scripts 中 有兩種腳本鉤子pre（前置鉤子）,post（后置鉤子），在dev前加上pre成predev，當(dāng)執(zhí)行dev的時(shí)候，回先執(zhí)行predev，postdev為執(zhí)行完dev后執(zhí)行的命令

package.json 中的bin 作用
當(dāng)文件被引入進(jìn)去的時(shí)候,npm將軟鏈接這個(gè)文件到prefix/bin里面,以便于全局引入,或在./node_modules/.bin/目錄里； bin中的key值是引入時(shí)候的名稱

3. 配置

webpack 4.x 默認(rèn)只支持 js和json格式

默認(rèn)配置 webpack.config.js

const path=require('path');
module.exports={
    //構(gòu)建入口
    entry:'./src/index.js',
    output:{
        // path 為絕對(duì)路徑 ，輸出的目錄
        path:path.resolve(__dirname,'./dist'),
        filename:"[name].js",//輸出的名稱
    },
    mode:"development"
}

3.1 入口 entry

指定webpack打包入口文件:Webpack 執(zhí)行構(gòu)建的第一步將從 Entry 開(kāi)始，可抽象成輸入

適合一個(gè)單頁(yè)面（spa），輸入為字符串或者數(shù)組
entry: string|Array<string> 
entry: './path/to/my/entry/file.js' | ['./path/to/my/entry/file.js']


適合一個(gè)多頁(yè)面應(yīng)用（mpa），輸入為對(duì)象
entry: {[entryChunkName: string]: string|Array<string>}
上面的entry相當(dāng)于
entry:{
  main: './path/to/my/entry/file.js' ,
}
對(duì)象的key值為output輸出適合的 name（默認(rèn)為main）,

3.2 出口 output

打包轉(zhuǎn)換后的文件輸出到磁盤位置

    output:{
        // path 為絕對(duì)路徑 ，輸出的目錄
        path:path.resolve(__dirname,'./dist'),
        filename:"[name]-[hash:6].js",
      //輸出的名稱 name為多頁(yè)面的key或者默認(rèn)的main,
      //hash為此次構(gòu)建的hash值，用于與緩存，后面的：6可以設(shè)置也可以不設(shè)置，設(shè)置數(shù)值為截取個(gè)數(shù)（長(zhǎng)度）
    },

3.3 mode

Mode用來(lái)指定當(dāng)前的構(gòu)建環(huán)境（‘none' | 'production' | 'development'）

3.4 module

loader，模塊解析，模塊轉(zhuǎn)換器?，用于把模塊原內(nèi)容按需轉(zhuǎn)換成新內(nèi)容，webpack默認(rèn)只知道如何處理js和JSON模塊，?那么其他模塊如何處理呢，這就用到了不同的loader,但是一個(gè)loader只處理一件事

loader在一個(gè)test中 執(zhí)行有順序，從右像左，從下到上

module:{
        rules:[
            {
                test:/.css$/,//處理css
                use:[
                    {
                        loader:'style-loader' //把css加入到html中
                        options:{
                            injectType: "singletonStyleTag"  //將所有的style標(biāo)簽合并成一個(gè)
                        }
                    },
                    },
                    'css-loader' //處理css
                ],
                // use:['style-loader','css-loader']
            },
            {
                test:/.(png|jpe?g|gif)$/,//處理圖片
                use:{
                    // loader:'file-loader', //file-loader 只是移動(dòng)文件，還有一個(gè)
                    loader:'url-loader',//url-loader 內(nèi)部使用file-loader。可以處理所有的file-loader干的事，但是遇到j(luò)pg格式的模塊，會(huì)把該圖片轉(zhuǎn)化成base64格式的字符串。
                    // 打包到j(luò)s里，適合小體積的圖片，大圖片不合適
                    // 額外配置，比如名稱。hash等
                    options:{
                        name:'[name]_[hash:6].[ext]',//輸出name  //name為本身文件的name,ext代表后綴
                        outputPath:'images/' //輸出到的目錄
                    }
                },
            },
            {
                test:/.(woff2?|ttf|svg|eot)$/,//處理字體
                use:{
                    loader:'file-loader', //file-loader 只是移動(dòng)文件，還有一個(gè)
                    options:{
                        name:'[name]_[hash:6].[ext]',//輸出name  //name為本身文件的name,ext代表后綴
                        outputPath:'font/' //輸出到的目錄
                    }
                },
            }
        ]
    }

css自動(dòng)添加前綴

// npm i postcss-loader autoprefixer -D
         {
                test: /.css$/,//處理css
                use: [
                    {
                        loader: 'style-loader', //把css加入到html中
                        options: {
                            injectType: "singletonStyleTag" //將所有的style標(biāo)簽合并成一個(gè)
                        }
                    },
                    'css-loader', //處理css
                    {
                        loader: "postcss-loader",
                        options: {
                            // Necessary for external CSS imports to work
                            // https://github.com/facebookincubator/create-react-app/issues/2677
                            ident: 'postcss',
                            plugins:  [
                                autoprefixer({
                                    browsers: [
                                        '>1%',
                                        'last 4 versions',
                                        'Firefox ESR',
                                        'not ie < 9', // React doesn't support IE8 anyway
                                    ],
                                }),
                            ],
                        }
                    }
                ]
                // use:['style-loader','css-loader']
            },