欢迎
这个小教程将指导您完成一个简单的例子。
您将学到：
- 如何安装webpack
- 如何使用webpack
- 如何使用loaders
- 如何使用开发服务器
安装WEBPACK
首先你必须安装node.js。
$ npm install webpack -g设置THE COMPILATION
首先得有一个空目录
创建以下文件：
新增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 ./entry.js bundle.js它将会编译你的文件，然后生成一个打包文件
如果成功，将会显示像下面的一些信息：
Version: webpack 1.12.11
Time: 51ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
chunk {0} bundle.js (main) 28 bytes [rendered]
[0] ./tutorials/getting-started/setup-compilation/entry.js 28 bytes {0} [built]用你的浏览器打开index.html，它应该会显示 It works.
第二个文件
接下来，我们在另一个文件中添加一些内容：
新增content.js
module.exports = "It works from content.js.";更新entry.js
- document.write("It works.");
+ document.write(require("./content.js"));然后，重新编译：
$ webpack ./entry.js bundle.js刷新浏览器，你应该会看到It works from content.js.
webpack会分析你的entry 文件中的依赖文件，这些依赖文件(成为模块)也已经包含在bundle.js文件中。webpack会给每一个文件一个唯一的id，然后都保存在bundle.js文件中，保证都能根据id访问到它们。只有entry模块在启动时才会被执行。一个小的runtime提供了require函数，当需要加载依赖时才会被执行。
第一个LOADER
我们想添加css文件到我们的应用程序。
webpack只能处理javascript。因此，我们需要css-loader来处理css文件。我们同样需要style-loader来在样式文件中使用样式。
运行 npm install css-loader style-loader来安装loaders（它们需要安装到本地，命令后面不能带 -g参数）。它将会创建一个node_modules目录，安装的loaders就存放在里面。
使用它们：
新增style.css
body {
background: yellow;
}更新entry.js
+ require("!style!css!./style.css");
document.write(require("./content.js"));重新编译，然后刷新浏览器，你应该会看到页面的背景颜色变为黄色了。
通过在模块请求中使用前缀Loaders，该模块将通过loader管道。这些loader通过具体的方式改造文件内容。经过这些变换改造后，其结果便是JavaScript模块。
绑定LOADERS
我们不想使用像这样太长的require语句require("!style!css!./style.css");
我们能绑定文件扩展到loaders中，因此我们只需要写require("./style.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'一些环节可能要求双引号: –module-bind “css=style!css”
刷新浏览器，你应该会得到同样的结果。
一个配置文件
我们想把一些配置项放入config文件中：
新增webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};这样，只需要运行：
webpackwebpack会自动在当前目录查找webpack.config.js文件，并加载执行。
一个漂亮的输出
如果项目的编译需要很长的时间。因此，我们可能想要显示某种进度条和颜色。
我们可以通过以下命令达到：
webpack --progress --colors观察模式
我们开始时都不想在有改变时，都需要手动去重新编译项目，这时我们可以：
webpack --progress --colors --watchWebPACK可以缓存编译之间不变模块和输出文件。
当使用观察模式是，WebPack会安装观察文件到所有文件中，它们在编译过程中会使用。如果检测到任何变化，它会再次编译。当允许高速缓存，WebPack会把每个模块保存在内存中，如果下次它们没有被改变，将会重复使用它们。
开发服务器
利用webpack开发服务器会更加方便：
npm install webpack-dev-server -g
webpack-dev-server --progress --colors它将会在本地的8080端口启动一个express服务器，用来监听静态资源（即被自动编译打包后的文件）。当打包文件被重新编译(SockJs)后，会自动刷新浏览器。在你的浏览器中打开http://localhost:8080/webpack-dev-server/bundle
开发服务器使用webpack的观察者模式，它能防止webpack把结果文件分发到磁盘上。相反，它只会把结果文件存放在内存中，并都从内存中读取。
扫一扫
281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
