1.电脑全局安全
npm install webpack -g
2.webpack 如何工作
1.创建一个空的文件夹 temp
2.add entry.js , 写一点代码
document.write("It works.");
3.add index.html , 如下：
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
接下来运行一下webpack
webpack ./entry.js bundle.js
4.新add一个content.js文件，如下
module.exports = 'test';
5.更新下entry.js，如下
- document.write("It works.");
+ document.write(require("./content.js"));
6.加载css
add style.css
加载css,需要安装一些插件
运行：npm install css-loader style-loader
update entry.js
+ require("!style!css!./style.css");
document.write(require("./content.js"));
7.如上可以把style.css加进来，但不想在entry.js里写的太多，只想用:require('./style.css');加载
更新entry.js
- require("!style!css!./style.css");
+ require("./style.css");
document.write(require("./content.js"));
运行：webpack ./entry.js build.js --module-bind 'css=style!css'
即可
8.从配置文件
add webpack.config.js 如下：
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
运行：webpack
即可生成
8.如果文件很多，要编译很多时间，我们想看到进度与不同的颜色，如下：
webpack --progress --colors
9.如果我们不想手动的去编译，如下：
webpack --progress --colors --watch
10.开发服务器,如果需要使用 Webpack 开发工具，要单独安装：
npm install webpack-dev-server -g
安装好后,运行如下：
webpack-dev-server --progress --colors
即可创建一个本地的临时服务器，默认为：http://localhost:8080/webpack-dev-server
11.故障处理
webpack的配置比较复杂 ，如果出现了错误 ，可以能过参数 --display-error-details 来打印错误详情,如下：
webpack --display-error-details
webpack的使用通常有三种方式：
1、命令行使用：webpack 其中entry.js是入口文件，result.js是打包后的输出文件
2、node.js API使用：
var webpack = require('webpack');
webpack({
//configuration
}, function(err, stats){});
3、默认使用当前目录的webpack.config.js作为配置文件。如果要指定另外的配置文件，可以执行：webpack --config webpack.custom.config.js
webpack 的执行也很简单，直接执行
$ webpack --display-error-details
即可，后面的参数“--display-error-details”是推荐加上的，方便出错时能查阅更详尽的信息（比如 webpack 寻找模块的过程），从而更好定位到问题。
常用命令
webpack的使用和browserify有些类似，下面列举几个常用命令：
webpack 最基本的启动webpack命令
webpack -w 提供watch方法，实时进行打包更新
webpack -p 对打包后的文件进行压缩
webpack -d 提供SourceMaps，方便调试
webpack --colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤
webpack --profile 输出性能数据，可以看到每一步的耗时
webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块
前面的四个命令比较基础，使用频率会比较大，后面的命令主要是用来定位打包时间较长的原因，方便改进配置文件，提高打包效率。
</pre>
</div>
</div>
</div>