「这是我参与2022首次更文挑战的第4天,活动详情查看:2022首次更文挑战」。
模块化的辉煌
Browserify
在经历了种种发展后,模块化迎来了新的角色,browserify
它的简介为:你可以做任何事,而且你只需要写 CommonJS Code ,以下为基本使用示例。
//安装
$ npm install -g browserify
//使用
$ browserify main.js -o bundle.js
但是因为 browserify 使用并不方便:
- 需要解析 AST 以遍历项目的整个依赖关系图。
- 需要依靠
watchify
实现自动编译。
- 需要依靠 Source Map 实现调试。
Webpack
因为 browserify 的使用繁琐,出现了一位新的打包工具 "Webpack"( Module Bundler) , 意为模块打包机,它可以对任何资源进行打包,捆绑。
Webpack 拥有极其强大的扩展性和实用性,通过配置,他可以满足多种需求的项目打包构建,而且操作的命令行简洁易配。
它拥有以下特性:
- 兼容性方面( CommonJS,AMD,ES6...)。
- 代码拆分。
- 加载器与插件(极大的扩展性)。
- 开发工具和工作流程。
基本使用示例:
// webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}{,
module: {
loaders: [{
test: /.js$/,
loader: 'babel-loader'
}]
}}
}
小结:以上配置项,配置了entry
入口文件,output
输出位置,loader
加载器。其中 loader 不仅仅是用来处理 js 文件的,还有处理 css 文件,ts 文件,等等,极大的丰富了 webpack 的实用性。
多种 loader 示例
var webpackConfig = {
module: {
loaders: [{
test: /.scss$/,
loaders: 'style!css!sass'
}, {
test: /.(png|jpg|svg)$/,
loader: 'url?limit=20480' //20k
}]
}}
}
以上加入了处理 scss 文件的 loader 和 处理图片的 loader ,以此扩展 webpack 的处理文件能力。
使用插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 访问内置的插件
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
filename: 'my-first-webpack.bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /.(js|jsx)$/,
use: 'babel-loader',
},
],
},
plugins: [
new webpack.ProgressPlugin(),
new HtmlWebpackPlugin({ template: './src/index.html' }),
],
};
ProgressPlugin 用于自定义编译过程中的进度报告,HtmlWebpackPlugin 将生成一个 HTML 文件,并在其中使用 script 引入一个名为 my-first-webpack.bundle.js 的 JS 文件。
构建依赖图谱
我们通过上面多种模块化工具的发展史,我们知道如何构建依赖图,是模块化的重点,在 Webpack 中,万物皆可 require()
,通过 require
可以相互引入依赖。对所有的模块都是一视同仁,是一个通用的模块系统。
// CSS
require('./style.less');
require('./style.scss');
// js and ts
var myModule = require('./myModule.js');
var myTypedModule = require('./myTypedModule.ts');
小结:
Webpack 统治了很长一段时间,需要学习的内容还有很多,这里只是基础介绍一下,想要详细了解的可以点击这里。