（1） 安装webpack
在安装 Webpack 前，你本地环境需要支持 node.js。
由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。
使用 cnpm 安装 webpack：
cnpm install webpack –g
（2） 创建项目
1）创建一个app项目，命令：mkdir app
2）创建一个run00b1.js文件。代码如下：document.write("It works.");
3）添加index.html文件。加入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
4）运行打包命令：webpack runoob1.js bundle.js
5)创建第二个js文件 runoob2.js，添加代码：
module.exports = "It works from runoob2.js.";
6）更新runoob1.js文件
document.write(require("./runoob2.js"));
（3）安装loader模块，来加载css文件，命令：（全局安装需要参数 -g）
cnpm install css-loader style-loader
1） index.css文件
body{background：yellow}
2）
修改app/runoob1.js文件
require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));
3）
打包命令：
webpack runoob1.js bundle.js
（4）配置文件，为了便于管理创建webpack.config.js文件
module.exports =
{
entry: "./runoob1.js",
output: {path: __dirname, filename: "bundle.js"},
module: {loaders: [{test: /.css$/, loader:
"style-loader!css-loader"}]}
};
（5）插件安装，安装内置的 BannerPlugin 插件，用于在文件头部输出一些注释信息。
命令：cnpm install webpack --save-dev
修改webpack.config.js文件。
var webpack=require('webpack');
module.exports = {
entry: "./runoob1.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /.css$/, loader: "style-loader!css-loader"
}
]
},
plugins:[
new webpack.BannerPlugin('菜鸟教程 webpack 实例')
]
};
运行命令：webpack
（6）开发环境
1) 当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。
webpack --progress –colors
2) 如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。
webpack --progress --colors --watch
3) 如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。
webpack --progress --colors –watch
可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。
4)安装命令：
# 安装 cnpm install webpack-dev-server -g
# 运行 webpack-dev-server --progress --colors
- 还没有人评论，欢迎说说您的想法！
客服
