webpack +vue开发（1）
首先安装 node.js这是毋庸置疑的，安装完了之后安装webpack
npm install webpack -g
接下来创建一个自己的文件夹 webpack-learn在里面创建一个index.html一个js文件夹
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>webpck is nice tool</h1>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
js中创建
module-one.js
console.log("module-one")
module-two.js
console.log("module-two")
entry.js
require("./module-one.js");
require("./module-two.js");
接下来运行webpack：
webpack js/entry.js bundle.js
前面是需要打包的文件，后面是输出的文件，这样就可以看到bundle.js
这个时候打开index.html就可以看到console.log输出的内容了，这样操作就比较的麻烦，webpack可以配置文件，在工程目录下创建webpack的配置文件webpack.config.js
module.exports = {
devtool:"sourcemap",
entry:"./js/entry.js",
output:{
filename:"bundle.js",
},
}
另外的一种配置：
// nodejs 中的path模块
var path = require('path');
module.exports = {
// 入口文件，path.resolve()方法，可以结合我们给定的两个参数最后生成绝对路径，最终指向的就是我们的index.js文件
entry: path.resolve(__dirname, '../app/index/index.js'),
// 输出配置
output: {
// 输出路径是 myProject/output/static
path: path.resolve(__dirname, '../output/static'),
publicPath: 'static/',
filename: '[name].[hash].js',
chunkFilename: '[id].[chunkhash].js'
},
}
在webpack的配置文件中配置source maps，需要配置devtool，它有以下四种不同的配置选项，各具优缺点，描述如下：
| devtool选项 | 配置结果 |
| source-map | 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包文件的构建速度； |
| cheap-module-source-map | 在一个单独的文件中生成一个不带列映射的map，不带列映射提高项目构建速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便； |
| eval-source-map | 使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项； |
| cheap-module-eval-source-map | 这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点； |
正如上表所述，上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的构建速度的后果就是对打包后的文件的的执行有一定影响。
在学习阶段以及在小到中性的项目上，eval-source-map是一个很好的选项，不过记得只在开发阶段使用它
devtool生成一个map声明哪个文件指向哪个文件方便debug，删除bundle.js文件之后直接在终端输入webpack这个命令边代替了之前的 webpack js/entry.js bundle.js命令， 同样会生成bundle.js，bundle.js.map,在自己的工程中引入一些库，比如jquery
首先
npm init
这里生成一个package.json项目安装的库、插件什么的都在列表中。
安装jquery
npm install jquery --save-dev
安装完成后去修改一下module-one.js
var $ = require("jquery");
$("h1").html("is tomorrow");
这个时候在 执行webpack命令，这个时候页面显示为is tomorrow。下面使用webpack的loader。
npm install css-loader style-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime --save-dev
安装完了要使用的话 ，还需要配置webpack.config.js
module.exports = {
devtool:"sourcemap",
entry:"./js/entry.js",
output:{
filename:"bundle.js",
},
module:{
loaders:[
{
test:/\.css$/,
loader:"style!css"
},
]
},
}
test使用正则匹配后缀名为.css的文件 loader说明我们需要使用哪个loader处理（这里我们需要css和style两个），这里我们去创建一个style.css文件
body{
background: #999;
}
之后我们去配置我们的入口文件entry
require("./module-one.js");
require("./module-two.js");
require("../css/style.css");
执行webpack之后我们就可以看到我们的body变为了灰色，这就是我们需要的结果。将es6使用loader处理，首先在webpack.config.js中配置，配置babel和声明我们的loader
module.exports = {
devtool:"sourcemap",
entry:"./js/entry.js",
output:{
filename:"bundle.js",
},
module:{
loaders:[
{
test:/\.css$/,
loader:"style!css"
},
{
test:/\.js$/,
loader:"babel",
exclude:/node_modules/,
}
]
},
babel:{
presets:['es2015','stage-0'],
plugins:['transform-runtime']
}
}
exclude就是将我们的node_modules这个目录全部忽略掉，可以加快的我们速度，那么在我们的module-one中使用es6语法
// var $ = require("jquery");
import $ from 'jquery';
$("h1").html("is yesterday");
这样在我们的页面中显示的就是is yesterday了。
webpack +vue开发（1）的更多相关文章
- Wabpack系列：在webpack+vue开发环境中使用echarts导致编译文件过大怎么办？
现象,在一个webpack+vue的开发环境中,npm install echarts --save了echarts,然后在vue文件中直接使用 import echarts from 'echart ...
- webpack +vue开发（3）
webpack的一些有用的命令 webpack --display-modules 在终端显示这些module,另外一个推荐使用 webpack --display-modules --display ...
- webpack +vue开发（2）
我们的loader方式其实可以写成inline的方式 loaders:[ { test:/\.js$/, loader:"babel", exclude:/node_modules ...
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
- 基于 Laravel 开发 ThinkSNS+ 中前端的抉择（webpack/Vue）踩坑日记【ThinkSNS+研发日记系列】
在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 社群系统ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. L ...
- Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结
本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...
- VUE开发请求本地数据的配置，旧版本dev-server.js，新版本webpack.dev.conf.js
VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...
- Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑
本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...
- 基于 Webpack 4 搭建 Vue 开发环境
自从工作之后,就已经很久没有写过博客了.时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客. 之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 -- 基于Webpa ...
随机推荐
- 转:在支持ARC工程中编译不支持ARC的文件
转:http://blog.csdn.net/duxinfeng2010/article/details/8709697 实践总结:-fno-objc-arc 设置 解决了 旧代码中存在 releas ...
- 计算机网络(2)-----ARP协议
ARP协议(Address Resolution Protocol) 概念 地址解析协议,即ARP(Address Resolution Protocol),是根据IP地址获取物理地址的一个TCP/I ...
- Linux学习 ： 裸板调试 之 使用MMU
MMU(Memory Management Unit,内存管理单元),操作系统通过使用处理器的MMU功能实现以下:1)虚拟内存.有了虚拟内存,可以在处理器上运行比实际物理内存大的应用程序.为了使用虚拟 ...
- 计算第k个质因数只能为3,5,7的数
英文描述:Design an algorithm to find the kth number such that the only prime factors are 3, 5, and 7 思路: ...
- 《Java中的不可变类》
//不可变类举例: /* 下面程序试图定义一个不可变类Person类,但=因为Person类包含一个引用类型的成员变量, 且这个引用类是可变类,所以导致Person类也变成了可变类. */ class ...
- 应用容器Application container
应用容器是最基本的组件,用于布局的容器. 属性 样式 事件 默认白边各24像素,默认为浏览器大小可以设置整体背景 边距等. 根应用文件就是第一个加载的文件.
- Css学习笔记 （一）
这几天写了点CSS,大概总结一下,很凌乱,只是加深一下自己的认识. background-position background-position是以容器的左上角为0,0定位,支持(left,righ ...
- HDU2222
http://acm.hdu.edu.cn/showproblem.php?pid=2222 注意: 1. keyword可以相同,因此计算时要累计:cur->num++. 2. 同一个keyw ...
- Poisson Distribution——泊松分布
老师留个小作业,用EXCEL做不同lambda(np)的泊松分布图,这里分别用EXCEL,Python,MATLAB和R简单画一下. 1. EXCEL 运用EXCEL统计学公式,POISSON,算出各 ...
- Flume 实战(1) -- 初体验
前言: Flume-ng是数据收集/聚合/传输的组件, Flume-ng抛弃了Flume OG原本繁重的zookeeper和Master, Collector, 其整体的架构更加的简洁和明了. 其基础 ...