webpack-Chen’Blog

webpack打包构建流程

前端开发有很多资源, img,css,js,font,ts
有一些资源需要进行处理
- ts
- js
- css
- html html-webpack-plugin
对输出产物进行优化
- optimization
- splitChunkPlugin
  所有文件资源都会被打包成一个文件，为了解决这一问题，提出了分chunk、css 提取
输出产物

核心模块

webpack-cli webpack构建工具脚手架
webpack webpack构建工具
webpack-dev-server 能自动编译并刷新浏览器，支持热模块替换（HMR）
通过在webpack配置中添加devServer对象，设置host和port等参数，可以实现代码保存时自动打包和运行。

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/main.js", // 将 js 文件输出到 static/js 目录中
  },
  module: {
    rules: [],
  },
  plugins: [],
  // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    proxy:{ 	// 配置代理
        '/api': {
            target: 'http://localhoust:9000',
            pathRewrite: {'/api': '/'}
        }
    }  
  },
  mode: "development",
};

Webpack 初始化操作

1. 初始化配置文件
    ·entry
    ·output
    ·module
    ·loader
    ·plugins
2. 初始化compiler对象
    compiler compilation
3. 挂载插件
    webpack最核心内容， tapable实现，里面有 tap、run方法

入口解析工作

- entry
    1. 单文件入口 (使用字符串形式)
    2. 多文件入口 (使用数组形式)
    3. 指定入口文件 (使用对象形式配置)
- 解析依赖   生成依赖图
- 模块处理 module   (对应的文件使用对应的loader来处理)
    1. ts   ts-loader
    2. js   babel-lader
    3. css  css-loader、style-loader
    4. img  image-webpack-loader、file-loader、url-loader
    5. 处理.xxx文件，  xxx-loader (自定义loader、plugin)

module.exports = {
    module: {
        rules: [
            {
                test: 'js'  // 正则匹配对应文件
                use: ['cache-loader','babel-loader']
            },
            {
                test: /ts/,
                use: ['ts-loader']
            },
            ...
        ]
    }
}

- 生成 chunk

优化

- 模块去重合并
- 代码压缩，esbuild、terser
- tree-shaking(树摇) 把未使用的内容，代码模块去掉

资源输出

根据配置里面给到的output输出资源
写入文件系统 fs操作

热更新(HMR)

文件变化监听
局部模块更新
会开一个ws服务

工作中常用的loader与plugin，实现过哪些loader、plugin

常用loader

1. style-loader、css-loader、sass-loader、scss-loader
    · css-loader负责将.css文件进行解析，但并不会讲解析后的css插入到页面中
    · style-loader : 完成页面插入css操作
2. babel-loader
    · babel可以用来转换，但是是通过具体的babel插件来完成的，所以我们不仅要下载babel，也需要下载你所需要的对应的插件
    npm install babel-loader @babel/core @babel/preset-env -D
    支持TS文件转换需要另外安装 @babel/preset-typescript
    
3. url-loader、file-loader (处理图片文件两种方式)
    · file-loader会将文件输出到指定的输出目录，并返回文件的URL地址。

    · url-loader则会将小于指定阈值的文件转换为Base64格式的字符串，将其嵌入到JS或CSS代码中，以减少HTTP请求的数量。而对于大于指定阈值的文件，url-loader则会将其输出到指定的输出目录，并返回文件的URL地址。
4. image-webpack-loader  压缩图片
5. ts-loader  处理TS文件
6. cache-loader   文件缓存

常见plugin

1. html-webpack-plugin 处理Html文件 开启minify配置启动压缩
2. miniCssExtractPlugin 单独把Css文件抽取出来
3. css-minimizer-webpack-plugin 压缩CSS文件
4. TerserWebpackPlugin  JS代码压缩
5. image-webpack-loader 图片压缩
6. splitChunksPlugin    webpack内置插件，用于分包
7. hard-source-webpack-plugin   webpack缓存插件，功能类似于webpack5内置的缓存

自定义loader、plugin

loader的本质是函数

自定义loader是用来针对性的处理某些文件

// 自定义loader  针对 .xiagao 文件进行处理
module.exports = function(source){
    console.log('cust-loader', source);
    source = source.replace(/custFile/, '自定义文件')
    return source;
}

// webpack.config.js
module: {
        rules: [
            {
                test: /\/.css$/,
                // loader执行遵循从右往左，从下往上执行
                // loader: 'css-loader',  简写模式
                // use: ['style-loader', 'css-loader'],  多个loader，但不需要配置
                // loader需要配置时
                // use: [
                //     'style-loader',
                //     'css-loader',
                //     {
                //         loader: 'postcss-loader',
                //         options: {
                //             plugins: ['autoprefixer']
                //         }
                //     }
                // ],
            },
            {
                test: /\.xiagao/,
                use: {
                    loader: path.resolve(__dirname, './loaders/cust-loader.js')
                }
            }
        ]
    },

plugin的本质是类

module.exports = class custPlugin{
    constructor(){}

    // 默认第一个参数就是compiler
    apply(compiler){
        // console.log('cust-plugin', compiler)


        // 
        compiler.hooks.emit.tap('custPlugin', (compilation) => {
            // compilation.assets  打包构建的产物
            console.log('custPlugin', compilation.assets)
        })
    }    
}

// webpack.config.js
plugins: [
    new HtmlWebpackPlugin(),  
    new custPlugin(),
]