WebPack常用功能介绍
概述
Webpack是一款用户打包前端模块的工具。主要是用来打包在浏览器端使用的javascript的。同时也能转换、捆绑、打包其他的静态资源,包括css、image、font file、template等。个人认为它的优点就是易用,而且常用功能基本都有,另外可以通过自己开发loader和plugin来满足自己的需求。这里就尽量详细的来介绍下一些基本功能的使用。
上一篇已经介绍如何安装了,这里就不再重复了。
运行webpack
webpack需要编写一个config文件,然后根据这个文件来执行需要的打包功能。我们现在来编写一个最简单的config。新建一个文件,命名为webpack-config.js。config文件实际上就是一个Commonjs的模块。内容如下:
var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname,"build");
var nodemodulesPath = path.resolve(__dirname,'node_modules'); var config = {
//入口文件配置
entry:path.resolve(__dirname,'src/main.js'),
resolve:{
extentions:["","js"]//当requrie的模块找不到时,添加这些后缀
},
//文件导出的配置
output:{
path:buildPath,
filename:"app.js"
}
} module.exports = config;
我的目录结构是这样的:
webpack
|---index.html
|---webpack-config.js
|---src
|---main.js
|---js
|---a.js
main.js文件内容如下:
var a = require('./js/a');
a();
console.log('hello world');
document.getElementById("container").innerHTML = "<p>hello world</p>";
a.js文件内容如下:
module.exports = function(){
console.log('it is a ');
}
然后我们执行如下的命令:
webpack --config webpack-config.js --colors
这样我们就能在目录里面看到一个新生成的目录build,目录结构如下:
webpack
|---index.html
|---webpack-config.js
|---build
|---app.js
然后引用app.js就Ok啦。main.js和模块a.js的内容就都打包到app.js中了。这就演示了一个最简单的把模块的js打包到一个文件的过程了。
如何压缩输出的文件
plugins: [
//压缩打包的文件
new webpack.optimize.UglifyJsPlugin({
compress: {
//supresses warnings, usually from module minification
warnings: false
}
})]
如何copy目录下的文件到输出目录
copy文件需要通过插件"transfer-webpack-plugin"来完成。
安装:
npm install transfer-webpack-plugin -save
var TransferWebpackPlugin = require('transfer-webpack-plugin');
//其他节点省略
plugins: [
//把指定文件夹下的文件复制到指定的目录
new TransferWebpackPlugin([
{from: 'www'}
], path.resolve(__dirname,"src"))
]
打包javascript模块
支持的js模块化方案包括:
ES6 模块
import MyModule from './MyModule.js';
CommonJS
var MyModule = require('./MyModule.js');
AMD
define(['./MyModule.js'], function (MyModule) {});
ES6的模块需要配置babel-loader
打包静态资源
安装css-loader和style-loader
npm install css-loader --save -dev
npm install style-loader --save -dev
var config = {
entry:path.resolve(__dirname,'src/main.js'),
resolve:{
extentions:["","js"]
},
output:{
path:buildPath,
filename:"app.js"
},
module:{
loaders:[{
test:/\.css$/,
loader:'style!css',
exclude:nodemodulesPath
}]
}
}
style-loader会把css文件嵌入到html的style标签里,css-loader会把css按字符串导出,这两个基本都是组合使用的。打包完成的文件,引用执行后,会发现css的内容都插入到了head里的一个style标签里。如果是sass或less配置方式与上面类似。
可以通过url-loader把较小的图片转换成base64的字符串内嵌在生成的文件里。安装:
npm install url-loader --save -dev
config配置:
var config = {
entry:path.resolve(__dirname,'src/main.js'),
resolve:{
extentions:["","js"]
},
output:{
path:buildPath,
filename:"app.js"
},
module:{
loaders:[{
test:/\.css$/,
loader:'style!css',//
exclude:nodemodulesPath
},
{ test:/\.png$/,loader:'url-loader?limit=10000'}//限制大小小于10k的
]
}
}
公用的模块分开打包
这需要通过插件“CommonsChunkPlugin”来实现。这个插件不需要安装,因为webpack已经把他包含进去了。接着我们来看配置文件:
var config = {
entry:{app:path.resolve(__dirname,'src/main.js'),
vendor: ["./src/js/common"]},//【1】注意这里
resolve:{
extentions:["","js"]
},
output:{
path:buildPath,
filename:"app.js"
},
module:{
loaders:[{
test:/\.css$/,
loader:'style!css',
exclude:nodemodulesPath
}
]
},
plugins:[
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
//【2】注意这里 这两个地方市用来配置common.js模块单独打包的
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",//和上面配置的入口对应
filename: "vendor.js"//导出的文件的名称
})
]
}
执行webpack会生成app.js和vendor.js两个文件.
多个入口
var config = {
entry:{
m1:path.resolve(__dirname,'src/main.js'),
m2:path.resolve(__dirname,'src/main1.js'),
vendor: ["./src/js/common"] //【1】注意这里
},//注意在这里添加文件的入口
resolve:{
extentions:["","js"]
},
output:{
path:buildPath,
filename:"[name].js"//注意这里使用了name变量
}
}
webpack-dev-server
在开发的过程中个,我们肯定不希望,每次修改完都手动执行webpack命令来调试程序。所以我们可以用webpack-dev-server这个模块来取代烦人的执行命令。它会监听文件,在文件修改后,自动编译、刷新浏览器的页面。另外,编译的结果是保存在内存中的,而不是实体的文件,所以是看不到的,因为这样会编译的更快。它就想到与一个轻量的express服务器。安装:
npm install webpack-dev-server --save -dev
config配置:
var config = {
entry:path.resolve(__dirname,'src/main.js'),
resolve:{
extentions:["","js"]
},
//Server Configuration options
devServer:{
contentBase: '', //静态资源的目录 相对路径,相对于当前路径 默认为当前config所在的目录
devtool: 'eval',
hot: true, //自动刷新
inline: true,
port: 3005
},
devtool: 'eval',
output:{
path:buildPath,
filename:"app.js"
},
plugins: [
new webpack.HotModuleReplacementPlugin(),//这个好像也是必须的,虽然我还没搞懂它的作用
new webpack.NoErrorsPlugin()
]
}
执行命令:
webpack-dev-server --config webpack-dev-config.js --inline --colors
默认访问地址: http://localhost :3000/index.html(根据配置会不一样)
有一点需要声明,在index.html(引用导出结果的html文件)里直接引用“app.js”,不要加父级目录,因为此时app.js在内存里与output配置的目录无关:
<script type="text/javascript" src="app.js"></script>
具体参考:http://webpack.github.io/docs/webpack-dev-server.html
WebPack常用功能介绍的更多相关文章
- [转]WebPack 常用功能介绍
概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...
- 3.Nginx常用功能介绍
Nginx常用功能介绍 Nginx反向代理应用实例 反向代理(Reverse Proxy)方式是指通过代理服务器来接受Internet上的连接请求,然后将请求转发给内部网络上的服务器,并且从内部网络服 ...
- C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法
C#构造方法(函数) 一.概括 1.通常创建一个对象的方法如图: 通过 Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
- 转 2 jmeter常用功能介绍-测试计划、线程组
2 jmeter常用功能介绍-测试计划.线程组 1.测试计划测试用来描述一个性能测试,所有内容都是基于这个测试计划的. (1)User Defined Variables:设置用户全局变量.一般添 ...
- SVN常用功能介绍(二)
说明 上一章节主要描述了SVN的简介.安装搭建,和项目管理人员对SVN的常用操作. 这章主要讲解,SVN对应角色组员,在实际运用中的常用操作. 将SVN服务器项目导入到开发组员的本地电脑里 方式一: ...
- NSwag.AspNetCore常用功能介绍
对于asp.net core 下的Swagger,之前一直用Swashbuckle的,因为官方推荐,再加上有老张的博客助力<从壹开始前后端分离[ .NET Core2.0/3.0 +Vue2.0 ...
- PowerDesigner常用功能介绍
PowerDesigner常用功能:1:把SQL脚步导入PowerDesigner打开powerdesigner,选择File --> Reverse Engineer --> Datab ...
- Android开发自学笔记—1.1(番外)AndroidStudio常用功能介绍
一.界面区介绍 1.项目组织结构区,用于浏览项目文件,默认Project以Android组织方式展示. 2.设计区,默认在打开布局文件时为设计模式,可直接拖动控件到界面上实现所见即所得,下方的Desi ...
- intelij idea常用功能介绍
1.查看本地文件修改记录 保存本地修改记录: 可以将system下的LocalHistory保存,到另一个目录,需要的时候保存即可. 2.debbuger查看代码 1)优化设置 2)常用 3.条件断点 ...
随机推荐
- win7升win10,初体验
跟宿舍哥们聊着聊着,聊到最近发布正式版的win10,听网上各种评论,吐槽,撒花的,想想,倒不如自己升级一下看看,反正不喜欢还可以还原.于是就开始了win10的初体验了,像之前装黑苹果双系统一样的兴奋, ...
- RabbitMQ服务安装配置
RabbitMQ是流行的开源消息队列系统,是AMQP(Advanced Message Queuing Protocol高级消息队列协议)的标准实现,用erlang语言开发.RabbitMQ据说具有良 ...
- Windows server用好windows server backup,发挥个人电脑该有的系统还原功能
笔记本上安装windows server的各位是不是有个感触,默认软件升级.软件更新,系统是没有系统还原的(磁盘清理发现也没有还原点可清理),也就是系统出了问题,还原不了干着急. 其实,windows ...
- Cmake的交叉编译
http://www.cmake.org/Wiki/CMake_Cross_Compiling
- 《Single Image Haze Removal Using Dark Channel Prior》一文中图像去雾算法的原理、实现、效果(速度可实时)
最新的效果见 :http://video.sina.com.cn/v/b/124538950-1254492273.html 可处理视频的示例:视频去雾效果 在图像去雾这个领域,几乎没有人不知道< ...
- POJ1151Atlantis 矩形面积并[线段树 离散化 扫描线]
Atlantis Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 21734 Accepted: 8179 Descrip ...
- Python函数作用域的查找顺序
函数作用域的LEGB顺序 1.什么是LEGB? L:local 函数内部作用域 E:enclosing 函数内部与内嵌函数之间 G:global 全局作用域 B:build-in 内置作用域 2.它们 ...
- 第7章 权限管理(3)_文件系统属性和sudo权限
3. 文件系统属性chattr权限 (1)chattr命令 命令格式: #chattr [+-=][选项] 文件或目录名 +.-.= 分别表示增加权限.删除权限和赋于某种权限 选项 i:主要用来防止对 ...
- jquery用一个事件控制另一个事件是否执行(不是删除事件)
想用click事件控制mouseover事件的执行,如果用删除绑定mouseover事件以后就不能再使用mouseover了,于是只需要设置一个全局变量,并赋值false,当点击click事件,将全局 ...
- KVO设计模式
一,概述 KVO,即:Key-Value Observing,它提供一种机制,当指定的对象的属性被修改后,则对象就会接受到通知.简单的说就是每次指定的被观察的对象的属性被修改后,KVO就会自动通知相应 ...