写在前面
- 本文适合初学者。
- 本文翻译了webpack官网上的文章，如有错误请指正
开始
- 这个简单的教程将会通过一个小例子引导你，你将会学习：
- 如何安装webpack
- 如何使用webpack
- 如何使用loaders
- 如何使用开发服务器
安装webpack
-
你需要确定node.js已经安装
npm install webpack -g
这是你的webpack指令激活
开始编码
- 新建一个空文件夹
- 新建一个entry.js文件
-
把下面的代码写入entry.js
document.write("It works."); -
新建一个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 - 你将编译你的文件然后新建了一个bundle.js
-
如果成功你将会看到这个
在浏览器打开html文件，你将会看见
It works
第二个文件
- 下来我们将移动一些代码到额外的文件
- 新建content.js文件
module.exports = "It works from content.js.";-
更新entry.js文件
document.write(require("./content.js")); - 再次编译
webpack ./entry.js bundle.js- 刷新浏览器你将会看到
It works from content.js - webpack将会解析你的入口文件和依赖的其他文件。这些文件（被称为模块）都被包含在你的bundle.js文件中，webpack将会给每一个模块一个唯一的id然后通过id保存所有的模块到bundle.js文件中，只用入口模块被允许开始，当被调用时，一个小的运行提供所需要的函数和执行时的依赖。
第一个loader
- 我们想添加css文件到我们的应用中
- webpack只能捆绑js，所以我们需要css-loader去处理css文件，我们同样需要style-loader在css文件中应用样式。
- 执行
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
我们不想写这么长的
requiresrequire("!style!css!./style.css");.我们可以捆绑文件延伸到loaders，这样我们就需要写require("./style.css")更新entry.js文件
require("./style.css");
document.write(require("./content.js"));-
运行编译
webpack ./entry.js bundle.js –module-bind ‘css=style!css’
-
一些环境需要引用两句
–module-bind “css=style!css”
编译文件后你将看到相同的结果
-
配置文件
- 我们想把些配置选择移到配置文件中
-
添加webpack.config.js文件
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
}; - 现在只需要运行weboack就会编译