当前位置：首页 > news >正文

用webpack 构建自己的vue-cli

news 2025/7/14 19:05:41

步骤1 ：新建文件夹 my-vue-cli

步骤2：在文件夹中输入npm init (拥有npm管理环境)，之后可以安装我们所需要的包

步骤3：安装 webpack、webpack-cli (webpack打包工具，webpack 执行依赖webpack-cli)

npm i webpack webpack-cli -D

步骤4：在跟目录下新建src(放项目主要代码)、public(放公用静态资源)

public/index.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>my-vue-cli</title></head><body><div id="app"></div></body></html>

src/main.js

import { add } from './tools/add.js'
console.log(add(1, 2))
console.log('我是main.js')

src/tools/add.js

export const add = (a, b) => {return a + b
}

步骤5：入口文件（webpack打包需要从入口文件开始查找，一直到打包所有引用文件）

进行入口文件的配置，在根目录下新建webpack.config.js：

const path = require('path')module.exports = {// 模式 开发模式mode: 'development',// 入口文件 main.jsentry: {main: './src/main.js'},// 输出output: {// 输出到 dist文件夹path: path.resolve(__dirname, './dist'),// js文件下filename: 'js/chunk-[contenthash].js',// 每次打包前自动清除旧的distclean: true,}
}

步骤6：配置打包命令

package.json

"scripts": {"build": "webpack"
},

此刻，运行命令 npm run build，就能发现打包成功出现dist/js/chunk-c3454564....，接着我们需要在index.html文件中引入打包出来的js ,并且可以打包html 文件才可以。

步骤7：如何打包html

打包html需要用到html-webpack-plugin插件，npm i html-webpack-plugin -D。需要在webpack.config.js 中配置

const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {// 刚刚的代码...// 插件都放 plugins 中plugins: [new HtmlWebpackPlugin({// 选择模板 public/index.htmltemplate: './public/index.html',// 打包后的名字filename: 'index.html',// js文件插入 body里inject: 'body',}),]
}

此刻在运行npm run build可以看到html被打包，且打包后的html 自动引入了打包后的js 文件

步骤8：打包CSS

在src 文件夹下创建styles 文件夹，用来存放样式 src/styles/index.scss,在 入口文件main.js中引入 import './styles/index.scss'

需要安装 sass、sass-loader:可以将scss代码转换成css css-loader 使webpack具有打包css的能力 sass-resources-loader 可选支持打包全局公共scss 文件 mini-css-extract-plugin:可将css代码打包成一个单独的css文件

npm i
sass
sass-loader
sass-resources-loader
mini-css-extract-plugin
-D

配置webpack.config.js

// 刚才的代码...
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {// 刚才的代码...plugins: [// 刚才的代码...new MiniCssExtractPlugin({// 将css代码输出到dist/styles文件夹下filename: 'styles/chunk-[contenthash].css',ignoreOrder: true,}),],module: {rules: [{// 匹配文件后缀的规则test: /\.(css|s[cs]ss)$/,use: [// loader执行顺序是从右到左MiniCssExtractPlugin.loader,'css-loader','sass-loader',// {//   loader: 'sass-resources-loader',//   options: {//     resources: [//       // 放置全局引入的公共scss文件//     ],//   },// },],},]}
}

此时打包，可以看到index.html 文件引入了css 打包图片用asset-module

此时我们完成了打包html、css、 js 和图片下篇文章继续介绍 babel(将高级语法转换成低级语法，兼容一些低版本的浏览器) 打包vue 热启动环境区分构建打包进度条以及source-map(快速定位代码出错位置)等内容

用webpack 构建自己的vue-cli

相关文章：

用webpack 构建自己的vue-cli

ZCC6982最大充电电流 2A、升压型 2 节锂电池充电管理器

【机器学习】无监督学习算法之：K均值聚类

为wordpress特定分类目录下的内容添加自定义字段

javaWeb在线考试系统

项目管理商业文件--商业论证与效益管理计划

机器学习揭秘：解锁从理论到实践的每一步！

Kotlin协程CoroutineScope命名空间CoroutineName，Kotlin

HAL STM32G4 +TIM1 3路PWM互补输出+VOFA波形演示

MySQL进阶-----索引的结构与分类

FPGA高端项目：解码索尼IMX390 MIPI相机转HDMI输出，提供FPGA开发板+2套工程源码+技术支持

激光显示技术不断进步国家政策推动行业发展

iOS开发优势解析，费用探究以及软件开发详解

02课程发布模块之部署Nginx

web学习笔记（四十二）

大模型分布式推理ray

Python学习：循环语句

【物联网开源平台】tingsboard二次开发

Vue+ELement UI el-table移入或选中某行时改变颜色

【Git】日志功能

Xshell远程连接Kali（默认 | 私钥）Note版

Java - Mysql数据类型对应

工程地质软件市场：发展现状、趋势与策略建议

spring：实例工厂方法获取bean

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

华为OD最新机试真题-数组组成的最小数字-OD统一考试（B卷）

算法打卡第18天

基于单片机的宠物屋智能系统设计与实现（论文+源码）

基于stm32F10x 系列微控制器的智能电子琴（附完整项目源码、详细接线及讲解视频）

【Zephyr 系列 16】构建 BLE + LoRa 协同通信系统：网关转发与混合调度实战