webpack+vue起步
本文基于vue1.x
基于vue2.x&webpack2.x请移步至
记得第一次知道Vue.js是在勾三股四大大的微博，那时候他开始翻译vue的文档，从那时候开始到现在，看了几次vue的教程，每次都有更深的理解，因为之前并没有研究过angular等框架，所以对MVVM并不是很了解，但是经过这段时间对vuejs的一些研究，越来越懂了，这篇文章，只是对vuejs和webpack配合的非常基础的文章，我想随着我对vue的深入理解，会对组件化，模块化，MVVM有更深入的理解。
项目的创建
1.新建项目文件夹，并在其中建立package.json
$ mkdir [project name]
$ cd [project name]
$ npm init2.在项目目录下新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue example</title>
</head>
<body>
<div>{{message}}</div>
<script src="dist/build.js"></script>
</body>
</html>src文件夹，并在该文件夹下建立main.js
import Vue from 'vue'
new Vue({
el:'body',
data:{
message:'test success!'
}
});设置webpack
1.安装webpack，webpack-dev-server以及相关的loaders
# 全局安装webpack，webpack-dev-server
$ npm install -g webpack
$ npm install -g webpack-dev-server
# 为项目安装其他依赖
$ npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -Dwebpack-merge：开发环境和生产环节的webpaak配置文件的配置合并<br/>
css-loader：编译写入css<br/>
style-loader：把编译后的css整合进html<br/>
file-loader：编译写入文件，默认情况下生成文件的文件名是文件名与MD5哈希值的组合<br/>
vue：vue主程序<br/>
vue-laoder：编译写入.vue文件<br/>
vue-html-loader：编译vue的template部分<br/>
vue-style-loader：编译vue的样式部分<br/>
vue-hot-reload-api：webpack对vue实现热替换<br/>
babel-core：ES2015编译核心<br/>
babel-loader：编译写入ES2015文档<br/>
babel-preset-es2015：ES2015语法<br/>
babel-preset-stage-0：开启测试功能<br/>
babel-runtime：babel执行环境<br/>
url-loader
这里介绍下url-loader，这个loader实际上是对file-loader的封装https://github.com/webpack/url-loader
比如CSS文件中有时候会这么写：
.demo{
background-image: url('a.png');
}module:{
loaders:[
{test:/\.(png|jpg)$/,loader:'url-loader?limit=8192'}
]
}经过以上配置，当a.png小于8K就会自动将图片转换成base64编码，如果不小于，则不会转换。
这里顺便提一句，在module配置的时候，loader的写法：
module:{
loaders:[
{test:/\.jade$/,loader:'jade'}
//这里配置了让webpack识别jade的loader，其他类似，比如.vue
//用于css文件的loader有两种写法
{test:/\.css$/,loader:'style!css'}
{test:/\.css$/,loaders:['style','css']}
]
}2.配置webpack.config.js
在根目录下建立webpack.config.js，配置如下：
var path = require('path');
module.exports = {
entry: './src/main.js',
//定义webpack输出的文件，我们在这里设置了
让打包后生成的文件放在dist文件夹下的build.js文件中
output: {
path: './dist',
publicPath:'dist/',
filename: 'build.js'
},
module: {
loaders: [
//转化ES6语法
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
//图片转化，小于8K自动转化为base64的编码
{
test: /\.(png|jpg|gif)$/,
loader:'url-loader?limit=8192'
}
]
},
//这里用于安装babel，如果在根目录下的.babelrc配置了，这里就不写了
babel: {
presets: ['es2015','stage-0'],
plugins: ['transform-runtime']
}
}特别说明
如果要在.babelrc下配置babel，则需要在根目录下新建该文件，windows环境下，不能新建该txt文件然后改后缀，需要通过dos命令建立：
echo>.babelrc通过该命令就可以建立babelde配置文件，用编辑器打开，修改里面的内容为：
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"]
}完成该配置我们在命令中运行
$ webpack打开index.html就可以看到浏览器中看到我们刚刚写的文字
至此我们实现了最基本的利用webpack打包vue，下一篇将讲解如何利用webpack+vue真正实现组件化。
本地安装npm包后如何在命令行运行
在npm安装包的时候，如果使用全局安装，即npm install <packageName> -g，则在安装完成后可以在终端运行作为命令去运行，但是如果是本地安装的包npm install --save-dev <packageName>，则无法这样直接运行。那么如何运行本地安装的包呢？首先进入项目目录（即package.json所在目录），然后使用以下命令即可运行：
$ node_modules/.bin/<packageName>
除了可以这样在命令行运行外，还可以在文件中运行
//index.js
let webpack = require('webpack');
webpack();
$ node index.js
webpack1.x升级2.x
1.module.loaders改成了module.rules
旧的loaders被新的rules取代，后者允许配置loader以及其他更多项。
module: {
- loaders: [
+ rules: [
{
test: /\.css$/,
- loaders: [
+ use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
- query: {
+ options: {
modules: true
}
]
},
{
test: /\.jsx$/,
loader: "babel-loader", // Do not use "use" here
options: {
// ...
}
}
]
}以上写法中，Rule.loader是Rule.use: [ { loader } ]的简写。
2.链式调用loaders
在webpack1.x中loaders可以链式调用，在2.x中依旧有该特性，使用rule.use配置项，use中设置一个loaders的数组而在1.x中使用!连接各个loader，旧版写法只有在使用旧的module.loaders时有效。
module: {
- loaders: {
+ rules: {
test: /\.less$/,
- loader: "style-loader!css-loader!less-loader"
+ use: [
+ "style-loader",
+ "css-loader",
+ "less-loader"
+ ]
}
}3.取消在模块中自动添加-loader后缀
webpack2.x中不再添加-loader
module: {
rules: [
{
use: [
- "style",
+ "style-loader",
- "css",
+ "css-loader",
- "less",
+ "less-loader",
]
}
]
}根据官方说法，做出这样更改的原因是省略-loader会对新手造成误解，所以去掉这个功能，如果想打开这个旧的功能，可以配置resolveLoader.moduleExtensions，但是并不推荐这么做，具体参阅issues#2986
+ resolveLoader: {
+ moduleExtensions: ["-loader"]
+ }4.使用options配置loader
在webpack1.x中可以通过webpack.config.js的自定义属性来配置loader，这在webpack2.x中无法执行
module.exports = {
...
module: {
use: [{
test: /\.tsx?$/,
loader: 'ts-loader'
}]
},
// does not work with webpack 2
ts: { transpileOnly: false }
}
//webpack2 use options
module.exports = {
...
module: {
use: [{
test: /\.tsx?$/,
loader: 'ts-loader'
options: { transpileOnly: false }
}]
}
}webpack插件的使用
webpack-dev-server1.x升级2.x
1.在CLI使用的时候，--inline默认开启，无需在输入命令时添加
2.删除contentBase用proxy代替
3.减少控制台无用输出，在1.x中，当我们停掉服务器后，控制台会一直输出错误信息，但是在2.x中只会输出[WDS] Disconnected!
extract-text-webpack-plugin
在使用webpack将vue_spa打包后，并不会出现css，因为css被打包入build.js，如果从vue组件中抽离出css，需要安装插件extract-text-webpack-plugin，在使用的时候需要配合v2版本的才可以使用（如果使用了webpack2，则对应的插件版本都需要用v2版本）。具体配置如下：
module:{
rules:[
{
test: /\.vue$/,
loader: 'vue',
options: {
loaders:{
css: extractTextPlugin.extract({
loader: 'css-loader',
fallbackLoader: 'vue-style-loader'
})
}
}
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new extractTextPlugin({
filename:'/style.css',
allChunks:true
})
],在options中：
options.loader: string | object | loader[] (必填项) 这里的 loader(s) 用于将资源转换为css导出模块
options.fallbackLoader: string | object | loader[] 当css没有被导出的时候这里的 loader(s) 会被使用 （即当在plugins模块中设置allChunks:false的时候）
在plugins中：
filename：可以设置被导出的css文件的路径以及名字
allChunks：从所有附加块中提取（默认情况下，它只从初始块中提取）
html-webpack-plugin
plugins: [
new htmlWwebpackPlugin({
filename: 'assets/admin.html'
}),
]title：用于生成文档的document
filename：要注入的html文件，默认为index.html。可以自定义（例如：assets/admin.html）
inject：
true | ‘head’ | ‘body’ | false
将资源注入所给的template或templateContent，当设置为 true 或者 ‘body’，所有的资源会被注入到body底部。而head则会将js放到headelement
favicon: 在输出的html中添加favicon
hash: true | false 如果为true，则将一个唯一的webpack编译散列附加到所有包含的脚本和CSS文件。这对缓存清除很有用。
cache: true | false 如果为true（默认），尝试仅在更改后才发出文件。
是否要更换preset？
webpack2.x默认支持es6的模块，所以在编译时候没有必要将它们先转换为CommonJS模块再处理，所以在github中出现了babel-preset-es2015-webpack，但是这个模块我在使用的时候出现了Cannot remove 'babel-plugin-transform-es2015-modules-commonjs' from the plugin list.的问题，根据babel-preset-es2015-webpack中的叙述以及issues#14可知，babel-preset-es2015已经支持不转换模块中的import和export，只需要设置.babelrc
{
"presets": [
[
"es2015",
{
"modules": false
}
]
]
}webpack+vue起步的更多相关文章
- 基于 Laravel 开发 ThinkSNS+ 中前端的抉择（webpack/Vue）踩坑日记【ThinkSNS+研发日记系列】
在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 社群系统ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. L ...
- 基于 Laravel 开发 ThinkSNS+ 中前端的抉择（webpack/Vue）踩坑日记
在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. Larav ...
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
- Wabpack系列：在webpack+vue开发环境中使用echarts导致编译文件过大怎么办？
现象,在一个webpack+vue的开发环境中,npm install echarts --save了echarts,然后在vue文件中直接使用 import echarts from 'echart ...
- 基于 Webpack & Vue & Vue-Router 的 SPA 初体验
基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...
- gulp+webpack+vue
gulp+webpack+vue 章节目录 1.目标 2.实现 2.1合并库文件 2.2组织业务代码 2.3打包开发代码 2.4使用webpack-dev-server和热替换插件HotModuleR ...
- webpack + vue最佳实践
webpack + vue最佳实践 我的原文地址:http://www.xiaoniuzai.cn/2016/10/04/webpack%20+%20vue%E6%9C%80%E4%BD%B3%E5% ...
- Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结
本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...
- webpack+vue项目实战（四，前端与后端的数据交互和前端展示数据）
地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...
随机推荐
- src与href的区别
href: 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接. src:是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置:在请求src资源时会将其 ...
- P1627 中位数
P1627 中位数 题目描述 给出1~n的一个排列,统计该排列有多少个长度为奇数的连续子序列的中位数是b.中位数是指把所有元素从小到大排列后,位于中间的数. 输入输出格式 输入格式: 第一行为两个正整 ...
- ptyhon - 接口自动化测试实战case1
work_20181203_httprequest.py: import requestsclass http_request: def http_get(url,params): res = req ...
- 谈谈Python中对象拷贝
你想复制一个对象?因为在Python中,无论你把对象做为参数传递,做为函数返回值,都是引用传递的. 何谓引用传递,我们来看一个C++交换两个数的函数: void swap(int &a, in ...
- 聊聊 Spring Boot 2.0 的 WebFlux
聊聊 Spring Boot 2.0 的 WebFlux## 前言 对照下 Spring Web MVC ,Spring Web MVC 是基于 Servlet API 和 Servlet 容器设计的 ...
- bzoj 4311 向量 时间线建线段树+凸包+三分
题目大意 你要维护一个向量集合,支持以下操作: 1.插入一个向量(x,y) 2.删除插入的第i个向量 3.查询当前集合与(x,y)点积的最大值是多少.如果当前是空集输出0 分析 按时间线建线段树 大致 ...
- css3 手机端翻屏切换效果
原理是基于css3的 1.景深:perspective:100px; 2.中心点:transform-origin:center center 0; 3.transform-style:preserv ...
- php 生成二维码图片
php 生成二维码图片 (1)下载类库文件 php类库PHP QR Code,地址:http://phpqrcode.sourceforge.net/. (2)放到项目里 把下载的文件解压后有个php ...
- LightOJ 1140： How Many Zeroes? （数位DP）
当前数位DP还不理解的点: 1:出口用i==0的方式 2:如何省略状态d(就是枚举下一个数的那个状态.当然枚举还是要的,怎么把空间省了) 总结: 1:此类DP,考虑转移的时候,应当同时考虑查询时候的情 ...
- 搭建redis集群时所遇问题及解决方法
单独一台虚拟机(系统CentOS 7) 问题1 创建redis集群环境时,输入以下命令 [root@localhost redis-cluster]# ./redis-trib.rb create - ...