探究Vue源码:mustache模板引擎(5) 对比rollup与webpack，在本地搭建webpack环境

news2025/11/4 23:37:46

好从本文开始我们就来手写一下mustache这个库
他是模板引擎的一个祖先
将模板字符串编译成一个dom字符串就是它的思想，这也是一个具有跨时代意义的思想

这里的话我们还是搭一个 webpack 的项目环境
这里值得一提的是 mustache 他官方是通过rollup来进行打包的很多第三方库其实都是用rollup打包
首先对比rollup webpack肯定就能提供更好的开发体验，因为他能创造出一个热更新环境
会被node的控制台更好用
rollup的话更擅长的时将多个js文件打包到一起但是它本身没什么开发体验或者是体验并不好

然后我们在本地创建一个文件夹叫 mustacheDom
在这里插入图片描述
然后用编辑器打开这个目录

然后在终端执行

npm init

然后全部按回车

这样我们就创建了一个项目
在这里插入图片描述
然后我们引入一下webpack 在终端执行

npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3

这样我们的依赖包就进来了
在这里插入图片描述
然后我们在项目根目录下创建一个文件叫 webpack.config.js
用来配置我们webpack的运行信息和模式

然后 webpack.config.js 参考代码如下

//通过node获取到当前文件的位置
const path = require('path')

module.exports = {
    //设置当前入口文件
    entry: './src/index.js',
    //出口配置
    output: {
      //设置打包后文件的名字
      filename: 'bundle.js',
      //设置虚拟打包  文件并不会真正打包到项目中 而是出现在指定端口上
      publicPath: 'xuni'
    },
    devServer: {
        port: 8080,
        contentBase: 'www'
    }
}

这个配置是webpack一个比较基本的案例然后他上面指定入口文件是同目录下的 src下的 index.js
所以这个文件我们需要创建一下
在这里插入图片描述
这里我们创建文件之后编写了输出一个文本用来验证环境已经启动成功

但是我们 contentBase 指向的是一个 www 文件夹热服务会运行这个文件夹下的index.html
然后我们也将这个目录文件创建出来
在这里插入图片描述
www下的 index.html 参考代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src = "/xuni/bundle.js"></script>
</body>
</html>