摘要：進(jìn)入入口起點(diǎn)后，會(huì)找出有哪些模塊和庫(kù)是入口起點(diǎn)直接和間接依賴的。用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換。指定生產(chǎn)還是開(kāi)發(fā)入口文件打包后的文件名這里需指定一個(gè)絕對(duì)路徑我們需要的模塊去解析路徑包含一系列的規(guī)則是一個(gè)具有屬性的對(duì)象。

前文：
進(jìn)擊webpack 4 （基礎(chǔ)篇 一）

webpack 有4大概念

入口(entry)

輸出(output)

loader

插件(plugins)

入口與出口

//webpack.config.js
const path = require("path")
module.exports = {
    mode:"development",  // 指定生產(chǎn)還是開(kāi)發(fā)
    entry:"./src/index.js", // 入口文件
    output:{
        filename:"bundle.js", // 打包后的文件名
        path:path.resolve(__dirname,"./dist")  // 這里需指定一個(gè)絕對(duì)路徑 我們需要node的path模塊去解析路徑
    }
}

mode: 指定環(huán)境是development還是production 決定了打包出來(lái)的文件是壓縮還是未壓縮的

entry： 入口起點(diǎn)(entry point)指示 webpack 應(yīng)該使用哪個(gè)模塊，來(lái)作為構(gòu)建其內(nèi)部依賴圖的開(kāi)始。進(jìn)入入口起點(diǎn)后，webpack 會(huì)找出有哪些模塊和庫(kù)是入口起點(diǎn)（直接和間接）依賴的。 其中分為單入口跟多入口配置 可以是string，array，object

 // entry:"./src/index.js" 是下面的簡(jiǎn)寫(xiě)
    entry:{
            main： "./src/index.js"
        },

output:包含打包后的名字跟路徑， 如果是多入口應(yīng)用， 可以設(shè)置filename為[name].js， entry里的key值會(huì)替換掉name 生成文件夾。

loader

loader 用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換。

const path = require("path")
module.exports = {
    mode:"development",  // 指定生產(chǎn)還是開(kāi)發(fā)
    entry:"./src/index.js", // 入口文件
    output:{
        filename:"bundle.js", // 打包后的文件名
        path:path.resolve(__dirname,"./dist")  // 這里需指定一個(gè)絕對(duì)路徑 我們需要node的path模塊去解析路徑
    },
    module: {
        rules: []  // 包含一系列的規(guī)則
    }
}

plugin

plugin是一個(gè)具有 apply 屬性的 JavaScript 對(duì)象。apply 屬性會(huì)被 webpack compiler 調(diào)用，并且 compiler 對(duì)象可在整個(gè)編譯生命周期訪問(wèn)。

// 代碼省略
module: {
        rules: [ ] //包含一系列規(guī)則
    },
    plugins: [
        // new PluginName 去生成js對(duì)象供給 webpack compiler 調(diào)用
    ]

本地開(kāi)發(fā)配置服務(wù)

yarn add webpack-dev-server -D

本地開(kāi)發(fā)需要安裝webpack-dev-server 內(nèi)部是基于express 實(shí)現(xiàn)的一個(gè)服務(wù) ，可讓讓服務(wù)運(yùn)行在本地，開(kāi)發(fā)更方便

安裝完畢在dist目錄下新建一個(gè)index.html 并且引入打包好后的bundle.js

運(yùn)行npx webpack-dev-server

并未顯示index.html 需要在webpack-config.js 配置

plugins: [
        // new PluginName 去生成js對(duì)象供給 webpack compiler 調(diào)用
    ],
    devServer:{  
        contentBase: "./dist",  //當(dāng)前服務(wù)以哪個(gè)作為靜態(tài)資源路徑
        host:"localhost", // 主機(jī)名 默認(rèn)是localhost
        port:3000, // 端口配置
        open:true, // 是否自動(dòng)打開(kāi)網(wǎng)頁(yè)
    }

重新運(yùn)行npx webpack-dev-server 自動(dòng)打開(kāi)網(wǎng)頁(yè)并且能正常顯示頁(yè)面

如果覺(jué)得npx 麻煩的話，可以在package.json 配置腳本

"scripts": {
    "dev": "webpack-dev-server --config webpack.config.js"
  }

注意：為了顯示效果，不用每次手動(dòng)修改html 我們先裝一個(gè)html模板插件

yarn add html-webpack-plugin -D 

webpack-config.js 配置

const HtmlWebpackPlugin = require("html-webpack-plugin")

//....
 plugins: [
        // new PluginName 去生成js對(duì)象供給 webpack compiler 調(diào)用
        new HtmlWebpackPlugin({
            template:"./index.html",  // 作為模板的文件
            filename:"index.html" //打包生成后的文件 
        })
    ],

進(jìn)入正題：
樣式文件分為css，less scss 之類的 需要各種loader 先以css作為 樣例
需要先安裝 style-loader跟css-loader

css的處理

yarn add style-loader css-loader -D

webpack.config.js 配置

// 代碼省略
module: {
        rules: [
            {
                test:/.css$/,
                use:["style-loader","css-loader"]
            }
        ]
    },

rules 里放的是一個(gè)個(gè)規(guī)則對(duì)象， test是匹配到的文件 loader是從下往上執(zhí)行， 從右往左執(zhí)行， 也就是說(shuō)命中css結(jié)尾的文件后 先用css-loader去解析，解析完畢后交由style-loader 插入到html模板里

此處use內(nèi)部 有2種寫(xiě)法

loader:["style-loader","css-loader"] // 字符串寫(xiě)法

loader:["style-loader",{loader:"css-loader",options:{}} 對(duì)象寫(xiě)法 在options里可以配置你需求的參數(shù)

less的處理

需要安裝less less-loader

yarn add less less-loader -D

//webpack-config.js
  module: {
        rules: [
            {
                test:/.less$/,
                use:["style-loader","css-loader","less-loader"]
            }
        ]
    },

sass 配置同理

- 給樣式加前綴 如-webkit- 需要安裝autoprefixer， postcss-loader

yarn add postcss-loader autoprefixer -D

根目錄需要新建postcss.config.js

// postcss.config.js
module.exports = {
  plugins: [
    require("autoprefixer")
  ]
}

webpack-config.js
 rules: [
           {
                test: /.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            }
        ]

提取樣式文件

yarn add mini-css-extract-plugin -D

//config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
// 注意MiniCssExtractPlugin 不能在development環(huán)境中使用 ??！
 //....
mode:"production",  // 指定生產(chǎn)還是開(kāi)發(fā)
   
    module: {
        rules: [
           {
                test: /.less$/,
                use: [
                     MiniCssExtractPlugin.loader,
                    "css-loader",
                    "less-loader"
                ]
            }
        ]
    },
    plugins: [
        // new PluginName 去生成js對(duì)象供給 webpack compiler 調(diào)用
        new HtmlWebpackPlugin({
            template:"./index.html",
            filename:"index.html"
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ]
    //...  

- 壓縮提取出來(lái)的樣式文件

需要用到uglifyjs-webpack-plugin，optimize-css-assets-webpack-plugin

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

//webpack-config.js
module.exports = {
    //...
    optimization: {  // 優(yōu)化項(xiàng)   這里OptimizeCSSAssetsPlugin 需要UglifyJsPlugin
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true // set to true if you want JS source maps
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
}

這里自然輪到我們的babel出場(chǎng)啦 把es6解析為es5 需要這幾個(gè)loader

yarn add babel-loader @babel/core @babel/preset-env -D

 {
    test:/.js/,
    use:{
        loader:"babel-loader",
        options:{
            presets:[
                "@babel/preset-env"
            ]
        }
    }
},

es7的語(yǔ)法類似

class Parent{

    }

這種需要@babel/plugin-proposal-class-properties

yarn add @babel/plugin-proposal-class-properties -D

另外裝飾器方面需要

 yarn add @babel/plugin-proposal-decorators -D

 {
    test:/.js/,
    use:{
        loader:"babel-loader",
        options:{
            presets:[
                "@babel/preset-env"
            ],
            plugins: [
                ["@babel/plugin-proposal-decorators", { "legacy": true }],
                ["@babel/plugin-proposal-class-properties", { "loose" : true }]
            ]
        }
    }
},

像一些js內(nèi)置的api 比如生成器 這種需要

yarn add @babel/plugin-transform-runtime -D

 exclude:/node_modules  // 必須配置 不然會(huì)解析到node_modules 里的js
 //....
 plugins: [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose" : true },"@babel/plugin-transform-runtime"]
   
]

還有一些es7 實(shí)例上的某些方法 。字符串的include 這些也要轉(zhuǎn)換

yarn add @babel/polyfill -D

需要添加到entry上或者在入口文件導(dǎo)入

全局變量的引入問(wèn)題

有時(shí)候我們不想在每個(gè)模塊都導(dǎo)入某個(gè)庫(kù)或者插件 只需要這樣配置

 plugins: [
    // new PluginName 去生成js對(duì)象供給 webpack compiler 調(diào)用
    new webpack.ProvidePlugin({   // 自動(dòng)在每個(gè)模塊內(nèi)先導(dǎo)入了React
        React:"react"
    }),
],

yarn add file-loader url-loader -D

 {
    test: /.png|jpg|gif$/,
    use: {
        loader:"url-loader",
        options:{
            limit:2048  // 小于2k 的會(huì)用url-loader轉(zhuǎn)為base64 否則file-loader轉(zhuǎn)為真實(shí)img
            outputPath:"static/image/"  //指定輸出目錄
        },
    
    }
    
},

預(yù)告： 多頁(yè)面配置 跨域 區(qū)分不同環(huán)境 映射