1, webpack是什么

1), 是一个打包工具,

比gulp, grunt更先进

2), 额外功能

项目部署上线, 清空目录等

hot module reload, 页面刷新后, 数据不变化

3), 打包流程

css, js等打包成bundle.js文件

js: babel-loader 来加载, 编译

最终根据依赖关系生成app.js

split point: 将大文件分割为多个文件, 提升用户体验

2, webpack安装

1), 安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2), 检查npm版本

npm -v

3), 安装webpack到全局

npm install webpack -g

4), 生成package.json

npm init

5), 为项目添加webpack依赖

npm install webpack --save-dev

6), 将js编译打包

webpack hello.js hello.bundle.js

7), 安装css的loader转换器和style的laoder转换器

npm install css-loader style-loader --save-dev

8), 文件变化时, 自动编译

webpack hello.js hello.bundle.js  --watch

3, 配置文件

webpack.json.js

# 引入webpack
const webpack = require('webpack'); # 遵循 commonjs规范
module.exports = {
  

vue-05-webpack安装-vue单文件启动的更多相关文章

  1. webpack 安装vue(两种代码模式compiler 和runtime)

    使用webpack安装vue,import之后,运营项目报错,如下: [Vue warn]: You are using the runtime-only build of Vue where the ...

  2. vue生命周期及使用 && 单文件组件下的生命周期

    生命周期钩子 这篇文章主要记录与生命周期相关的问题. 之前,我们讲到过生命周期,如下所示: 根据图示我们很容易理解vue的生命周期: js执行到new Vue() 后,即进入vue的beforeCre ...

  3. Vue CLI Webpack 创建Vue项目

    简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...

  4. vue卸载与安装+vue创建项目

    vue卸载 npm uninstall -g vue-cli npm install -g @vue/cli 和 npm install -g @vue/cli-init 命令安装新版本vue-cli ...

  5. vue项目webpack打包后有的文件big 问题

    vue项目打包的时候,有的big, 超过1M,   需要进行优化,方法有: 1.  非首屏图片,可以采用懒加载的方式,  如:图片的懒加载,  vue中路由的懒加载 等 2. 各个模块, 采用如sea ...

  6. Vue知识整理16:单文件组件

    过程较为复杂,这里直接写出视频地址,可以直接查看 https://learning.dcloud.io/#/?vid=14

  7. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  8. Vue系列之 => webpack结合vue使用

    安装 npm i vue -S ,  在html页面中放一个容器绑定到el上. 修改webpack.config.js , 在与entry , output节点平级加上 resolve 节点. res ...

  9. Chrome安装Vue.js devtool F12无效

    要安装 vue-devtools-4.1.4_0 链接: https://pan.baidu.com/s/1aeUxKJEUDW0U_i6uuAZFvQ 提取码: 4btc vue-devtools- ...

随机推荐

  1. c#mysql批量更新的两种方法

    总体而言update 更新上传速度还是慢. 1:  简单的insert  速度稍稍比MySqlDataAdapter慢一点 配合dapper 配置文件 <?xml version="1 ...

  2. 搭建Fabric网络(三)artifacts是怎么生成的:cryptogen和configtxgen

    在first-network里,./byfn.sh generate可以生成artifacts文件. generate参数其实是使用了cryptogen和configtxgen这两个工具,这两个工具分 ...

  3. Django 载入静态文件地址

    1,Django框架中有专门存放静态文件的目录. 项目中的CSS.图片.js都是静态文件 配置静态文件 在settings 文件中定义静态内容 2,这些静态文件,他们统一存放在项目目录,templat ...

  4. Java ,python面向对象的继承及其区别

    JAVA JAVA继承基本样式 class Demo extends Object{ Demo(int a){ this(); } Demo(){ super(); } } java默认继承Objec ...

  5. 关于UIScrollView不能响应UITouch事件的解决办法

    原因是:UIView的touch事件被UIScrollView捕获了. 解决办法:让UIScrollView将事件传递过去.于是最简单的解决办法就是加一个UIScrollView的category.这 ...

  6. Android开发工程师文集-1 小时学会各种Drawable

    前言 大家好,给大家带来Android开发工程师文集-1 小时学会各种Drawable的概述,希望你们喜欢 Drawable介绍 Drawable为抽象类,drawable与view有区别的地方,主要 ...

  7. js的微观性能

    概述 js的微观性能是指js的某一个表达式或者某一行或者某一块代码的性能.几天前和同事讨论过这方面的内容,今天深入研究了一下,记录下来,供以后开发时参考,相信对其他人也有用. 从一段代码说起 记得以前 ...

  8. vue中的双向绑定

    概述 今天对双向绑定感兴趣了,于是去查了下相关文章,发现有用脏检查的(angular.js),有用发布者-订阅者模式的(JQuery),也有用Object.defineProperty的(vue),其 ...

  9. nginx代理tomcat做负载

    先对三台服务器统一环境. 对两台tomcat服务器的操作 查看jdk环境 # java -version openjdk version "1.8.0_65" OpenJDK Ru ...

  10. python实现stack并测试

    栈(stack)又名堆栈,它是一种运算受限的线性表.其限制是仅允许在表的一端进行插入和删除运算. 这一端被称为栈顶,相对地,把另一端称为栈底.向一个栈插入新元素又称作进栈.入栈或压栈,它是把新 元素放 ...