webpack(一）

2-2-2-1 webpack打包

1) 快速上手

• npm i webpack -D 项目安装
• npx webpack 默认执行打包（src ---> dist)

const path = require('path');

module.exports = {
    entry: './src/main.js', // 入口文件
    output: {
        filename: 'bundle.js',  // 打包输出文件
        path: path.join(__dirname, 'output') // 输出文件目录
    }
}

2) 工作模式（mode）

• production 生产
• development 开发
• none

3) 资源模块加载

**loader** 是webpack的核心特性，借助于loader就可以加载任何类型的资源

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

4) 文件资源加载器

file-loader

{
                test: /\.(jpg|png)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        limit: 10 * 1024 // 10 KB
                    }

                }
            },

5) URL 加载器

• 小文件使用 Data URLs, 减少请求次数(url-loader)
• 大文件单独提前存放，提高加载速度

6) 常用加载器分类

• 编译转换类
• 文件操作类
• 代码检查类(eslint-loader)

7) webpack 与 ES2015

• webpack只是打包工具
• 加载器可以用来编译转换代码

8) webpack 模块加载方式

• 遵循ES Module 标准的 import 声明
• 遵循 Common JS 标准的 require 函数
• 遵循 AMD 标准的 define 函数 和 require 函数
• 样式代码猴子那个 @import 指令 和 url 函数
• HTML 代码中图片标签的 src 属性

9) webpack 核心工作原理

10) webpack 插件机制

**loader** 专注实现资源模块加载，**Plugin** 解决其他自动化工作

• 自动清除输出目录插件 clean-webpack-plugin
• 自动生成使用 bundle.js 的 HTML html-webpack-plugin

// 用于生成 index.html
        new HtmlWebpackPlugin({
            title: 'Webpack Plugin Sample',
            meta: {
                viewport: 'width=device-width'
            },
            template: './src/index.ejs'
        }),
        // 用于生成 about.html
        new HtmlWebpackPlugin({
            filename: 'about.html'
        }),

• copy-html-plugin

new CopyWebpackPlugin({
            patterns:[
                { from: 'public'},
              ],
            })

11) webpack 插件

一个函数或者是一个包含apply方法的对象,通过在生命周期的钩子中挂载函数实现扩展

// 自定义插件，去除输出js文件的注释
class MyPlugin {
    apply(compiler){
        console.log('MyPlugin start!!!')

        compiler.hooks.emit.tap('MyPlugin', compilation => {
            // compilation => 可以理解为此次打包的上下文
            for (const name in compilation.assets) {
                // console.log(name) // 文件名
                // compilation.assets[name].source() 文件内容
                if (name.endsWith('.js')) {
                    const contents = compilation.assets[name].source(); // 获取文件内容
                    // 替换所有 /** */ 类型(/** */, /*** */, /**** */ 等)
                    const withoutComments = contents.replace(/\/\*\*+\*\//g, ''); 

                    // 替换输出内容
                    compilation.assets[name] = {
                        source: () => withoutComments,
                        size: () => withoutComments.length
                    }
                }
            }
        })
    }
}