プロジェクトにおける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ページエントリファイル構成では、各ページに1つのエントリファイルがあり、ファイルにはrequireを介して他のモジュールを導入することができますが、これらのモジュールwebpackは自動的にエントリファイルと1つのファイルにマージされます.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のプラグインを使用します.