在webpack看来，所有的资源文件都是模块，只是处理的方式不同。
webpack解决的需求点是：如何更好地加载前端模块。
一、首先以一个最简单的实例体验一下最简单的webpack打包文件：
1、安装node.js
访问http://nodejs.org/dist/v7.8.0/win-x64/node.exe下载node.exe到目录D:/nodejs文件夹下。
2、安装npm
访问http://nodejs.org/dist/npm/npm-1.4.9.zip下载npm，并解压到D:/nodejs文件夹下。
3、创建package.json文件
使用npm init命令可以自动创建package.json文件。
这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等。
输入这个命令后，终端会问一系列诸如项目名称，项目描述，作者等信息，如果不准备在npm中发布模块，这些问题的答案都不重要，回车默认即可。
4、安装webpack
使用npm install --save -dev webpack命令在本项目中安装webpack作为依赖包或使用npm install -g webpack命令全局安装webpack作为依赖包。
5、文件创建
在项目文件夹webpack中创建两个文件夹——app文件夹和public文件夹，app文件夹用来存放原始数据和将写的JavaScript模块（包括两个js文件Greeter.js和main.js，public文件夹用来存放准备给浏览器读取的数据（包括使用webpack生成的打包后的js文件及一个index.html文件）。
Greeter.js：
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};main.js：
var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());index.html：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id='root'></div>
<script src="bundle.js"></script>
</body>
</html>
6、使用webpack
只需要指定一个入口文件，webpack将自动识别项目所依赖的其它文件，不过需要注意的是如果webpack没有进行全局安装，那么在终端中使用此命令时，需要额外指定其在node_modules中的地址。
若webpack全局安装，使用webpack app/main.js public/bundle.js命令即可。
若webpack非全局安装，需使用node_modules\.bin\webpack app/main.js public/bundle.js命令。
注意：node_modules\.bin\webpack的路径需用右斜杠形式，用左斜杠形式会报错。
7、结果查看
webpack同时编译了main.js 和Greeter,js。
访问file:///D:/nodejs/public/index.html，可得输出：
Hi there and greetings!
二、通过配置文件来使用webpack
webpack拥有很多其它比较高级的功能，如loaders和plugins，这些功能其实都可以通过命令行模式实现，但这样不太方便且容易出错，一个更好的办法是定义一个配置文件，这个配置文件其实也是一个简单的JavaScript模块，可以把所有的与构建相关的信息放在里面。
以上面例子为例，在当根目录下新建一个名为webpack.config.js的文件，并进行配置，它包含入口文件路径和存放打包后文件的地方的路径。
module.exports = {
entry: __dirname + "/app/main.js", // 唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}注：__dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
若webpack全局安装，使用webpack命令即可。
若webpack非全局安装，需使用node_modules\.bin\webpack命令。
这条命令会自动参考webpack.config.js文件中的配置选项打包项目，按照上面提到的结果查看方法即可查看结果。
三、更快捷的执行打包任务
执行类似于node_modules\.bin\webpack这样的命令其实是容易出错的，npm可以引导任务执行，对其进行配置后可以使用简单的npm start命令来代替这些繁琐的命令。在package.json中对npm的脚本部分进行相关设置即可：
默认的test直接删除，设置：
"scripts": {
"start": "webpack"
}注意：添加注释//或者/**/在JSON文件中是不允许的，若用js的方式添加注释会报错。
package.json中的脚本部分已经默认在命令前添加了node_modules\.bin路径，所以无论是全局还是局部安装的webpack，都不需要在前面指明详细的路径了。
无论是全局安装还是非全局安装，都只需要使用npm start命令，按照上面提到的结果查看方法即可查看结果。
四、生成Source Maps（调试更容易）
打包后的文件往往不容易找到出错的源代码的位置，Source Maps可以解决这个问题。
通过简单的配置后，webpack在打包时可以生成source maps，提供一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试。
在webpack的配置文件中配置source maps，需要配置devtool，它有以下四种不同的配置选项，各具优缺点，描述如下：
| devtool选项 | 配置结果 |
| source-map | 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包文件的构建速度。 |
| cheap-module-source-map | 在一个单独的文件中生成一个不带列映射的map，不带列映射提高项目构建速度，但也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便。 |
| eval-source-map | 使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项。 |
| cheap-module-eval-source-map | 这是在打包文件时最快的生成source map的方法，生成的Source map会和打包后的JS文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点。 |
上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的构建速度的后果就是对打包后的文件的的执行有一定影响。
在学习阶段以及在小到中性的项目上，eval-source-map是一个很好的选项，不过记得只在开发阶段使用它；cheap-module-eval-source-map方法构建速度更快，但是不利于调试，推荐在大型项目考虑da时间成本是使用。
以上述例子为例，继续配置webpack.config.js文件：
module.exports = {
devtool: 'eval-source-map', // 配置生成Source Maps，选择合适的选项
entry: __dirname + "/app/main.js", // 已多次提及的唯一入口文件
output: {
path: __dirname + "/public", // 打包后的文件存放的地方
filename: "bundle.js" // 打包后输出文件的文件名
}
}
五、使用webpack构建本地服务器
webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现浏览器监测代码的修改，并自动刷新修改后的结果，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖，安装命令为npm install --save-dev webpack-dev-server。
devserver作为webpack配置选项中的一项，具有以下配置选项：
| devserver配置选项 | 功能描述 |
| contentBase | 默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录 |
| port | 设置默认监听端口，如果省略，默认为8080 |
| inline | 设置为true，当源文件改变时会自动刷新页面 |
| colors | 设置为true，使终端输出的文件为彩色的 |
| historyApiFallback | 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html |
以上述例子为例，继续配置webpack.config.js文件：
module.exports = {
devtool: 'eval-source-map', // 配置生成Source Maps，选择合适的选项
entry: __dirname + "/app/main.js", // 已多次提及的唯一入口文件
output: {
path: __dirname + "/public", // 打包后的文件存放的地方
filename: "bundle.js" // 打包后输出文件的文件名
},
devServer: {
contentBase: "./public", // 本地服务器所加载的页面所在的目录
colors: true, // 终端中输出结果为彩色
historyApiFallback: true, // 不跳转
inline: true // 实时刷新
}
}webpack有两个重要的功能：Loaders和Plugins。
有关Loaders的介绍请见：http://blog.csdn.net/zhouziyu2011/article/details/69053556。
有关Plugins的介绍请见：http://blog.csdn.net/zhouziyu2011/article/details/69053647。
147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
