webpack 3.X学习之基本配置
创建配置文件webpack.config.js
在根目录在手动创建webpack.config.js,配置基本模板
module.exports ={
entry:{},
output:{},
module:{},
plugins:[],
devServer:{}
}
- entry:配置入口文件的地址,可以是单一入口,也可以是多入口;
- output:配置出口文件的地址,支持多出口配置;
- module:配置模块,主要解析CSS和图片转换压缩等功能;
- plugins:配置插件;
- devServer:配置开发服务功能;
entry选项配置
这个选项配置我们要压缩的文件一般是javascript。
entry:{
entry:'./src/entery.js'
}
output选择配置
出口配置用来告诉webpack最后打包文件的地址和文件名称;
output:{
//打包后的文件路径
path: path.resolve(__dirname,'dist'),
//打包后的文件名称
filename:'bundle.js'
}
当然还要引入path模块,这个是nodejs自带的模块;在webpack.config.js文件的头部引入;
const path = require('path');
现在的代码结构:
const path = require('path');
module.exports={
//入口文件的配置项
entry:{
entry:'./src/entry.js'
},
//出口文件的配置项
output:{
//输出的路径,用了Node语法
path:path.resolve(__dirname,'dist'),
//输出的文件名称
filename:'bundle.js'
},
//模块:例如解读CSS,图片如何转换,压缩
module:{},
//插件,用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
多入口,出口配置
const path = require('path');
module.exports={
//入口文件的配置项
entry:{
entry:'./src/entry.js',
//这里我们又引入了一个入口文件
entry2:'./src/entry2.js'
},
//出口文件的配置项
output:{
//输出的路径,用了Node语法
path:path.resolve(__dirname,'dist'),
//输出的文件名称
filename:'[name].js'
},
//模块:例如解读CSS,图片如何转换,压缩
module:{},
//插件,用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
将filename的值修改为[name].js;它的意思是根据入口文件的名称,打包成相同的名称,有几个入口文件,就可以打包出几个出口文件;
服务和热更新配置
首先,配置devServer
devServer:{
contentBase:path.resolve(__dirname,'dist'),
host:'localhost',
compress:true,
port:1608
}
- contentBase:服务器基本运行路径
- host:服务器运行地址
- compress:服务器压缩式,一般为true
- port:服务运行端口
然后,下载webpack-dev-server模块,
npm install webpack-dev-server --save-dev
最后,配置package.json里的scripts选项
"scripts": {
"server": "webpack-dev-server"
}
运行命令 npm run server ,服务器运行,在浏览器中打开http://localhost:1608,既可以看到页面;
当 npm run server 启动后,服务器有一种监控机制(watch),可以实现热更新;
参考地址:
webpack 3.X学习之基本配置的更多相关文章
- webpack 3.X学习之Babel配置
Babel是什么 Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到: 使用下一代的javascript(ES6,ES7,--)代码,即使当前浏览器没有完成支持: ...
- haproxy学习之https配置
haproxy学习之https配置 原文 http://www.cnblogs.com/ilanni/p/4941056.html 如何配置https,以及https在实际生产环境中的应用. ...
- 深度学习主机环境配置: Ubuntu16.04 + GeForce GTX 1070 + CUDA8.0 + cuDNN5.1 + TensorFlow
深度学习主机环境配置: Ubuntu16.04 + GeForce GTX 1070 + CUDA8.0 + cuDNN5.1 + TensorFlow 最近在公司做深度学习相关的学习和实验,原来一直 ...
- 1 python学习——python环境配置
1 python学习--python环境配置 要学习python语言,光看书看教程还是不好,得动手去写.当然,不管学习什么编程语言,最佳的方式还在于实践. 要实践,先得有一个Python解释器来解释执 ...
- AgileEAS.NET SOA 中间件平台5.2版本下载、配置学习(三):配置ActiveXForm运行环境
一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...
- JMeter学习-002-JMeter环境配置
本节主要介绍 JMeter 本地环境配置(JMeter 版本为 apache-jmeter-2.12),详细配置如下: 一.JDK配置 默认用户本地已经安装且配置好 JDK.若未配置,敬请参阅我的博客 ...
- (转)深度学习主机环境配置: Ubuntu16.04+Nvidia GTX 1080+CUDA8.0
深度学习主机环境配置: Ubuntu16.04+Nvidia GTX 1080+CUDA8.0 发表于2016年07月15号由52nlp 接上文<深度学习主机攒机小记>,这台GTX10 ...
- webpack 1.x 学习总结
webpack介绍(from github): A bundler for javascript and friends. Packs many modules into a few bundled ...
- 深度学习python的配置(Windows)
Windows下深度学习python的配置 1.安装包的下载 (1)anaconda (2)pycharm 2.安装教程 (1)anaconda a.降版本 b.换源 (2)pycharm a.修改h ...
随机推荐
- 初识SQL Server2017 图数据库(一)
背景: 图数据库对于表现和遍历复杂的实体之间关系是很有效果的.而这些在传统的关系型数据库中尤其是对于报表而言很难实现.如果把传统关系型数据库比做火车的话,那么到现在大数据时代,图数据库可比做高铁.它已 ...
- CSS之 z-index 属性
层叠上下文: 三维概念,表示元素在Z轴的位置 层叠可嵌套,组合成一个分层次上下文 每个层叠上下文和兄弟元素独立,进行层叠变化或渲染时,只考虑后代元素 每个层叠上下是自成体系的 层叠顺序 1 bac ...
- win10 uwp 视差效果
本文翻译:http://jamescroft.co.uk/blog/uwp/playing-with-scrolling-parallax-effects-on-ui-elements-in-wind ...
- OpenWRT(RT5350) 路由客户模式(Routed Client) ,设置防火墙开放UDP指定端口
/* *功 能: 本文主要功能是设置OpenWRT(RT5350) 系统实现路由客户模式,无线连接上级路由, * 无线释放AP客户端,实现伪装的中继(子网段与上级路由网段不同),同时更改防火墙 ...
- Software development process
一.Development process 1.Business/User Requirement 2.Architecture Proposal,Solution Proposal 3.Functi ...
- 利用大白菜制作多系统启动U盘(win+ubuntu+PE+...)
网上提供的方法很多都过时了,不适用,要不就是讲的不清楚 我结合http://www.xuebuyuan.com/848003.html大神的方案,加以研究,整理出了此篇文章 先看下最终成果: 好了,感 ...
- iOS初学,关于变量加下划线问题
为什么做ios开发,变量前要加下划线才有用? 看到这个哥们的解释后,终于明白了,转帖到此. 链接在此:http://www.cocoachina.com/bbs/read.php?tid=234290 ...
- JavaScript面向对象中的继承
1.1继承的基本概念 使用一个子类,继承另一个父类,那么子类可以自动拥有父类中的所有属性和方法,这个过程叫做继承. >>>继承的两方,发生在两个类之间. 实现继承的三种方式: 扩展O ...
- x86-64栈帧中的“红色区域” red zone of stack frame on x86-64
前几天看System V AMD64 ABI标准的时候发现栈帧的顶部后面有一块"red zone",在学cs:app3e/深入理解操作系统的时候并没有遇到这个,总结一下. 引用标准 ...
- Leetcode题解(十九)
54.Spiral Matrix 题目: 题目意思很简单,就是螺旋式访问矩阵元素.也没有比较经典的算法可以解决此题,只需要模拟一下这个过程即可. 代码如下: class Solution { publ ...