前端开发中，选择合适的打包工具，如gulp webpack，可以极大的提高开发效率。本文就讲讲webpack入门配置的方法。
以一个简单的react应用配置为例，前期的准备工作如下( <i>请确保已经安装node.js</i>):
- 新建一个文件夹my_example；
- 在当前文件夹下执行
npm init命令，填写package.json的信息(选默认的就可以了)，然后执行npm install --save-dev webpack； - 然后，在这个文件夹中新建一个webpack.config.js文件。
接下来，我们看一个最简单的webpack.config.js配置示例：
var webpack = require("webpack");
module.exports = {
entry: {
index:__dirname + "index.js" //打包入口
},
output: {
path: __dirname + "/dist", //输出文件路径
filename: "[name].bundle.js", //输出文件名
publicPath:"/dist/" //静态资源引用地址
},
module:{
loaders:[
//模块加载
{
test: /\.css$/, //正则匹配css文件
loader: 'style-loader!css-loader' //css加载器，下同
},
{
test:/\.js$/, //匹配js文件
exclude: /node_modules/, //排除node_modules文件夹里js文件
loader:'babel-loader', //js加载器
query:{
presets:['es2015','react'],
},
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: 'img/[name].[ext]'
}
}
]
},
};
我们可以看到，webpack做的事情，就是将资源模块话打包，由入口引入文件，在出口输出最终的文件。以上就是webpack最基本的配置方法。
下一章，将会讲解webpack的多入口，热加载，以及前后端分离开发时候的跨域代理设置。
