Webpack5 - 基本使用

一. webpack有何作用

webpack是一个Javascript应用程序的模块打包器。它可以递归地构建一个应用程序的模块依赖关系图，然后将所有模块打包在一起。

为什么需要模块打包器：现在的应用程序模块文件很多，如果不打包会造成频繁的网络请求，不适用于生产环境；同时模块规范如ES Modules仍存在兼容问题。

模块打包工具做什么：编译代码的新特性，把各种不同类型的资源模块打包。

webpack核心工作原理: 找到入口文件（通常是一个js文件），找到入口文件依赖的各个模块，形成一棵模块依赖树，用Loader来加载处理每个模块，并把处理后的内容打入输出文件(通常命名为bundle.js)。

二. webpack安装和使用

1. 安装

cnpm install --save-dev webpack webpack-cli

2. 项目根目录下创建webpack配置文件，webpack.config.js：

const path = require('path')

/** @type { import('webpack').Configuration } */
module.exports = {
    mode: "none",                 // 打包模式 production | development | none
    entry: './src/main.js',       // 打包入口文件
    output: {                     // 打包输出文件名称和目录
        filename: 'bundle.js',
        path: path.join(__dirname, 'output'),  // 输出文件目录需绝对路径
        // publicPath: 'output/',              // 默认为''表示网址根目录
    },

    module: {
        rules: [
            {
                test: /.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /.css$/,       // 匹配 .css 文件
                use: [               // 对匹配文件 从后到前 执行 loader
                    'style-loader',  // 把 打包成的 js 代码，挂载到 Document
                    'css-loader',    // 将 .css 文件打包为 js代码
                ]
            },
            {
                test: /.jpeg$/,
                use: 'file-loader'
            },
            {
                test: /.jpeg$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10 * 1024 // 10 KB
                    }
                }
            },
            {
                test: /.html$/,
                use: {
                    loader: 'html-loader',
                    options: {
                        attrs: ['img:src', 'a:href']
                    }
                }
            }
        ]
    }

}

3. 打包

  执行如下命令，完成打包：

yarn webpack

  执行后，可在项目根目录下发现打包后的文件夹 output 。

本文 完。