编程开源技术交流，分享技术与知识

网站首页 > 开源技术 正文

从零开始搭建一个基础版的 Vue 脚手架

wxchong 2024-09-10 22:28:58 开源技术 7 ℃ 0 评论


文章正文



    • 前言
    • 安装 webpack
    • 创建项目
    • 创建一个简单的 Demo
    • 编译 ES6 代码
    • 编译 Vue 代码
    • 配置 vue-router
    • 让项目绑定端口跑起来
    • 编译生成 HTML 文件
    • 处理 CSS
    • cross-env
    • 使用 Less
    • 处理图片
    • 处理字体
    • 优化缓存
    • clean-webpack-plugin
    • 抽离公共代码
    • 优化组件的引入路径
    • 配置懒加载
    • 拆分webpack
    • 结语
    • 1. 创建 index.js 文件
    • 2. 在当前项目安装 webpack
    • 3. 创建 webpack.dev.config.js
    • 4. 在根目录创建 HTML 文件
    • 5. 执行编译命令
    • 1. 安装 ES6 需要的 loader
    • 2. 创建 .babelrc 文件
    • 3. 修改 webpack.dev.config.js 配置
    • 4. 添加 ES6 的代码
    • 5. 执行编译命令
    • 1. 安装解析 Vue 语法的 loader 和 Vue
    • 2. 修改 webpack.dev.config.js 配置
    • 3. 添加 Vue 模板文件
    • 4. 执行编译命令


前言

前段时间一直在找工作，作为前端目前最火的技术栈 Vue，被问到了很多次，其中问得最多的就是有没有自己动手搭过脚手架。

于是自己就尝试着搭建 Vue 脚手架，在搭建脚手架的过程中，自己也遇到了各式各样的问题，在此，我想把这些过程一步一步地写下来。本文的项目文件夹会一个一个地构建，配置每一行都会有注释，每一个文件干什么、配置是做什么的都会给大家介绍，供大家学习参考。

安装 webpack

在这里我已经假设用户已经安装 Node 环境，我就不介绍 Node 环境的安装，接下来我们安装 webpack，这里要全局安装，否则之后 webpack 命令无法执行。

npm install --g webpack webpack-cli

创建项目

使用右键创建文件夹 my-app，进入文件打开命令提示符或者 PowerShell，执行 npm init，直接全部回车，我们会看到文件夹里会多了一个 package.json 的文件，这里面主要是对当前项目的一些描述。

创建一个简单的 Demo

这里我准备随便写而一段 ES5 的代码，然后通过 webpack 打包，介绍 webpack 基本的输入输出配置。

1. 创建 index.js 文件

在根目录创建 src 文件夹，在该文件夹下创建 index.js 文件，并输入如下代码：

document.getElementById("app").innerHTML = "hello webpack";

2. 在当前项目安装 webpack

npm install --save-dev webpack webpack-cli

在以前只需要安装 webpack 即可，但是现在必须安装 webpack-cli，否则 webpack 命令会出错。

3. 创建 webpack.dev.config.js

我们在根目录建一个名为 webpack.dev.config.js 的文件，写上如下代码：

const path = require('path');
module.exports = {
  entry: path.join(__dirname, 'src/index.js'),
  output: {
      path: path.join(__dirname, './dist'),
      filename: 'app.js'
  }
};
  • entry：入口，一般配置项目的入口文件
  • __dirname：node下的全局变量，返回的是当前项目的绝对路径
  • output：项目的输出配置
  • output.path：输出路径
  • output.filename: 输出文件名称

4. 在根目录创建 HTML 文件

在根目录创建名为 index.html 的文件，在 body 中写下如下内容，./dist/app.js 这个文件暂时是不存在的，编译之后才会有。

<body>
  <div id="app"></div>
  <script src="./dist/app.js"></script>
</body>

5. 执行编译命令

在根目录执行编译命令，格式：webpack --config 文件名称

webpack --config webpack.dev.config.js

然后我们会看到根目录自动生成了 dist 文件夹，里面有一个 app.js，和 webpack.dev.config.js 里面输出是吻合的。这里来有一个警告：是指没有设置 webpack 的环境（生产 or 开发）。

一般解决方式两种：

修改命令

webpack --config webpack.dev.config.js --mode=development 或者 production

在 webpack.dev.config.js 里面的 entry 同级配置 mode:"development" 或者 mode:"production"。

在浏览器打开第 4 步在根目录创建的 index.html。

编译 ES6 代码

刚才演示了如何编译 ES5 的代码，接下来我们来看如何编译 ES6 的代码。

1. 安装 ES6 需要的 loader

  • babel-core：调用 Babel 的 API 进行转码
  • babel-preset-env：用于解析 ES6 的语法
npm install babel-core babel-loader babel-preset-env --save-dev

2. 创建 .babelrc 文件

创建 .babelrc 文件，并输入如下字符：

{
    "presets": [
      [
        "env",
        {
          "targets": {
            "browsers": ["last 2 versions", "ie >= 7"]
          }
        }
      ]
    ], 
  }

3. 修改 webpack.dev.config.js 配置

因为我们需要把 ES6 的代码转为 ES5 的代码，除了安装对于的 loader 外，还需要在 webpack.dev.config.js 中配置对于的解析规则。

在 output 的同级写入如下配置：

module: {
    rules: [
        {
            test: /\.js$/,                  
            loader: 'babel-loader',
            exclude:/node-modules/
        },
    ]
}

解析规则在 module 下的 rules 中配置，test 表示匹配的文件，loader 表示使用什么加载器，exclude 表示禁止解析该目录下的文件。

4. 添加 ES6 的代码

使用了 ES6 的箭头函数和字符串拼接方式，把 src 目录下的 index.js 文件修改为：

var str = "babel"
var func = s => {
    document.getElementById("app").innerHTML = `hello ${s}`;
}
func(str);

5. 执行编译命令

执行命令：

webpack --config webpack.dev.config.js --mode=development

结果出现如下错误：

Error: Cannot find module




Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表
赣ICP备2023011894号-2