Webpack:前端资源模块化管理和打包工具
一.介绍：
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生
产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转
换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、
Coffeescript、 LESS等。
Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的
静态资源。
二.Webpack 和其他模块化工具有什么区别呢？
1.代码拆分：
2.Loader:
3.智能解析：
4.插件系统：
5.快速运行：
三.安装使用：
1.用 cnpm 全局安装 Webpack： cnpm install webpack -g
2.本地安装使用：cnpm install webpack --save-dev
3.项目初始化：
（1）.建立mywebpack文件夹并初始化项目：C:\mywebpack>npm init
（2）.如果不是实际项目可以一路回车完成初始化，安装本地webpack：C:\mywebpack>cnpm install webpack --save-dev 完成安装。可以使用 C:\mywebpack>dnpm info webpack 查看webpack 的版
本；也可以看到package.json中例如：
"devDependencies": {
"webpack": "^1.14.0"
}
webpack安装成功！
（3）.使用webpack:
首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js：
<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
// entry.js
document.write('It works.') 然后编译 entry.js 并打包到 bundle.js: C:\mywebpack> webpack entry.js bundle.js
用浏览器打开 index.html 将会看到 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.
（4）.Loader：Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader
进行转换。
上一节的例子，我们要在页面中引入一个 CSS 文件 style.css，首页将 style.css 也看成是一个模块，
然后用 css-loader 来读取它，再用 style-loader 把它插入到页面中
/* style.css */
body { background: yellow; }
修改 entry.js：
require("!style!css!./style.css") // 载入 style.css
document.write('It works.')
document.write(require('./module.js'))
安装 loader：
C:\mywebpack>cnpm install css-loader style-loader
重新编译打包，刷新页面，就可以看到黄色的页面背景了。如果每次
requireCSS 文件的时候都要写 loader 前缀，是一件很繁琐的事情。我们可以根据模块类型（扩展名）来自动绑定需要的 loader。
将 entry.js 中的 require("!style!css!./style.css") 修改为 require("./style.css") ，然后执行：
$ webpack entry.js bundle.js --module-bind 'css=style!css'
# 有些环境下可能需要使用双引号
$ webpack entry.js bundle.js --module-bind "css=style!css"
显然，这两种使用 loader 的方式，效果是一样的。
（5）.配置文件：继续我们的案例，在根目录创建 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": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.21.0",
"style-loader": "^0.13.0",
"webpack": "^1.12.2"
}
}运行C:\mywebpack>cnpm 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!css'}
]
}
}
同时简化 entry.js 中的 style.css 加载方式：
require('./style.css')webpack 通过配置文件执行的结果和上一章节通过命令行 :
C:\mywebpack>webpack entry.js bundle.js --module-bind 'css=style!css' 执行的结果是一样的.
（6）.插件：
接下来，我们利用一个最简单的 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!css'}
]
},
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 = {};
// 后面代码省略（7）.开发环境：
当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色：
C:\mywebpack>webpack --progress --colors
如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编
译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。
C:\mywebpack>webpack --progress --colors --watch
使用 webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静
态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/
可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新
页面。
# 安装C:\mywebpack>cnpm install webpack-dev-server -g
# 运行C:\mywebpack>webpack-dev-server --progress --colors
四.注意事项：记得每次打包到bundle.js的时候需要清空bundle.js中的内容不然文件会被多次打包加入其中,显示内容会出错。
Webpack:前端资源模块化管理和打包工具的更多相关文章
- webpack模块化管理和打包工具
Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际 需要的 ...
- Webpack, 现在最流行的模块打包工具.压缩打包
压缩bundle.js 1.把我们项目的代码从es6 -> es5 [babel] 参考:http://babeljs.io/docs/setup/#installation 1.1.安装包 b ...
- Webpack打包工具学习使用
Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载.通过 ...
- webpack打包工具的初级使用方法
这里下载的是webpack的3.8.1版本(新版更新的使用有些问题) 什么是webpack? 他是一个前端资源加载或打包工具,. 资源: img css json等. 下载的话 用 npm webpa ...
- 打包工具webpack和热加载深入学习
本次小编呢,为大家带来一篇深入了解打包工具 webpack. 我们今天使用的是 webpack3.8.1版本的,我们学习使用 3.8.1更稳定些,并学习自己如何配置文件,最新版本不需要自己配置文件,但 ...
- 浅谈Webpack模块打包工具一
为什么要使用模块打包工具 1.模块化开发ES Modules存在兼容性问题 打包之后成产阶段编译为ES5 解决兼容性问题 2.模块文件过多 网络请求频繁 开发阶段把散的模块打包成一个模块 解决网络请 ...
- 好用的打包工具webpack
<什么是webpack> webpack是一个模块打包器,任何静态资源(js.css.图片等)都可以视作模块,然后模块之间也可以相互依赖,通过webpack对模块进行处理后,可以打包成我们 ...
- 模块化管理工具兼打包工具 webpack
webpack 是一个[模块化管理工具]兼[打包工具] 是一个工具(和seajs,requirejs管理前端模块的方式是不一样) 在webpack一个文件就是一个模块! seajs,requirejs ...
- 前端教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-资源汇总
内容精简 资源这么多,多看看多学习再总结肯定是好的.多读读就算看重了不算浪费时间,毕竟一千个读者就有一千个林黛玉,还有温故而知新,说不定多读一些内容,就发现惊喜了呢.不过,在此也精简一些内容,就1~2 ...
随机推荐
- .Net语言 APP开发平台——Smobiler学习日志：如何快速实现地图定位时的地点微调功能
Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 样式一 一.目标样式 我们要实现上图中的效果,需要如下的操作: 二.地点微调代码 VB: Dim ...
- [Asp.net 5] Options-配置文件（2）
很久之前写过一篇介绍Options的文章,2016年再打开发现很多变化.增加了新类,增加OptionMonitor相关的类.今天就对于这个现在所谓的新版本进行介绍. 老版本的传送门([Asp.net ...
- Navisworks API 简单二次开发 （自定义工具条）
在Navisworks软件运行的时候界面右侧有个工具条.比较方便.但是在二次开发的时候我不知道在Api那里调用.如果有网友知道请告诉我.谢谢. 我用就自己设置一个工具.界面比较丑!没有美工. 代码: ...
- GET command找不到
谷歌的: On running a cronjob with get command, I was getting the following error. /bin/sh: GET: command ...
- windows7命令帮助大全
有关某个命令的详细信息,请键入 HELP 命令名ASSOC 显示或修改文件扩展名关联.ATTRIB 显示或更改文件属性.BREAK 设置或清除扩展式 CTRL+C 检查.BCDEDIT 设置启动数据库 ...
- python之最强王者（7）——元组（tuple）
1.序列(sequence): 说明:在前面的字符串列表中其实我们已经用到了序列,之所以放到这篇来讲主要是为了承上启下,方便理解和记忆. python的数据访问模型:直接存取 ,序列 ,映射 对非容器 ...
- 同比 VS 环比
同比(YoY=year on year):与历史同时期比较,例如2014年7月份与2013年7月份相比,叫同比 环比(MoM=month on month):是本期统计数据与上期比较,例如2014年7 ...
- Css3新特性总结之边框与背景(二)
一.条纹背景 利用background为linear-gradient函数实现,linear-gradient取值如下: <angle>:角度,渐变的方向 to left right to ...
- 浅谈DrawerLayout(抽屉效果)
DrawerLayout是V4包下提供的一种左滑右滑抽屉布局效果. 实现效果如下: 因为是官方提供的,所以使用起来也相对的比较简单. DrawerLayout 提供 1.当界面弹出的时候,主要内容区会 ...
- linux的虚拟内存是4G，而每个进程都有自己独立的4G内存空间，怎么理解？
问: linux的虚拟内存是4G,而每个进程都有自己独立的4G内存空间,怎么理解? 每个进程所拥有的4G独立的虚拟内存空间是什么意思?linux系统的虚拟4G空间中,高位的1G是用于系统内核运行的,那 ...