这是我参与「第五届青训营」伴学笔记创作活动的第 14 天

构建 Webpack 知识体系（一）

什么是 Webpack

前端项目是由很多资源文件组合而成，为了保证代码的正确运行，要考虑文件之间的引用关系，必须严格按照依赖顺序书写代码，除此之外，还有很多其他问题，大大影响开发效率。

为了解决这些问题，市面上出现了很多工具，如gulp、rollup、vite 等，其中目前最具影响力、应用最为广泛的当属 webpack。

webpack 本质上是一种前端资源编译、打包工具。

多份资源文件打包成一个Bundle
支持Babel、Eslint、TS、CoffeScript、Less、Sass
支持模块化处理css、图片等资源文件
支持HMR+开发服务器
支持持续监听、持续构建
支持代码分离
支持Tree-shaking
支持Sourcemap

使用 Webpack

1.安装

npm i -D webpack webpack-cil

2.编辑配置文件

webpack.config.js

module.export = {
    entry: 'main.js',
    output: {
        filename: "[name].js",
        path: path.join(__dirname, "./dist")
    },
    module: {
        rules:[{
            test: /.less$/i,
            use: ['style-loader', 'css-loader', 'less-loader']
        }]
    }
}

3.执行编译命令

npx webpack

核心流程

入口处理——从 entry 文件开始，启动编译流程
依赖解析——从 entry 文件开始，根据 require or import 等语句找到依赖资源
资源解析——根据 module 配置，调用资源转移器，将 png、css 等非标准 js 资源转译成 js 内容
资源合并打包——将转译后的资源内容合并打包为可直接在浏览器运行的 js 文件

使用 Webpack 处理 CSS

1.安装 Loader

npm i style-loader css-loader

2.添加 module 处理 CSS 文件

const path = require('path')

module.exports = {
    entry: './src/index',
    mode: 'development',
    devtool: false,
    output: {
        filename: `[name].js`,
        path: path.join(__dirname, './dist')
    },
    module: {
        rules: [{
            test: /.css$/,
            use: ['style-loader', 'css-loader']
        }]
    }
}

接入 Babel

1.安装 Loader

npm i -D @babel/core @babel/preset-env babel-loader

2.声明产物出口 output

const path = require('path')

module.exports = {
    entry: './src/index',
    mode: 'development',
    devtool: false,
    output: {
        filename: `[name].js`,
        path: path.join(__dirname, './dist')
    },
    module: {
        rules: [{
            test: /.js$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: [
                        ['@babel/preset-env']
                    ]
                }
            }]
        }]
    }
}

生成 HTML

1.安装依赖、

npm i -D webpack-html-plugin