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 打包命令配置的更多相关文章

  1. webpack正式、测试环境接口地址本地运行及打包命令配置

    声明:本文由w3h5原创,转载请注明出处:<webpack正式.测试环境接口地址本地运行及打包命令配置> https://www.w3h5.com/post/521.html 为了方便开发 ...

  2. webpack自定义打包命令

    更快捷的执行打包任务 1.执行类似于node_modules/.bin/webpack这样的命令其实是比较烦人且容易出错的,不过值得庆幸的是npm可以引导任务执行, 对其进行配置后可以使用简单的npm ...

  3. vue -- vue-cli webpack项目打包后自动压缩成zip文件

    用vue2.0开发项目,使用npm run build 命令 ,但是只会生成dist文件夹,以下是生成zip压缩包方法 1,插件安装 webpack插件安装 filemanager-webpack-p ...

  4. vue之webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用

    问题描述 一般情况下,通过webpack+vue-cli默认打包的css.js等资源,路径都是绝对的 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根路径 ...

  5. Vue之webpack的安装与配置及其简单应用

    一.文件结构 二.index.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  6. webpack 安装,打包使用

      Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. 全局安装webpack 打开文件夹amd输入指令  npm i webpa ...

  7. vue中利用.env文件存储全局环境变量,以及配置vue启动和打包命令

    目录 1,前言 2,.env文件的作用 3,配置.env文件 4,配置启动命令 5,获取.env中的全局变量 5,实际用处 1,前言 分享一下vue项目中利用.env文件存储全局环境变量,以及利于项目 ...

  8. 规范开发目录 及 webpack多环境打包文件配置

    规范开发目录 普通项目 开发目录: ├── project-name ├── README.md ├── .gitignore ├── assets ├── ├── js ├── ├── css ├─ ...

  9. vue的webpack打包

    一个完整的项目离不开 开发环境 生产环境 测试环境 这三个环境 首先解释一下这三个环境的含义 开发环境:开发环境是程序猿们专门用于开发的服务器,配置可以比较随意,为了开发调试方便,一般打开全部错误报告 ...

  10. vue+vue-cli2+webpack配置资源cdn

    vue-cli2+webpack构建的vue项目如何让图片和js等静态资源走cdn,哪里可以配置呢?下面我详细介绍 1.config/index.js中可以看到 module.exports = { ...

随机推荐

  1. kettle从入门到精通 第四十四课 kettle 去重

    1.我们平常在写应用程序的时候,会有去重的业务场景,可以在数据库层面解决,也可以在内存层面解决. 同样kettle也有去重的步骤[唯一行(哈希值)]和[去除重复记录] 唯一行(哈希值):使用 Hash ...

  2. Linux扩展篇-shell编程(三)-shell运算符

    基本语法: 格式一 expr +. -. \*./. %(加.减.乘.除.求余) 格式二 "$((运算式))"或者"$[运算式]" 基本运算符 Shell 和其 ...

  3. Kubernetes监控手册04-监控Kube-Proxy

    简介 首先,请阅读文章<Kubernetes监控手册01-体系介绍>,回顾一下 Kubernetes 架构,Kube-Proxy 是在所有工作负载节点上的. Kube-Proxy 默认暴露 ...

  4. redis自动化安装

    1.ruby脚本自动化安装 1.安装ruby开发环境 yum install rubygems -y 2.通过ruby包管理工具,安装操作redis的模块 gem sources --remove h ...

  5. 项目管理--PMBOK 读书笔记(8)【项目质量管理】

    1.数据表现-流程图: 流程图也称为过程图,用来显示在一个或者多个输入转化为一个或者多个输入出的过程. 2.质量工具图比较: 发现问题:控制图(七点规则等).趋势图 寻找原因:因果图.流程图 分析原因 ...

  6. 3个线程分别交替输出xyz字符,输出10遍

    一位群友分享的**公司面试题 3个线程分别交替输出xyz字符,输出10遍 public class XYZ implements Runnable { private static AtomicInt ...

  7. java开发规范 RestController Apollo logger params T data NPE page

    java开发规范 1.@Valid @RequestBody MyAppWorkOrderRequestVO orderRemarkListRequestVO 缺少 @RequestBody 注解,否 ...

  8. 指令(Prompt)基本格式

    指令(Prompt)基本格式: 参考信息:包含文心一言完成任务时需要知道的必要背景和材料,如:报告.知识.数据库.对话上下文等 动作:需要文心一言帮你解决的事情,如:撰写.生成.总结.回答等 目标:需 ...

  9. Linux中的环境变量PS1,打造你的专属终端

    文章目录 介绍 PS1的格式 设置字体样式 举例 小建议 进阶 介绍 好看的终端是怎么做的呢?通过PS1这个环境变量! PS1的格式 PS1='[\u@\h \w]\$ ' 样式: 解释: [是普通字 ...

  10. HTTP长连接、短连接、Linux网络优化

    无连接 含义:每次传输完数据后就断开连接. 因为早期互联网规模小,并且http具有瞬时性,突发性,服务器同时处理着多个请求.所以采用无连接的方式.以便于腾出资源处理其他请求. 无状态 顺便说一说无状态 ...