开始
安装 WEBPACK
$ npm install webpack -g
这样可以使
webpack命令可用.
配置编译
在空目录中创建这些文件:
添加 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.2
Time: 43ms
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 will analyze your entry file for dependencies to other files. These files (called modules) are included in your bundle.js too. webpack will give each module a unique id and save all modules accessible by id in the bundle.js file. Only the entry module is executed on startup. A small runtime provides the require function and executes the dependencies when required.
第一个加载器
我们想添加一个css文件到我们的应用中.
webpack 只能操作 JavaScript 文件, 所以我们需要 css-loader 来处理CSS文件. 我们同时需要 style-loader 在CSS文件里来应用样式.
运行安装加载器(他们需要安装到本地, 没有 -g):
npm install css-loader style-loader
添加 style.css
body {
background: yellow;
}
更新 entry.js
+ require("!style!css!./style.css");
document.write(require("./content.js"));
重新编译并更新你的浏览器来查看你的应用，已经是黄色背景了.
It works from content.js.
By prefixing loaders to a module request, the module went through a loader pipeline. These loaders transform the file content in specific ways. After these transformations are applied, the result is a JavaScript module.
绑定加载器
我们不想写如此长的需求 require("!style!css!./style.css");.
我们可以绑定文件扩展到加载器这样只需要写:
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"
你应该看到一样的结果:
It works from content.js.
配置文件
添加配置选项到配置文件:
添加 webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
我们只需要运行:
webpack
编译后结果:
Version: webpack 1.12.2
Time: 354ms
Asset Size Chunks Chunk Names
bundle.js 10.7 kB 0 [emitted] main
chunk {0} bundle.js (main) 8.86 kB [rendered]
[0] ./tutorials/getting-started/config-file/entry.js 65 bytes {0} [built]
[1] ./tutorials/getting-started/config-file/style.css 943 bytes {0} [built]
[2] ../~/css-loader!./tutorials/getting-started/config-file/style.css 201 bytes {0} [built]
[3] ../~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[4] ../~/style-loader/addStyles.js 6.09 kB {0} [built]
[5] ./tutorials/getting-started/config-file/content.js 45 bytes {0} [built]
webpack 命令将试着加载当前文件夹webpack.config.js.
一个更漂亮的输出
如果项目增长，编译时间将非常长.所以我们想展示进度条，还想要颜色，我们可以通过加参数获得:
webpack --progress --colors
监控模式
我们不想每次修改后都手动重新编译...
webpack --progress --colors --watch
Webpack在编译中可以缓存未修改组件并输出文件.
当使用监控模式, webpack安装文件将监控所有编译时候使用的文件. 如果检测任何修改, 它将重新运行编译. 当缓存打开,webpack将保持每个模块在内存中，如果它没有修改重新使用它.
开发服务器
开发服务器更好.
npm install webpack-dev-server -g
webpack-dev-server --progress --colors
绑定一个小express服务器到localhost:8080上,服务于你的捆绑好的静态文件(自动编译).它将自动更新你的浏览器页当一束被重新便以后.(socket.io). 在你的浏览器里打开 http://localhost:8080/webpack-dev-server/bundle.
开发服务器使用webpack的监控模式. 它同时提供webpack从发射产生的文件到磁盘. 相反,它不断服务从内存生成的文件。