Webpack

💡 前端资源编译、打包工具

手动管理前端项目资源的缺点：

文件资源过多时，操作繁琐
代码文件之间有依赖关系时需要严格按照依赖顺序
开发与生成环境一致，难以接入TS或JS新特性
难以接入Less，Sass等工具
JS 图片 CSS资源管理模型不一致

核心功能：webpack将一切资源文件视为模块，找出模块之间的依赖关系，按照一定的规则将这些模块组织起来，合并为一个JS文件

核心流程

入口处理：从entry文件开始启动编译流程
依赖解析：根据‘require’，‘import’ 等语句找到依赖资源
资源解析：根据module配置，调用资源转移器，将PNG， css等非标准JS资源转译为JS内容
递归调用 step 2-3 ，直到所有资源处理完毕
资源合并打包：将转译后的资源合并打包为可直接在浏览器运行的JS文件

安装与使用

// 安装
npm i -D webpack webpack-cli

// 执行编译命令
npx webpack

配置

流程类：作用于流程中若干个环节，直接影响打包效果的配置项

资源入口

entry：资源入口（相对路径）
- 数组形式：最后一个文件是资源入口文件，其余文件会被预先构建到入口文件中
- 对象形式：多入口配置（打包生成多个JS文件）
- 函数形式、描述符形式…
context：基础目录（绝对路径），默认为根目录

资源出口

output 资源出口对象
- filename：打包文件名
  - 文件名或相对地址
  - 动态文件名：[fullhash] [name] [id]
  [name] 的取值
  1. entry为字符串或数组时，为文件名为main
  2. entry为对象形式时，文件名为对象的属性名
- path：资源打包后输出位置（绝对路径），默认为dist目录
- publicPath：资源访问路径
- chunkPath：打包过程中非入口文件的的chunk名称

// webpack.config.json

module.exports = {
    entry:'./src/index',                            // 入口文件
    mode: 'none',                                   // 打包模式，默认为生产环境 production
    output:{                                        // 输出文件
        filename: 'bundle.js',
        path: path.join(__dirname, './dist')
    },
    module:{
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']     // css的预处理器
        },{
            test: /\.js$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    preset: [
                        ['@babel/preset-env']       // 接入babel预处理器
                    ]
                }
            }]
        }]
    },
		plugin: [new HtmlWebpackPlugin()]               // 引入自动生成HTML的插件
}

工具类：提供工程化能力的配置项

HMR：模块热替换

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

npx webpack serve

Tree-Shaking：删除dead code

dead code : 模块导出了但没有被其他模块使用

module.exports = {
		// ...
		mode: 'prodection'
		optimization: {
				usedExports: true
		}
}

source map：在浏览器中看到打包前的代码，便于进行调试

module.exports = {
		// ...
		devtool: 'source-map'
}

Loader 预处理器

💡 预处理器本质上是一个函数，接收一个模块资源，将其处理成webpack能使用的模式

module配置项

rules 数组：数组每一项都是一个对象，定义一个预处理器的处理规则。当文件名与test中正则匹配，则通过use中预处理器（）
- test：正则
- use：预处理器
  - 数组形式可以链式调用（顺序为从后向前）
  - 对象形式除loader外，还能具有额外配置项options
- exclude：指定不需要预处理器处理的文件
- include：只对指定路径的匹配文件进行处理

module.exports = {
	// ...
	module: {
		rules: [{
			test: /.css$/，
			use: ['style-loader', 'css-loader']，
			include: '/src',
			exclude: 'node_modules'        // include和exclude同时存在，优先使用exclude配置
		}]
	}
}

css-loader

解析css文件，将其打包进JS文件中

style-loader

通过JS动态生成style标签并将样式代码插入HTML文件的head标签中

plugin 插件

后续再进行整理😵

在老师讲解的知识点上进行了补充，但是仍有很多知识点没有覆盖，后续需继续学习，老师公众号中有很多有关webpack的内容，宝贵的学习资源👍！

webpack入门 ｜ 青训营