什么是Webpack

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

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

使用Webpack（示例）

1. 安装

npm i -d webpack webpack-cil

2. 编辑配置文件

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']
        }]
    }
}

3. 执行编译命令

npx webpack

核心流程（极简版）

1. 入口处理

从'entry'文件开始，启动编译流程

2. 依赖解析

从'entry'文件开始，根据'require'or'import'等语句找到依赖资源

3. 资源解析

根据'module'配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容

（递归调用2、3，直到所有资源处理完毕）

4. 资源合并打包

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

模块化+一致性

• 多个文件资源合并成一个，减少http请求数
• 支持模块化开发
• 支持高级JS特性
• 支持Typescript、CoffeeScript语言
• 统一图片、CSS、字体等其他资源的处理模型
• Etc...

使用Webpack

关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可分为两类：

• 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项
• 工具类：主流程之外，提供更多工程化能力的配置项

使用Webpack——流程类配置

输入

• 'entry'
• 'context'

模块化

• 'resolve'
• 'externals'

模块转译

• 'module'

后处理

• 'optimization'
• 'mode'
• 'target'

使用Webpack

使用Webpack——处理CSS

使用Webpack——接入Babel

使用Webpack——生成HTML

使用Webpack——工具线

使用Webpack——HMR

1. 开启HMR

module.exports = {
    devServer:{
    hot:true
    }
};

2. 启动Webpack

npx webpack serve

使用Webpack——其他工具