Webpack学习笔记
webpack - 项目优化
webpack实现原理
webpack - loader
webpack - plugin
webpack - 项目优化2
创建自己的webpack 全局命令mywebpack
创建一个名为 mywebpack 的项目，目录结构如下：
|- bin
|- main.js
|- package.json
// package.json
"bin": {
"mywebpack": "./bin/main.js"
},
// main.js
#! /usr/bin/env node
console.log('hahaha')
在目录下执行sudo npm link创建全局npm命令，指向开发目录执行
/usr/local/bin/mywebpack -> /usr/local/lib/node_modules/mywebpack/bin/main.js
/usr/local/lib/node_modules/mywebpack -> /Users/xxxx/xxxx/08.02-mywebpack
实现一个简单的webpack
- main.js
#! /usr/bin/env node
// 读取配置文件
const path = require('path')
const Compile = require('../src/Compile')
let config_path = path.resolve('webpack.config.js')
let config = require(config_path)
let com = new Compile(config)
com.run()
- src/Compile.js
const fs = require('fs')
const path = require('path')
const babel = require('@babel/core')
const t = require('@babel/types')
// 所有用到的文件，以文件路径为Key，创建对像
// value为内容，且require被替换为__webpack_require__
// 引入文件路径改为基于根目录路径
// 确定入口文件，执行内容
//
// 创建依赖图谱，把所有依赖做成列表
// 把模板 和 我们解析出来的列表 进行渲染 打包到目标文件中
class Compile {
constructor (config) {
this.config = config
this.entry = config.entry
this.root = process.cwd() // 目标项目物理路径
this.import_tree = {} // 引用结构 {路径: 代码}
// console.log(config)
}
run () {
this.handlerCode(this.entry, true)
// console.log('runed', this.import_tree)
this.packagingTemplate()
}
// 拼装模板
packagingTemplate () {
let ejs = require('ejs')
let template = fs.readFileSync(path.join(__dirname, './template.ejs'))
template = ejs.render(template, { entry: this.entry, modules: this.import_tree });
let output_dir = path.join(this.config.output.path, this.config.output.filename)
fs.writeFileSync(output_dir, template)
}
handlerCode (filepath, is_main) {
// 读取文件
let in_code = fs.readFileSync(path.join(this.root, filepath))
let relative_path = path.relative(this.root, filepath)
let parent_path = path.dirname(relative_path)
let ast = this.handlerAst(in_code, parent_path)
// console.log('run helf', ast.imports)
ast.imports.forEach(dir => {
if (!this.import_tree[dir]) this.handlerCode(dir)
})
// console.log('run', JSON.stringify(this.import_tree))
this.import_tree[filepath] = ast.out_code
}
handlerAst (in_code, parent_path) {
// 转ast树
let imports = []
let out = babel.transform(in_code, {
plugins: [{ visitor: { CallExpression ({node}) {
// 找到require代码
if (node.callee.name == 'require') {
// require => __webpack_require__
node.callee.name = '__webpack_require__'
let import_file = './' + path.join(parent_path, node.arguments[0].value)
// 引用文件路径改为基于根目标
node.arguments[0].value = import_file
// 递归引用的文件
imports.push(import_file)
}
} } }]
})
return {out_code: out.code, imports: imports}
}
}
module.exports = Compile
- src/template.ejs
...
// Load entry module and return exports
return __webpack_require__(__webpack_require__.s = "<%= entry %>");
})
/************************************************************************/
({
<% for (let key in modules) { %>
"<%- key %>": (function(module, exports, __webpack_require__) {
eval("<%- modules[key].replace(/\n/g, '\\n').replace(/"/g, '\\"') %>\n\n//# sourceURL=webpack:///<%- key %>?");
}),
<% } %>
});
loaders
- 目标项目 webpack.config.js 中添加
module: {
rules: [
{
test: /\.txt$/,
use: [ path.resolve(__dirname, 'loaders', 'txt.js') ]
}
]
}
- 目标项目 loaders/txt.js
必须是个方法，入参为.txt文件内容
module.exports = function (source) {
console.log(source)
return source
}
webpack执行后打包成功，并打印出了文件内容。下面开始实现
- src/Compile.js 在资源加载（读取文件处，单独拿出一个方法）时处理loaders
...
readSource (filepath) {
let source = fs.readFileSync(path.join(this.root, filepath), 'utf8') // 从下向上执行
this.config.module.rules.reduceRight((perv, item) => {
let {test: reg, use} = item
if (reg.test(filepath)) {
let loader = require(use[0])
source = loader(source)
}
}, '')
return source
}
...
实现less-loader
- 目标项目 webpack.config.js 中添加
...
{
test: /\.less$/,
// use: [ 'style-loader', 'css-loader', 'less-loader' ] 从左向右执行
use: [
path.resolve(__dirname, 'loaders', 'style.js'),
path.resolve(__dirname, 'loaders', 'less.js'),
]
}
- 目标项目 loaders/less.js
let less = require('less')
module.exports = function (source) {
let css = ''
less.render(source, (err, r) => { // render是同步的 [黑人问号脸]
css = r.css
})
return css
}
- 目标项目 loaders/style.js
module.exports = function (source) {
// JSON.stringify可以处理引号问题
let code = `
let style = document.createElement('style')
style.innerHTML = ${JSON.stringify(source).replace(/\\n/g,'\\\n')}
document.head.append(style)
`
return code
}
- src/Compile.js 在资源加载（读取文件处，单独拿出一个方法）时处理loaders
...
readSource (filepath) {
let source = fs.readFileSync(path.join(this.root, filepath), 'utf8')
this.config.module.rules.reduceRight((perv, item) => { // 从下向上执行
let {test: reg, use} = item
if (reg.test(filepath)) {
use.reduceRight((perv, loader_name) => { // 从左向右执行
let loader = require(loader_name)
source = loader(source)
}, '')
}
}, '')
return source
}
...
如果loader是异步的
- 目标项目 loaders/less.js 不返回数据，使用异步回调
...
let cb = this.async() // webpack给的异步回调方法
setTimeout(() => cb(null, css), 2000) // 方法要2个入参，err, source
}
- src/Compile.js 改动就大发了
async run () {
console.log('runing')
await this.handlerCode(this.entry, true)
console.log('runed', this.import_tree)
this.packagingTemplate()
}
readSource (filepath) {
let source = fs.readFileSync(path.join(this.root, filepath), 'utf8')
return new Promise((resolve) => {
let rules = this.config.module.rules
let rule_index = rules.length - 1
let loader_list = []
let loader_index = -99
let isSync = false
let next = () => {
if (rule_index < 0) return resolve(source);
if (loader_index < 0) {
// 读取下一项配置
let {test: reg, use} = rules[rule_index--]
if (reg.test(filepath)) {
loader_list = use
loader_index = use.length - 1
} else return next();
}
isSync = false
let loader = require(loader_list[loader_index--])
let new_source = loader.call(this, source)
if (!isSync) setvalueFn(null, new_source)
}
// 赋值并next
let setvalueFn = (err, new_source) => {
source = new_source
next()
};
// 异步标识及回调
this.async = () => {
isSync = true
return setvalueFn
}
next()
})
// return source
}
async handlerCode (filepath, is_main) {
// 读取文件
console.log('----', filepath)
let in_code = await this.readSource(filepath)
let ast = this.handlerAst(in_code, filepath)
for (let i = 0; i < ast.imports.length; i++) {
if (!this.import_tree[ast.imports[i]]) await this.handlerCode(ast.imports[i])
}
this.import_tree[filepath] = ast.out_code
}
plugins
webpack先解析plugins，再解析loader（pulgin会在run之前执行）
- 目标项目 webpack.config.js 中添加
plugins: [
//
new A, new B
]
}
class A {
apply () { // 必须提供apply方法
console.log('A')
}
}
class B {
apply (compiler) { // compiler上有hooks，为webpack内部的钩子们 => tapable的SyncHook实例
console.log('B')
}
}
在任意loader头部添加console，执行后会A B loader ...
打印compiler下的hooks可以看到它上面的钩子们
hooks上的部分钩子
- tapable的用法
// 非node下的event，发布订阅
let { SyncHook } = require('tapable')
let s = new SyncHook(['a', 'b'])
s.tap('11111', function (a,b,c) {
console.log('11', a,b,c)
})
s.tap('22222', function (a,b,c) {
console.log('22', a,b,c)
})
s.call('i', 'am', 'girl')
- src/Compile.js
let { SyncHook } = require('tapable')
...
constructor (config) {
...
// 使用tapable实现钩子
this.hooks = {
beforeRun: new SyncHook(['arg']),
afterEmit: new SyncHook(['arg'])
}
// 处理plugin
this.config.plugins.forEach(pg => {
pg.apply(this)
})
}
async run () {
this.hooks.beforeRun.call('something')
...
handlerAst (in_code, filepath) {
...
this.hooks.afterEmit.call('something')
return {out_code: out.code, imports: imports}
}
class B {
apply (compiler) {
console.log('B')
compiler.hooks.beforeRun.tap('test', function () {
console.log('beforeRun')
})
compiler.hooks.afterEmit.tap('test', function () {
console.log('afterEmit')
})
}
}
执行后结果A B beforeRun afterEmit loader afterEmit
网友评论