上一节我们整体认识了下webpack
做了一些简单的实现,这一节我们再进一步认识下
我们找一个具体的实例来看一下webpack在项目中是如何使用的。
我在github上找了一些实际项目中的config文件,连带注释贴在下面

const webpack = require('webpack');//使用webpack插件需要引用
const path = require('path');//用于处理目录的对象
const HtmlWebpackPlugin = require('html-webpack-plugin');//这个插件用来简化创建服务于 webpack bundle 的 HTML 文件
const OpenBrowserPlugin = require('open-browser-webpack-plugin');//配置OpenBrowserPlugin插件可以在构建完成之后自动打开浏览器的"localhost:8080"这个路径

module.exports = {
  entry: {
    js: './entry.js', //入口文件,也可以是数组['./entry.js','./entry1.js']
    vendor: [ //将入口文件分为两部分,此处配置第三方支持类库
      'react', 'classnames', 'react-router', 'react-dom',
    ],
  },
  output: {
    path: path.join(__dirname,'dist'), //出口文件目录
    publicPath: "/webpack/dist/", //公共目录
    filename: "js/[name].js", //出口文件名
    chunkFilename: "js/[id].chunk.js" //除了非入口文件外,其他文件的目录,在按需加载模块时用到
  },
  resolve: {
    extensions: ['', '.js', '.json'], //控制webpack应该解析什么文件
    alias: { //将绝对路径定义别名
      components: __dirname + '/app/components',
      actions: __dirname + '/app/actions',
      api: __dirname + '/app/api',
      reducers: __dirname + '/app/reducers',
      utils: __dirname + '/app/utils',
      constants: __dirname + '/app/constants',
      controllers: __dirname + '/app/controllers',
    },
  },
  module: {
    loaders: [ //各种类型文件的加载器
    {
      test: /\.js[x]?$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel',
    }, {
      test: /\.less$/,
      loader: 'style!css!postcss!less',
    }, {
      test: /\.css/,
      loader: 'style!css',
    }, {
      test: /\.(png|jpg)$/,
      loader: 'url-loader?limit=8192',
    },{
      test : /\.html$/,
      loader : 'file?name=[name].html'
    }
    ],
  },
  plugins: [ //配置插件
    new webpack.ProvidePlugin({ //加载jq
      $: 'jquery'
    }),
    new ExtractTextPlugin("css/[name].css"), //单独使用style标签加载css并设置其路径
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("production")
      }
    }),
    new webpack.optimize.UglifyJsPlugin({ //压缩代码
      compress: {
        warnings: false
      },
      minimize:true,
      except: ['$super', '$', 'exports', 'require'] //排除关键字
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
    new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
      favicon:'./src/img/favicon.ico', //favicon路径
      filename:'/view/index.html', //生成的html存放路径,相对于 path
      template:'./src/view/index.html', //html模板路径
      inject:true, //允许插件修改哪些内容,包括head与body
      hash:true, //为静态资源生成hash值
      minify:{ //压缩HTML文件
        removeComments:true, //移除HTML中的注释
        collapseWhitespace:true //删除空白符与换行符
      }
    }),
    new OpenBrowserPlugin({
      url: 'http://localhost:3000'
    }),
  ],
  devtool: 'source-map',
  devServer: {
    contentBase: './app/',
    historyApiFallback: true,
    hot: true,
    inline: true
    proxy: {
      '/api/*': { //将所有/api/*的请求都代理到http://localhost:5000
      target: 'http://localhost:5000',
      secure: false
    }
  }
}