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

作者：从前慢现在也慢 | 2024-05-23 01:34:20

踩

node vue模板引擎

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

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

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

然后在终端执行

npm init
1

然后全部按回车

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

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

这样我们的依赖包就进来了
在这里插入图片描述
然后我们在项目根目录下创建一个文件叫 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'
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

这个配置是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>
1
2
3
4
5
6
7
8
9
10
11

这里我们根据 webpack.config.js 配置引入了他这个运行后会生成在虚拟路径下的xuni/bundle.js
在这里插入图片描述
然后我们看到项目中的 package.json
打开它在内容中找到 scripts
给他加一条启动命令

"serve": "webpack-dev-server"
1

webpack-dev-server用于启动webpack的运行环境
在这里插入图片描述

然后我们直接在终端执行

npm run serve
1

然后服务就起来了控制台会将端口号给我们
在这里插入图片描述
我们通过端口号在浏览器中访问服务

显然没有任何问题

好这样我们webpack的一个环境就起来了

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/610769