Webpack前端打包工具
一、安装
安装Webpack之前需要安装nodejs，然后用npm安装:
$ npm install webpack -g&nsbp;运行以上命令就将Webpack安装到了全局环境中。
但是通常我们会将Webpack只安装到项目的依赖中:
$ cd /www/webpack_demo1 // 进入项目目录，确保该目录下存在有package.json文件,该文件之后会讲到
$ npm install webpack --save-dev // 安装webpack依赖二、使用
首先创建一个index.html和entry.js文件：
// index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script> // 注意这里是bundle.js不是entry.js
</body>
</html>// entry.js
document.write('It works.')然后编译 entry.js 并打包到 bundle.js：
$ webpack entry.js bundle.js然后用浏览器打开会看到It works
接下来添加一个模块module.js，并修改入口entry.js:
// module.js
module.exports = 'It works from module.js.'// entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模块然后重新打包 webpack entry.js bundle.js 刷新页面可以看到变化 It works.It works from module.js.
Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。
三、Loader
Webpack本身只能处理js模块，如果要加载css\img...等静态资源就需要使用Loader转换
Loader可以理解为模块和资源的加载器，它本身是一个函数，接受源文件为参数然后转换并返回。这样我们就可以通过require加载任何类型的模块或文件。 Loader的特性:
- 可以通过管道方式链式调用，每个 loader 可以把资源转换成任意格式并传递给下一个 loader ，但是最后一个 loader 必须返回 JavaScript。
- Loader 可以同步或异步执行。
- Loader 运行在 node.js 环境中，所以可以做任何可能的事情。
- Loader 可以接受参数，以此来传递配置项给 loader。
- Loader 可以通过文件扩展名（或正则表达式）绑定给不同类型的文件。
- Loader 可以通过 npm 发布和安装。
- 除了通过 package.json 的 main 指定，通常的模块也可以导出一个 loader 来使用。
- Loader 可以访问配置。
- 插件可以让 loader 拥有更多特性。
- Loader 可以分发出附加的任意文件。
惯例loader一般是xxx-loader格式，eg: css-loader。在引用loader的时候可以使用简写: json-loader可以写json。
Loader可以在require()引用模块的时候添加，也可以在webpac全局配置中进行绑定，还可以通过命令行的方式使用。
下面来说明下loader怎么用 我们在页面中引入一个style.css文件，首页将style.css看成一个模块，使用css-loader读取它，再用style-loader把它插入到页面
/* style.css */
body { background: blue; }修改entry.js
require("!style-loader!css-loader!./style.css") // 载入 style.css
document.write('It works.')
document.write(require('./module.js'))安装loader：
$ npm install css-loader style-loader // 我在这里安装的时候貌似报了个错，后边加-g指定全局安装就好了重新编译打包可以看到页面背景颜色发生了变化
如果每次require CSS文件的时候都要写loader前缀，很麻烦，我们可以根据模块类型(扩展名)来自动绑定需求的loader。
将entry.js中的require("!style!css!./style.css") 修改为require("./style.css"),然后执行:
$ webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'
// 有些环境下可能需要使用双引号
$ webpack entry.js bundle.js --module-bing "css=style-loader!css-loader"这两种方式效果是一样的。
四、配置文件
Webpack处理在命令行中指定参数还可以通过制定配置文件来执行。默认情况下会搜索当前目录的webpack.config.js文件，这个文件是一个node.js模块，返回一个json格式的配置信息对象，或通过 --config 选项来指定配置文件。
在项目中创建package.json（package.json是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。在终端中使用npm init命令可以自动创建这个package.json文件）来添加webpack需要的依赖:
{
"name": "webpack-example",
"version": "1.0.0",
"description": "A simple webpack example.",
"main": "bundle.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"webpack"
],
"author": "orlion",
"license": "MIT",
"devDependencies": {
"css-loader": "^0.21.0",
"style-loader": "^0.13.0",
"webpack": "^1.12.2"
}
}然后运行:
npm install然后创建一个配置文件webpack.config.js：
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}
]
}
}同时简化entry.js与style.css加载方式:
require('./style.css')五、插件
插件可以完成loader不能完成的功能
插件的使用一般是在webpack的配置信息plugins选项中指定。
Webpack本身内置了一些常用的插件，下面我们利用BannerPlugin内置插件来演示一下。这个插件的作用是给输出的文件头部添加注释信息
修改webpack.config.js，添加plugins:
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style-loader!css-loader'}
]
},
plugins: [
new webpack.BannerPlugin('This file is created by zhaoda')
]
}然后运行webpack，打开bundle.js。可以看到文件头部出现了我们指定的注释信息：
/*! This file is created by zhaoda */
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
...Webpack前端打包工具的更多相关文章
- grunt,gulp,webpack前端打包工具的特性
1.http://www.cnblogs.com/lovesong/p/6413546.html (gulp与webpack的区别) 2.http://blog.csdn.net/qq_3231263 ...
- webpack前端构建工具学习总结（一）之webpack安装、创建项目
npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...
- webpack前端构建工具学习总结（二）之loader的使用
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为 ...
- webpack前端构建工具学习总结（四）之自动化生成项目中的html页面
接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 插件的介绍文档:https://www.npmjs.com/package/html-webpack-p ...
- 项目前端打包工具从 NEJ 切换成 webpack
此文已由作者张磊授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 这里不讨论 NEJ 和 webpack 的优劣,仅从技术角度来探寻一下能否实现,以及实现的代价. 前言 上一篇 ...
- 前端打包工具——build release介绍
前言 对于前端开发者来说,资源打包是日常过程中一个必不可少的过程:目前我们大多数时候使用grunt.gulp.webpack这三个工具来完成这个工作:但是有一个特点就是我们没创建一个项目都要对应的去编 ...
- 浅谈Webpack模块打包工具一
为什么要使用模块打包工具 1.模块化开发ES Modules存在兼容性问题 打包之后成产阶段编译为ES5 解决兼容性问题 2.模块文件过多 网络请求频繁 开发阶段把散的模块打包成一个模块 解决网络请 ...
- 前端打包工具之fis3的初级使用
说到打包工具,大家都会想到webpack,我之前也接触过webpack,说实话个人觉得webpack上手容易,但是对于新手来说里面有太多坑,配置文件也不简单.于是乎,我转入了fis3阵营,发现fis3 ...
- 浅谈Webpack模块打包工具三
Source Map 生产代码与开发代码完全不同,如果需要调试应用的话会非常的麻烦,错误信息无法定位,Soutce Map就会逆向得到源代码, 须在打包之后的代码文件的末尾位置例如添加//# sour ...
随机推荐
- day3字典_字符串_文件操作
一.知识回顾 1.jmeter怎样增加压力机:在主控机配置文件 jmeter.perperties 文件中添加对应压力的IP和对应端口,多台压力机IP用","隔开,保证所有负载机和 ...
- JS_高程5.引用类型（6）Array类型的位置方法，迭代方法，归并方法
一.位置方法 ECMAScript5为数组实例添加了两个位置:indexOf()和 lastIndexOf().这两个方法接收两个参数:要查找的项和(可选的)表示查找起点位置的索引(如在数组[7,8, ...
- GMA Round 1 大吉大利，晚上吃鸡
传送门 大吉大利,晚上吃鸡 新年走亲访友能干点啥呢,咱开黑吃鸡吧. 这里有32个人,每个人都可能想玩或者不想玩,这样子一共有$2^{32}$种可能.而要开黑当然得4人4人组一队(四人模式),所以说如果 ...
- python之文件处理
第一:文件基本处理流程 f=open('text') one_line=f.readline() print('one_line:',one_line) #读取一行 print('分割线'.cente ...
- 5月25号开学! 第13期《python3自动化测试selenium+接口》课程，python零基础也能学
2019年 第13期<python3自动化测试selenium+接口>课程,5月25号开学! 主讲老师:上海-悠悠 上课方式:QQ群视频在线教学 本期上课时间:5月25号-7月28号,每周 ...
- XSplit Quality, VBV-Buffer, VBV-Maxrate and Preset Settings
XSplit uses the x264 encoder, so let's start off by saying that parameters mentioned in the title, w ...
- centos修改主机名 root@后面的名字
阿里云买的新的ESC,名字都是一串字符,不利于平时使用.我们可以重命名主机来标记. centos6 [root@centos6 ~]$ hostname # 查看当前的hostnmae centos6 ...
- 安装了 R2 Integration Servic 之后，SQL Server 2008 Management Studio报错
问题产生 IM数据库服务器未安装Integration Servic,影响备份.在安装了安装了 SQL Server 2008 R2 Integration Servic 之后,SQL Server ...
- 为ExecutorService增加shutdown hook
public class ShutdownHook { private static final ShutdownHook INSTANCE = new ShutdownHook(); private ...
- 微软“小冰”识狗与人工神经网络（V）
实际上.微软早在2014年7月14日首次透露了一项雄心勃勃的研究计划"亚当计划"("Projrct Adam"),该项目是有关计算机视觉方面的研究项目,也就是后 ...