webpack的一些有用的命令

webpack --display-modules

在终端显示这些module,另外一个推荐使用

webpack --display-modules --display-reasons

可以把我们在哪里require都显示出来并且用哪些loader处理

webpack -d //debug
webpack -p //执行一些优化将我们的文件压缩
webpack --watch //或者
webpack -w

-w是缩写这个命令使我们不用每次更改文件都去执行webpack,比如我们修改我们的css文件 把字体颜色改为#fff 保存我们直接刷新浏览器就可以了,嘻嘻。

但是我们还是得去刷新浏览器,webpack还提供了热加载,首先安转webpack的服务

npm install webpack-dev-server --save-dev

这里可以配置的参数

devserver配置选项 功能描述
contentBase 默认webpack-dev-server会为根文件夹提供本地服务器,如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在目录(本例设置到“public"目录)
port 设置默认监听端口,如果省略,默认为”8080“
inline 设置为true,当源文件改变时会自动刷新页面
colors 设置为true,使终端输出的文件为彩色的
historyApiFallback 在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html
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/,
},
{
test:/\.vue$/,
loader:"vue"
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
},
babel:{
presets:['es2015','stage-0'],
plugins:['transform-runtime']
},
devServer: {
port:"8090",
inline:true,
}
}

这里配置8090端口自动刷新页面,在终端使用命令启动服务器

webpack-dev-server --inline

直接在页面打开http://localhost:8090/更改代码你就可以看到实时刷新了,判断我们是线上环境还是线下环境,然后做一些区别:

var debug = process.env.NODE_ENV !== "production";
module.exports = {
devtool:debug ? "sourcemap" : null,//线下才生产sourcemap
entry:"./js/entry.js",
output:{
filename:"bundle.js",
},
module:{
loaders:[
{
test:/\.css$/,
loader:"style!css"
},
{
test:/\.js$/,
loader:"babel",
exclude:/node_modules/,
},
{
test:/\.vue$/,
loader:"vue"
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
},
babel:{
presets:['es2015','stage-0'],
plugins:['transform-runtime']
},
devServer: {
port:"8090",
historyApiFallback: true,
inline: true,
progress: true,
},
plugins:debug ? []:[
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({mangle:false,sourcemap:false})
],
}

webpack +vue开发(3)的更多相关文章

  1. Wabpack系列:在webpack+vue开发环境中使用echarts导致编译文件过大怎么办?

    现象,在一个webpack+vue的开发环境中,npm install echarts --save了echarts,然后在vue文件中直接使用 import echarts from 'echart ...

  2. webpack +vue开发(2)

    我们的loader方式其实可以写成inline的方式 loaders:[ { test:/\.js$/, loader:"babel", exclude:/node_modules ...

  3. webpack +vue开发(1)

    首先安装 node.js这是毋庸置疑的,安装完了之后安装webpack npm install webpack -g 接下来创建一个自己的文件夹 webpack-learn在里面创建一个index.h ...

  4. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  5. 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记【ThinkSNS+研发日记系列】

    在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 社群系统ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. L ...

  6. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  7. VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  8. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  9. 基于 Webpack 4 搭建 Vue 开发环境

    自从工作之后,就已经很久没有写过博客了.时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客. 之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 -- 基于Webpa ...

随机推荐

  1. Linux (Ubuntu) 下配置VPN服务器

    昨天网上找了下VPN的相关信息,居然各种撞墙,特别郁闷,自己不容易找到的东西,记录下VPN的配置信息 ubuntu 13.1下配置VPN  ,采用PPTP实现, 第一步.安装pptpd,没有安装包记得 ...

  2. iOS开发UI篇—Quartz2D简单介绍

    iOS开发UI篇—Quartz2D简单介绍 一.什么是Quartz2D Quartz 2D是⼀个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作: 绘制图形 : 线条\三角形\ ...

  3. css伪元素选择器(伪对象选择器)checked + 伪元素练习

    伪对象也叫伪元素,在过去,伪类和伪元素都被书写成前面只加一个冒号,实际上应该是: :weilei ::伪元素 而现在我们为了兼容旧的书写方式,用一个冒号引导伪类也是能被解析的. 伪类一般反应无法在CS ...

  4. C语言基础--函数

    函数概念: 1. C语言程序是由函数组成 2. 什么是函数? 函数就是一段具备特定功能的程序段 定义函数的目的: 定义函数的目的: 将一个功能封装以来方便复用 不使用函数的弊端: 1.重复代码太多, ...

  5. AngularJs的UI组件ui-Bootstrap分享(二)——Collapse

    Collapse折叠控件使用uib-collapse指令 <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" xml ...

  6. git常用命令有用

    http://www.cnblogs.com/cspku/articles/Git_cmds.html

  7. sql datetime操作

    Sql Server中的日期与时间函数 SQL中的时间函数非常有用,特别是在我们进行初始赋值.复杂查询的时候,就显得特别方便. 1.获得系统当前时间 select getdate()  2.DateN ...

  8. 黑马程序员——【Java基础】——File类、Properties集合、IO包中的其他类

    ---------- android培训.java培训.期待与您交流! ---------- 一.File类 (一)概述 1.File类:文件和目录路径名的抽象表现形式 2.作用: (1)用来将文件或 ...

  9. (实用篇)PHP定时任务获取微信access_token

    最近开发微信公众平台,公众号调用各接口时都需使用access_token,access_token是公众号的全局唯一接口调用凭据,开发时需要进行妥善保存. access_token有效期为7200秒 ...

  10. iOS 常用设计模式和机制之KVO

    KVO http://blog.kyleduo.com/2014/10/20/ios_learning-kvo/ 定义: KVO:Key-Value Observing,是Foundation框架提供 ...