【Vue】06 Webpack Part2 打包命令配置
Webpack 配置:
入口 & 出口:
就是我们使用的打包命令:
一个是对什么文件执行,这就是入口
一个是输出到什么文件,这就是出口
每一次打包使用这个命令都必须指定这两个必要的参数
所以将打包命令写入配置文件中,运行时读取即可
在项目的根目录下创建webpack.config.js

const path = require('path');
module.exports = {
entry : "./src/main.js", // 入口 可以是字符串,数组,对象
output : { // 出口,通常是一个对象 至少包含路径和文件名
path : path.resolve(__dirname, 'dist'),
filename : "bundle.js"
}
}
这一次我们的打包只需要执行webpack即可

我们可以再对package.json设置:
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build" : "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.6.0"
}
}
打包时就可以直接使用这个命令:
npm run build
【Vue】06 Webpack Part2 打包命令配置的更多相关文章
- webpack正式、测试环境接口地址本地运行及打包命令配置
声明:本文由w3h5原创,转载请注明出处:<webpack正式.测试环境接口地址本地运行及打包命令配置> https://www.w3h5.com/post/521.html 为了方便开发 ...
- webpack自定义打包命令
更快捷的执行打包任务 1.执行类似于node_modules/.bin/webpack这样的命令其实是比较烦人且容易出错的,不过值得庆幸的是npm可以引导任务执行, 对其进行配置后可以使用简单的npm ...
- vue -- vue-cli webpack项目打包后自动压缩成zip文件
用vue2.0开发项目,使用npm run build 命令 ,但是只会生成dist文件夹,以下是生成zip压缩包方法 1,插件安装 webpack插件安装 filemanager-webpack-p ...
- vue之webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用
问题描述 一般情况下,通过webpack+vue-cli默认打包的css.js等资源,路径都是绝对的 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径 ...
- Vue之webpack的安装与配置及其简单应用
一.文件结构 二.index.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- webpack 安装,打包使用
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. 全局安装webpack 打开文件夹amd输入指令 npm i webpa ...
- vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令
目录 1,前言 2,.env文件的作用 3,配置.env文件 4,配置启动命令 5,获取.env中的全局变量 5,实际用处 1,前言 分享一下vue项目中利用.env文件存储全局环境变量,以及利于项目 ...
- 规范开发目录 及 webpack多环境打包文件配置
规范开发目录 普通项目 开发目录: ├── project-name ├── README.md ├── .gitignore ├── assets ├── ├── js ├── ├── css ├─ ...
- vue的webpack打包
一个完整的项目离不开 开发环境 生产环境 测试环境 这三个环境 首先解释一下这三个环境的含义 开发环境:开发环境是程序猿们专门用于开发的服务器,配置可以比较随意,为了开发调试方便,一般打开全部错误报告 ...
- vue+vue-cli2+webpack配置资源cdn
vue-cli2+webpack构建的vue项目如何让图片和js等静态资源走cdn,哪里可以配置呢?下面我详细介绍 1.config/index.js中可以看到 module.exports = { ...
随机推荐
- The solution of CF380C
problem 希望这篇题解不要明年才审完. 标签:线段树 记录 \(Lsum_p\) 为这个区间有多少个 ( 不能匹配,\(Rsum_p\) 为这个区间有多少个 ) 不能匹配. 对于叶子结点如果是 ...
- 使用 Promise.withResolvers() 来简化你将函数 Promise 化的实现~~
引言 在JavaScript编程中,Promise 是一种处理异步操作的常用机制.Promise 对象代表了一个尚未完成但预期将来会完成的操作的结果.在本文中,我们将探讨如何通过使用 ES2024 的 ...
- Excel poi 设置单元格格式 发现不可读内容 已修复的记录: /xl/worksheets/sheet1.xml 部分的问题(巨坑)
Excel poi 设置单元格格式 发现不可读内容 已修复的记录: /xl/worksheets/sheet1.xml 部分的问题(巨坑) 1.先设置值,后设置样式. 正确的是:先设置样式,后设置值. ...
- 配置阿里云yum源
CentOS6 rm -f /etc/yum.repos.d/* wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.co ...
- Spring Boot 整合 Fisco Bcos(部署、调用区块链合约)
简介 在上一节,介绍了Spring Boot 整合 Fisco BCOS的最最基础的案例(SpringBoot成功连接Fisco BCOS,并访问其节点网络 --> 文章链接). 本节,咱们继续 ...
- 一款.NET开源的i茅台自动预约小助手
前言 今天大姚给大家分享一款.NET开源.基于WPF实现的i茅台APP接口自动化每日自动预约(抢茅台)小助手:HyggeImaotai. 项目介绍 该项目通过接口自动化模拟i茅台APP实现每日自动预约 ...
- Freertos学习:07-队列
--- title: rtos-freertos-07-队列 EntryName : rtos-freertos-07 date: 2020-06-23 09:43:28 categories: ta ...
- Simple WPF: WPF 透明窗体和鼠标事件穿透
一个自定义WPF窗体的解决方案,借鉴了吕毅老师的WPF制作高性能的透明背景的异形窗口一文,并在此基础上增加了鼠标穿透的功能.可以使得透明窗体的鼠标事件穿透到下层,在下层窗体中响应. 这个方法不一定是制 ...
- 3.8折年终钜惠,RK3568J国产工业评估板
3.8折年终钜惠,RK3568J国产工业评估板活动火热进行中,错过等一年! -核心板国产化率100%,提供报告-瑞芯微四核ARM Cortex-A55@1.8GHz-4K视频解码.1080P视频编码. ...
- vba--分拆工作薄
Sub 分拆工作薄() '分拆工作薄到当前文件夹 Dim sht As Worksheet Dim MyBook As Workbook Application.DisplayAlerts = Fal ...