Webpack原理解析

Webpack是利用什么来打包？

1、Webpack依赖于Node的环境与文件操作系统；
2、Webpack的打包过程其实就是利用Node去读取文件，然后进行一些字符串处理后，再利用Node去写入文件；

Webpack打包流程解析

1、读取配置文件；
2、注册内部插件与配置插件；
3、loader编译；
4、组织模块、模块排队；
5、生成最终文件导出；

Loader是如何生效

Loader其实是一个方法：接受一个字符串，方法内部处理完后再返回字符串；

module.exports = function(resource){
    return resource;
}

自定义loader

目录结构

index.js内容

module.exports = function(resource) {
    return resource.replace('c', 'console.log');
}

webpack配置

 {
                test: /\.wy$/,
                use: './wy-loader'
 }

index.wy的内容

c(555);

编译后的代码

Dev-server原理解析

Dev-server利用express和一个中间件webpack-dev-middleware来开启服务，然后开启的server会执行打包出来的代码；

热更新原理解析

开启服务----建立一个websocket连接----发生代码改变服务通过websocket通知到客户端----客户端替换新代码

模拟webpack实现dev-server和热更新

dev.js代码

const express = require('express');
const webpackDevMid = require('webpack-dev-middleware');
const webpackHotMid = require('webpack-hot-middleware');
const webpack = require('webpack');
const app = express();
const config = require('./webpack.config.js');
Object.keys(config.entry).forEach(function(name){
    config.entry[name] = ['webpack-hot-middleware/client?noInfo=true&reload=true'].concat(config.entry[name]);
});
const compiler = webpack(config);
app.use(webpackDevMid(compiler,{}))
app.use(webpackHotMid(compiler,{
    overlayStyles:true
}))
app.listen(2007)

执行node dev.js