webpack 配置文件說明

var path = require("path");
var webpack = require("webpack");

var HtmlwebpackPlugin = require('html-webpack-plugin');

var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');
var staticPath = 'assets';

module.exports = {
  entry: [  //入口文件
    'webpack/hot/dev-server',
    './app/Main.js'
  ],
  output: {
    path: path.resolve(__dirname, staticPath),
    publicPath: "/",
    filename: 'assets/dev/js/build.js'
  },
  resolve: {
    extensions: ['', '.js', '.jsx', 'sass']
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: node_modules, 
        loader: 'babel',
        query: {
          "presets": ["react", "es2015", "stage-0", "react-hmre"]
        }
      }, {
        test: /\.sass$/,
        loader: 'style!css!sass'
      }, {
        test: /\.(png|jpg)$/,
        loader: 'url?limit=25000'
      }
    ],
    noParse: [pathToReact]  //每當 Webpack 嘗試去解析那個壓縮后的文件，我們阻止它，因為這不必要。
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new ExtractTextPlugin("css/[name].css"),    //單獨使用style標簽加載css並設置其路徑
    new HtmlWebpackPlugin({                        //根據模板插入css/js等生成最終HTML
       favicon:'./src/img/favicon.ico', //favicon路徑
       filename:'/view/index.html',    //生成的html存放路徑，相對於 path
       template:'./app/index.html',    //html模板路徑
       inject: 'body',    //允許插件修改哪些內容，包括head與body，或者true
       hash:true,    //為靜態資源生成hash值
       minify:{    //壓縮HTML文件
           removeComments:true,    //移除HTML中的注釋
           collapseWhitespace:false    //刪除空白符與換行符
       }
    })
  ]
};

1.entry參數定義了打包后的入口文件，數組中的所有文件會按順序打包。每個文件進行依賴的遞歸查找，直到所有相關模塊都被打包。

如有多個需要打包，寫法如下：

entry: {
        login:  './js/login'，
        regist: './js/regist'
}

2.output參數定義了輸出文件的位置，其中常用的參數包括：

　　path: 打包文件存放的絕對路徑
　　publicPath: 網站運行時的訪問路徑
　　filename: 打包后的文件名