使用webpack手动搭建一个 vue-cli

最新推荐文章于 2025-10-12 13:04:44 发布

原创

最新推荐文章于 2025-10-12 13:04:44 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍如何从零开始，不依赖于任何脚手架工具，手动搭建一个Vue项目，包括环境配置、项目结构搭建、webpack配置、开发与生产环境分离、组件化开发、样式处理等关键步骤。

引子

1：请问下面两个创建项目的命令区别是什么？

vue create project

vue init webpack project

2：前端的业务代码与框架代码，工程师与架构师他们的关系是什么？

一，环境

1，需要安装node.js ，安装方式请参考 Node.js 安装配置

2，使用yarn 来创建 package.json 文件管理项目

npm install -g yarn

yarn init -y

二，过程

1，创建项目目录

项目名webpackage-create-vue-cli 的文件目录，并进入项目目录下

md webpackage-create-vue-cli

cd webpackage-create-vue-cli

在项目目录下创建一个index.html 文件

cd.>index.html //创建index.html 文件

新建src文件夹，在src文件夹下新建components文件件

md src //创建src文件夹
cd src //进入到src文件下
md components //创建组件文件夹
cd .. //退出到项目目录下

为了使编码方便，我们可以使用vscode打开项目

code . //启动vscode打开项目

vscode 打开后的目录界面如下

2，拿vue包

既然我们要做一个 vue的cli ，我们首先得把 vue 的包拿下来

yarn add -D vue

3，拿webpack 和webpack-cli 两个包

我们使用webpack 来做，还需要 webpack 和webpack-cli 两个包

yarn add -D webpack webpack-cli

4，在test.js中引入 vue.esm 模块

在components下新建一个 test.js 的文件

在test.js里面引入 vue.esm 模块，并且实例化一个对象

test.js 代码如下

import VueTest from 'vue/dist/vue.esm'; //引入vue的esm
const vm = new VueTest({
    el: "#app",
    data: {},
    components: {
        //自己写的一个test 组件
        test: {
            data() {
                return {
                    tips: "我在学前端vue"
                }
            },
            template: '<div>{
  
  {tips}}</div>' //组件模版内容
        }
    },
    template: '<div> <test></test> </div>' //挂载 test 组件
})

5，配置webpack.config.js

我们再新建一个webpack 的配置文件 webpack.config.js 最好是手动一个字母一个字母敲一下里面的代码

const path = require("path") //引入node 的path模块
module.exports = {
    //打包模式
    mode: 'none', //none ：不压缩，development：开发模式打包，product:正式版压缩方式
    //入口文件
    entry: './src/components/test.js',
    //打包输出的路径
    output: {
        path: path.resolve(__dirname, "distTest"),
        filename: 'indexTest.js'
    }
}

当前的项目的内容如下图

6, npx 命令 webpack 来打包

现在我们可以使用 npx 命令 webpack 来打包了

npx webpack
Hash: 3f5fcf9785be9ce01d6e
Version: webpack 4.44.1
Time: 532ms
Built at: 2020-09-09 14:24:21
       Asset     Size  Chunks             Chunk Names
indexTest.js  333 KiB       0  [emitted]  main
Entrypoint main = indexTest.js
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
    + 5 hidden modules

这时在我们的项目下就会多一个distTest的文件夹

现在我们就需要在index.html 中引用这个生成的indexTest.js文件

<!DOCTYPE html>
<html>

<head>
    <title>自己搭建vue-cli</title>

</head>

<body>
    <div id="app"></div>
    <!--这个js文件引用不要放 head 中去，html未加载完，会找不到 app 这个div-->
    <script src="./distTest/indexTest.js"></script>
</body>

</html>

用浏览器访问这个hmtl的效果如下

上面的代码有以下几个问题，

1：开发时每次更新代码后都需要重新打包

2：未区分开正式环境和开发环境

怎么区分呢？我们需要使用webpack-dev-server来做，这个用户开发调试、提供web服务、热更新、接口代理等等

yarn add -D webpack-dev-server

7,npx 来启动 webpack-dev-server

怎么用？我们直接用npx 来启动 webpack-dev-server

npx webpack-dev-server
i ｢wds｣: Project is running at http://localhost:8081/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from F:\GitHub_Code\webpackage-create-vue-cli
i ｢wdm｣: Hash: fef2f0a2dc251cf7cea6
Version: webpack 4.44.1
Time: 1005ms
Built at: 2020-09-09 14:52:21
       Asset     Size  Chunks             Chunk Names
indexTest.js  667 KiB       0  [emitted]  main
Entrypoint main = indexTest.js
 [0] multi (webpack)-dev-server/client?http://localhost:8081 ./src/components/test.js 40 bytes {0} [built]
 [1] (webpack)-dev-server/client?http://localhost:8081 4.29 KiB {0} [built]
 [2] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {0} [built]
 [3] (webpack)-dev-server/node_modules/ansi-regex/index.js 135 bytes {0} [built]
 [4] (webpack)-dev-server/client/socket.js 1.53 KiB {0} [built]
 [5] (webpack)-dev-server/client/clients/SockJSClient.js 4.06 KiB {0} [built]
 [7] (webpack)/buildin/global.js 472 bytes {0} [built]
 [9] (webpack)-dev-server/client/overlay.js 3.51 KiB {0} [built]
[15] (webpack)-dev-server/client/utils/log.js 964 bytes {0} [built]
[17] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {0} [built]
[18] (webpack)-dev-server/client/utils

最低0.47元/天解锁文章