webpack配置【入门篇】

前端开发中，选择合适的打包工具，如gulp webpack，可以极大的提高开发效率。本文就讲讲webpack入门配置的方法。
以一个简单的react应用配置为例，前期的准备工作如下( 请确保已经安装node.js):

• 新建一个文件夹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的多入口，热加载，以及前后端分离开发时候的跨域代理设置。