一步步了解webpack
发布于 2015-12-15 11:26:30 | 207 次阅读 | 评论: 0 | 来源: PHPERZ
Webpack 模块绑定器
webpack 是一个模块绑定器，主要目的是在浏览器上绑定 JavaScript 文件。
前言
demo 地址: https://github.com/yy8597/webpack-demos
之前学习了 broswerify，发现确实很好用。虽然没有 grunt 那样丰富的配置和插件，但就是觉得“恩！这就是我想要的结构”。
webpack 感觉就是 broswerify 的进阶版，怎么说呢：
-
有更多可配置内容
-
比起 broswerify 一股脑得打成单包更智能。
安装
npm install webpack -g
-g 方便我们在命令行直接使用 webpack
使用
基本命令 demo1
首先建立两个文件
//entry.js
document.write("It works.");
//index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
执行 webpack
$ webpack ./entry.js bundle.js
生成 bundle.js，然后打开 index.html 就可以看到
<div style="border:5px solid #333;padding:10px;background:yellow;margin:20px 0">It works.</div>
添加依赖 demo2
增加一个文件
//content.js
module.exports = "It works from content.js.";
我们修改 entry.js 加载 content.js 的内容
//document.write("It works.");
document.write(require("./content.js"));
同样执行
$ webpack ./entry.js bundle.js
在浏览器中看到
<div style="border:5px solid #333;padding:10px;background:yellow;margin:20px 0">It works from content.js.</div>
done~
webpack 分析你的入口文件(entry.js)所依赖的其他文件（模块），这些文件都会被打包到 bundle.js中。webpack 会分配给每个模块一个唯一的 Id，在 bundle.js 中通过这个 Id 来访问每个模块。在程序启动的时候只会处理入口模块（entry.js）, require 方法会在执行时即时地处理依赖模块。
打包 css demo3
webpack 只能处理 javascript，要处理 css 就需要安装css-load来转换 css 为 js，还要安装style-loader 将转换后的 css 加载到 dom 中。
$npm install css-loader style-loader --save
接着增加 css 文件
body {
background: yellow;
}
修改 entry.js，然后就能看到效果
require("!style!css!./style.css");
document.write(require("./content.js"));
同样执行
$ webpack ./entry.js bundle.js
<div style="border:5px solid #333;padding:10px;background:yellow;margin:20px 0">It works from content.js.</div>
通过 “!style!css!” 这样的前缀，可以把文件进行一系列的转化，最终变成 javascript 的一个模块。
命令行绑定 loaders
如果我们不想写过长的 require : require("!style!css!./style.css");，简化为require("./style.css")
或者我们喜欢灵活定制 css 文件的转化方式。
修改 entry.js
//require("!style!css!./style.css");
require("./style.css");
document.write(require("./content.js"));
执行下面的命令：
$ webpack ./entry.js bundle.js --module-bind "css=style\!css"
官网说明在这有个错误，
css=style\!css里面少了个反斜杠，原因是叹号在 bash 里有特殊意义
<div style="border:5px solid #333;padding:10px;background:yellow;margin:20px 0">It works from content.js.</div>
添加 webpack.config.js demo4
理解了上面的 demo 以后，接下来我们就可以在项目根目录下新建一个webpack.config.js ，然后通过一句命令$ webpack就能打包我们的项目。
//webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
webpack 命令会尝试读取同目录中的 webpack.config.js 文件。
And More
还可以通过一些参数使得打包过程可视化
$ webpack --progress --colors
--progress 打印打包日志
--colors -c 带颜色的日志（官方是这么描述的，但我没看到颜色...）
当然还有 watch 功能
$ webpack --progress --colors --watch
必须的要有 server
$ npm install webpack-dev-server -g
$ webpack-dev-server --progress --colors
~ 完 ~
这里只是介绍了 webpack 基本的用法
demo 基本都是翻译自webpack/getting-started
更多详细和进阶的内容还是推荐去官网看看