为什么要用Webpack？
今天简单介绍一下Webpack，Webpack功能强大，简单易学！类似技术我博客中之前介绍过模块化的requirejs，及打包工具grunt。相比前面介绍过的那两种，WebPack是一种模块化的解决方案，利用WebPack可以找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。下面我就对webpack做一个简单的小结。
安装
用 npm 安装 Webpack：
$ npm install webpack -g此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 试试。
在使用之前，我们也可以用
npm init把package.json文件准备就绪。通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。可以Webpack 保存到package.json文件中去，这点安装其他插件都是一样的！
$ npm install webpack --save-dev入门级使用
首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js：
<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
// entry.js
document.write('haorooms webpack demo works.')运行如下命令就可以把entry.js编译成bundle.js，文件目录中多了一个bundle.js！
$ webpack entry.js bundle.js当我们预览 index.html 的时候，就会看到haorooms webpack demo works. 是不是很简单，恭喜你，已经用webpack 制作了一个最简单的案例了！下面我们继续！
Loader
上面的案例是最基本的。假如我们有图片，有css，有多个模块的js，希望都进行编译打包，怎么办呢？假如我们使用了react 及jsx，那么如何使用webpack呢？
这里就需要使用 loader 进行转换。
安装Loader
npm install css-loader style-loader下面我们新建一个style.css
/* style.css */
body { background: yellow; }然后我们新建一个module模块
// module.js
module.exports = 'It works from module.js.'修改之前的 entry.js：
require("!style!css!./style.css") // 载入 style.css
document.write('haorooms webpack demo works.')
document.write(require('./module.js'))然后我们再运行
$ webpack entry.js bundle.js刷新就可以看到黄色背景，及引入的模块module了！
假如我们entry.js如下写：
require("./style.css") // 载入 style.css
document.write('haorooms webpack demo works.')
document.write(require('./module.js'))那么我们运行命令如下，也可以达到相同的效果！
$ webpack entry.js bundle.js --module-bind 'css=style!css'对图片处理类似，我们要安装url-loader
总之，一般安装规律如下：
$ npm install xxx-loader --save
or
$ npm install xxx-loader --save-dev假如我们有多个js，css,以及图片等等，按照上面的操作会很繁琐！接下来我们用到了webpack的配置文件！
配置文件
webpack默认情况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 --config 选项来指定配置文件。
我们在根目录下面创建一个配置文件：
webpack.config.js记得，npm安装webpack到当前目录！然后修改 webpack.config.js
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style!css'}
]
}
}这样，我们直接执行打包工具命令就可以了
webpack解析react 的es6语法及jsx文件
这需要我们安装babel-loader 模块！
npm install babel-loader babel-core babel-preset-es2015 webpack --save-dev我们创建react入口文件
// main.jsx
const React = require('react');
const ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.querySelector('#wrapper')
);index.html如下：
<html>
<body>
<div id="wrapper"></div>
<script src="bundle.js"></script>
</body>
</html>webpack.config.js如下：
module.exports = {
entry: './main.jsx',
output: {
filename: 'bundle.js'
},
module: {
loaders:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react',
},
]
}
};插件
webpack还提供了很多插件，插件可以完成更多 loader 不能完成的功能。一般是在 webpack 的配置信息 plugins 选项中指定。Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。
下面我利用BannerPlugin ，一个最简单的插件，来给文件头部添加注释信息。
我们还是运用之前的webpack.config.js
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style!css'}
]
},
plugins: [
new webpack.BannerPlugin('This file is created by haorooms')
]
}然后运行 webpack，打开 bundle.js，可以看到文件头部出现了我们指定的注释信息：
/*! This file is created by haorooms*/
/******/ (function(modules) { // webpackBootstrap
// 后面代码省略webpack-dev-server 开启服务
webpack还可以开启本地服务！
首先我们安装webpack-dev-server
# 安装
$ npm install webpack-dev-server -g然后运行如下命令：
webpack-dev-server就可以通过127.0.0.1:8080 或者localhost:8080 访问我们刚刚新建的页面了！
假如我们想监听修改，我们可以通过如下命令：
# 运行
$ webpack-dev-server --progress --colors --watch小结
看到这里，假如你是一步一步跟着我的博客来操作的，那么恭喜你，你的webpack已经入门了！关于webpack更加深入的知识，我后面用到了再总结！希望这个webpack前端技术小结对您有所帮助！