去年写过一篇webpack协助React js工作的简单例子。但是webpack的功能非常强大,并不是专门服务于React js的。之前对webpack理解很模糊,只能简单使用。最近参考其他一些文档教程,重新学习了解了一下webpack的功效。
Webpack简介
Webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其他的一些浏览器不能直接运行的扩展语言(Scss,TypeScript, React js等),并将其打包为合适的格式以供浏览器使用。
在webpack中,一切资源都被看做是模块,如js,css,图片,json等等等等。在webpack项目中,js模块可以引进这些模块来使用。
官方图:
Webpack的使用
1,安装
webpack安装的前提是包含NodeJS环境。下面假设机器上已经安装了node环境。
在任何一个自己喜欢的路径下创建新的空文件夹,作为webpack的练习文件夹,终端进入该文件夹后执行下面命令安装webpack
//全局安装 npm install webpack //安装到项目目录 npm install --save-dev webpack
2,创建目录结构
终端执行下面命令创建package.json文件,里面包含项目依赖的模块,自定义的脚本任务等等。执行命令时将会提示填写一些项目信息,如实填写或者一直回车跳过就可以。
npm init
举一个最简单的webpack打包例子
在该文件夹下直接创建三个文件,分别为main.js,test.js,main.html
其中test.js的代码如下,创建一个div,设置文字为Hello, Webpack,并用module.exports导出。
var test = document.createElement('div'); test.textContent = 'Hello, Webpack'; module.exports = test;
main.js代码如下,将test.js中导出的div导入,然后将它放到id为content的元素中。
var test = require('./test.js'); document.getElementById('content').appendChild(test);
之后在终端执行命令,将main.js作为入口文件,webpack将自动识别main.js所依赖的其他文件。然后再指定一个出口文件bundle.js
webpack main.js bundle.js
命令执行完之后,发现文件目录多出了一个bundle.js,将bundle.js引入main.html中,main.html代码如下,包含一个id为content的div。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="content"></div> </body> <script src="bundle.js"></script> </html>
打开main.html,将会看到:
这就是webpack使用的一个最最简单的例子。
3,Webpack的配置
每次在终端都要设置出口文件和入口文件非常麻烦。我们可以使用webpack的配置文件来设置打包的出口和入口。因为上面的例子所有文件都在根目录下,太过简单,所以删掉目录下处package.json以外的文件,重新创建一个例子。
创建后的目录如下,app目录下存放入口文件,public目录存放唯一的html文件
之后在目录下创建名为webpack.config.js的文件。webpack.config.js这个文件名是webpack默认的配置文件名,如果不想使用这个文件名,可以在终端执行
webpack -config [name]
打开webpack.config.js文件,填入信息
module.exports = { entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" } };
entry代表唯一的入口文件,output设置出口文件,path代表出口文件路径,filename代表出口文件名字。
在终端执行命令,相当于之前执行的webpack [入口] [出口],只不过这样更加简单,不易出错。
webpack
终端结果:
4,Loaders
webpack项目中,一切皆模块,而实现这个功能的关键,就是Loaders。
通过不同的Loader,webpack可以通过调用外部的脚本或工具对各种各样格式的文件进行处理。
比如:将json转化为js,将React转化为js。
各种Loader都需要单独安装,并且需要在配置文件中进行配置。
下面是几个Loader实例
1,JSON文件
(1)安装转换json的loader
npm install --save-dev json-loader
(2)配置webpack.config.js
module.exports = { entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" }, module: { loaders:[ { test: /\.json$/, loader: "json" } ] } };
其中loader的几个参数说明:
test:一个匹配loaders所处理的文件的扩展名的正则表达式(必须)
loader:loader的名称(必须)
include/exclude:手动添加必须处理的文件(文件夹) 或 不需要处理的文件(文件夹) (可选)
query:为loaders提供额外的设置选项(可选)
(3)在app目录下创建json_test.js,引入根目录的package.json
var config = require('../package.json'); console.log(config); module.exports = function () { var test = document.createElement('div'); test.textContent = JSON.stringify(config); return test; };
(4)和之前一样,在mian.js中引入引入json_test.js中的函数,并append到id为content的元素中。
(5)编辑index.html,创建id为content的div,在终端执行webpack,生成bundle.js,并引入到index.html中。
(6)打开index.html,结果如下:
2,CSS文件
(1)安装css-loader和style-loader
npm install --save-dev style-loader css-loadercss-loader使你能够使用类似@import和url(...)的方法实现require()的功能,style-loader将所有计算后的样式加入页面中。 (2)配置文件
module.exports = { entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" }, module: { loaders:[ { test: /\.json$/, loader: "json" }, { test: /\.css$/, loader: 'style!css' } ] } };(3)在app目录下创建一个main.css,并写入一些样式
div { color: red; }
(4)将css文件引入main.js,main.js文件代码如下:
require('./main.css'); var test = require('./json_test.js'); document.getElementById('content').appendChild(test());
(5)终端执行webpack命令,再次打开index.html,结果内容变成红色,css文件生效。
3,ReactJS
之前的博客:http://2914905399.iteye.com/blog/2314533
5,Webpack构建本地服务器
每次修改项目文件,都要在终端执行一遍webpack,非常麻烦。webpack构建本地服务器,可以使浏览器检测代码的修改,并且自动刷新修改后的结果。使用步骤:
(1)安装依赖
npm install --save-dev webpack-dev-server
(2)配置webpack.config.js文件
module.exports = { entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" }, module: { loaders:[ { test: /\.json$/, loader: "json" }, { test: /\.css$/, loader: 'style!css' } ] }, devServer: { contentBase: './public', //本地服务器所加载的页面所在的目录 colors: true, //终端输出结果为彩色 historyApiFallback: true, //不跳转 inline: true, //实时刷新, port: 8000 //端口为8000 默认为8080 } };
(3)如果全局已经安装了webpack-dev-server,终端直接执行webpack-dev-server
如果没有安装,终端执行项目目录下安装的webpack-dev-server
执行结果为:
(4)浏览器访问http://localhost:8000/,与之前直接打开index.html效果相同。更改main.js中的 test.textContent = JSON.stringify(config); 改为:
test.textContent = "Hello, Webpack";
将main.css中的color:red改为color:blue。会发现8000页面自动刷新,刷新后效果如下:
参考地址:http://www.jianshu.com/p/42e11515c10f
英文原版地址:http://www.pro-react.com/materials/appendixA/