【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 = { ...
随机推荐
- vue3使用表格el-table-infinite-scroll.js:18 Uncaught (in promise) Error: [el-table-infinite-scroll]: .el-scrollbar__wrap element not found.
先看下表格里面有没有这个el-scrollbar__wrap class类 没有的话升级一下element-plus到最新的就行 你可以先查看element-plus的版本 npm view elem ...
- 【现代 CSS】标准滚动条控制规范 scrollbar-color 和 scrollbar-width
Chrome 在 121 版本开始,原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width. 要知道,在此前,虽然有 ::-webkit-scrollb ...
- readonly和disable的区别是什么?
Readonly和Disabled两种属性的写法如下: 1.<input type="text" name="name" value="xxx& ...
- ELKF(elasticsearch、logstash、kibana、filebeat)搭建及收集nginx日志
1.elasticsearch 1.1.根目录下新建data文件夹 1.2.修改elasticsearch.yml文件,添加以下内容 path.data: /home/wwq/elk/elastics ...
- Elasticsearch如何聚合查询多个统计值,如何嵌套聚合?并相互引用,统计索引中某一个字段的空值率?语法是怎么样的?
目录 Elasticsearch聚合查询说明 空值率查询DSL Elasticsearch聚合基础知识扩展 Elasticsearch聚合概念 Script 用法 Elasticsearch聚合查询语 ...
- RIP总结
RIP 两种更新方式:定期更新和触发更新 管理距离为120,更新使用UDP520,更新周期30s,使用跳数作为度量值,最大15 RIP有三个版本RIPv1,RIPv2,RIPn ...
- Git配置环境变量
由于学习需要装了git,使用终端查看版本号时 提示 'git' 不是内部或外部命令,也不是可运行的程序 或批处理文件. 原因 因为没有配置Git环境变量 解决方法:配置环境变量 开始菜单=>设置 ...
- [好物推荐] Rime的86五笔输入法配置
一个比较好用的Rime五笔输入法配置文件, 个人已经使用很多年了. 官网: https://github.com/KyleBing/rime-wubi86-jidian 安装方式: /home/xxx ...
- 高通lk:配置与使用i2c
高通lk:配置与使用i2c 以msm8909为例. 背景 在lk中要去驱动一个aw9523的ic来控制指示灯. 但是现在对应的i2c没有打开.因此需要进行处理. 步骤 找到I2C对应的ID与句柄 参考 ...
- I2S 总线学习:1-有关概念
背景 I2S总线 是一种常见的总线,也是需要掌握的. 概念 I2S(Inter-IC Sound)总线, 又称 集成电路内置音频总线,是飞利浦公司为数字音频设备之间的音频数据传输而制定的一种总线标准, ...