项目中webpack代码详解

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");

module.exports = {
  entry: {
    vendor: ["react", "react-dom", "./node_modules/bootstrap/dist/css/bootstrap.css"],
    index: ["./public/js/main.js", "./public/style/index.css"]
  },

  output: {
    path: require('path').resolve("./public/dist"),
    filename: "[name].js"
  },

  resolve: {
    extensions: ['', '.js', '.jsx']
  },

  module: {

    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      },
      {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
        //
      {test:/\.(png|jpg)$/,
        loader:'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
      },

    ]
  },
  devtool: "#cheap-source-map",
  plugins: [
    new ExtractTextPlugin("[name].css"),
    new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js")
  ]
};

上面是second-sale项目中webpack.config.js中的代码，以下是分行进行解释：

var ExtractTextPlugin = require("extract-text-webpack-plugin");

导入ExtractTextPlugin在32行用到。

var webpack = require("webpack");

导入webpack,

module.exports = {

module 的作用是添加loaders,

entry: {
    vendor: ["react", "react-dom", "./node_modules/bootstrap/dist/css/bootstrap.css"],
    index: ["./public/js/main.js", "./public/style/index.css"]
  },

entry页面入口文件配置，每个页面一个入口文件，文件中可以通过require引入其他模块，而这些模块webpack会自动跟入口文件合并为一个文件。通过getEntry获取入口文件。

 output: {
    path: require('path').resolve("./public/dist"),
    filename: "[name].js"
  },

output 是对应输出项配置，即入口文件最终要生成什么名字的文件、存放到哪里。

loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      },
      {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
        //
      {test:/\.(png|jpg)$/,
        loader:'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
      },

    ]

loaders加载器，告知 webpack 每一种文件都需要使用什么加载器来处理。

devtool: "#cheap-source-map",

生成sourcemap,便于开发调试，可以快速定位到未压缩的源代码。

plugins: [
    new ExtractTextPlugin("[name].css"),
    new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js")
  ]

plugins 是插件项，这里我们使用了一个 CommonsChunkPlugin 的插件，它用于提取多个入口文件的公共脚本部分，然后生成一个 文件方便多页面之间进行复用。