Webpack浅入门 | 青训营笔记

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

什么是Webpack

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具(module bundler)。

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

Webpack核心思想：一切皆模块

webpack将所有的依赖文件视为模块，webpack通过对这些模块的分析，完成转换、压缩、合成、混淆等操作，将所有的项目文件打包成最原始的静态资源。

webpack 的核心概念

entry: 入口
output: 输出
loader: 模块转换器，用于把模块原内容按照需求转换成新内容
plugins: 扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情

Webpack用法

安装：npm i -D webpack webpack-cli
编辑配置文件：在webpack.config.js中配置

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

执行编译命令：npx webpack

更多的使用技巧，可以看这篇文章

Webpack打包核心流程

Webpack打包的最简化核心流程分为以下四步：

1. 入口处理

入口处理：从‘entry’文件开始，启动编译流程

2. 依赖解析

依赖解析：从‘entry’文件开始，根据‘require’ or ‘import’ 等语句找到依赖资源

3. 资源解析

资源解析：根据 ‘module’配置，调用资源转移器，将png、css等非标准js资源转译为js内容
递归调用2、3，直到所有资源处理完毕

4. 资源合并打包

资源合并打包：将转译后的资源内容合并打包为可直接在游览器运行的js文件