課程鏈接：1.2.4-自定義Webpack配置_嗶哩嗶哩_bilibili

webpack cli 命令
npx webpack --help 顯示所有命令
npx webpack 打包安裝生成dist文件夾
npx webpack --stats detailed 顯示安裝細(xì)節(jié)
npx webpack --entry ./src/index.js --mode production 以index.js作為入口文件

Webpack配置

• 使用 export default func 之后，import func 注意不要加花括號(hào)
• 為了取代cli命令npx webpack --entry ./src/index.js --mode production ，采用自定義webpack配置,根目錄下創(chuàng)建webpack.config.js

const path = require('path');
module.export = {
    entry: '',
    output: {
        filename: 'bundle.js',
        // __dirname 表示webpack.config.js所在的目錄，path.resolve()方法可以將路徑轉(zhuǎn)換為絕對(duì)路徑
        path: path.resolve(__dirname, '/dist')
    }，
    mode: 'none'
}

• 運(yùn)行npx webpack, 獲得bundle.js, 在index.html中引入bundle.js文件

自動(dòng)引入資源

1. 什么是插件
   如下圖webpack編譯過(guò)程中需要一些工具來(lái)執(zhí)行特定的任務(wù)（打包優(yōu)化，資源管理..），這些工具就是plugin
   
   插件
   
   Webpack插件列表：插件 | webpack 中文文檔
2. 使用HtmlWebpackPlugin自動(dòng)引入資源文件

• 安裝插件 npm install -D html-webpack-plugin
• 配置插件

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

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist')
    },
    mode: 'none',
    plugins: [
        new HTMLWebpackPlugin({
            template: './index.html',
            // 生成的文件名，默認(rèn)為index.html
            filename: 'app.html',
            inject: 'body', // 注入的位置，默認(rèn)為head
        })
    ]
}

• 運(yùn)行npx webpack,生成/dist/app.html 包含了以下引用
  <script defer src="bundle.js"></script></body>

3. 清理dist歷史文件

    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist'),
        clean: true // 配置清理dist文件
    },

搭建開(kāi)發(fā)環(huán)境

1. mode設(shè)置為development
2. 使用sourcemap進(jìn)行代碼調(diào)試
   注意，介于安全與性能風(fēng)險(xiǎn)的考慮，以下配置只適合開(kāi)發(fā)環(huán)境
   更新webpack.config.js

    mode: 'development',
    devtool: 'inline-source-map', // 生成源代碼到打包后代碼的映射，便于調(diào)試

3. 使用watch mode（觀察者模式）
   每次編譯代碼時(shí)，手動(dòng)運(yùn)行npx webpack會(huì)顯得很麻煩。我們可以在webpack啟動(dòng)時(shí)添加“watch”參數(shù)。如果其中一個(gè)文件被更新，代碼將重新編譯，不需要手動(dòng)運(yùn)行整個(gè)構(gòu)建
   npx webpack --watch
4. 使用webpack-dev-server
   提供了一個(gè)基本的web server, 并且具有l(wèi)ive reloading(實(shí)時(shí)重新加載)功能，編譯完成后自動(dòng)刷新瀏覽器頁(yè)面

• 安裝插件 npm install -D webpack-dev-server
• 添加配置

    // 啟動(dòng)webpack-dev-server服務(wù)
    devServer: {
        static: './dist', // 告訴服務(wù)器從什么位置查找文件
    },

注意：webpack-dev-server在編譯之后不會(huì)寫(xiě)入到任何輸出文件。而是將bundle文件保留在內(nèi)存中，然后將它們serve到server中，就好像它們時(shí)掛載在server根路徑上的真實(shí)文件一樣

• 運(yùn)行 npx webpack-dev-server
• 打開(kāi)控制臺(tái)打印的 url http://localhost:8080/

資源模塊

4中類型：

• asset/resource 將文件輸出到指定目錄，并生成唯一的文件名
• asset/inline 將文件轉(zhuǎn)換為base64編碼，直接嵌入到代碼中
• asset/source 導(dǎo)出資源的源代碼
• asset 在導(dǎo)出一個(gè)data URL和發(fā)送一個(gè)單獨(dú)的文件之間自動(dòng)選擇

loader

1. 為了在Javascript模塊中import一個(gè)CSS文件，你需要安裝style-loader和css-loader,并在module配置中添加這些loader:
   npm install -D style-loader css-loader less-loader

{
            test: /\.css|less$/,
            use: ['style-loader', 'css-loader', 'less-loader'] // 使用style-loader和css-loader處理CSS文件,loader鏈?zhǔn)秸{(diào)用，這里的順序是逆序
        }

2. 抽離和壓縮css

• 抽離 npm install mini-css-extract-plugin -D
• 壓縮 npm install css-minimizer-webpack-plugin -D

   optimization: {
        minimizer: [
            new CssMinimizerPlugin()
        ]
    }

3. 加載font字體