这是一个非常简单的例子，通过这个例子你将学习到
1、How to install webpack
2、How to use webpack
3、How to use loaders
4、How to use the development server
使用node安装
$ npm install webpack -g
创建一个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
它将会编译文件并创建一个bundle.js文件
接下来我们创建第二个文件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
第一个loader
webpack只能处理JavaScript本身，所以我们需要css-loader来处理css
npm install css-loader style-loader
执行完之后会创建一个node_modules 文件
然后我们创建一个style.css
body {
background: yellow;
}
更新entry.js
+ require("!style!css!./style.css");
document.write(require("./content.js"));
然后编译，刷新浏览器，看背景颜色是否为yellow
一个配置文件webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
这时候只要运行
webpack
如果项目编译时，可能需要一段时间，这时候可以显示进度条和颜色
webpack --progress --colors
我们不想每次修改后手动编译
webpack --progress --colors --watch
开发服务器
npm install webpack-dev-server -g
然后运行
webpack-dev-server --progress --colors
访问 http://localhost:8080/