/*生成環(huán)境配置文件：不需要一些dev-tools,dev-server和jshint校驗等。和開發(fā)有關的東西刪掉*/
var webpack = require('webpack');
var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');
var pathToReactDOM = path.resolve(node_modules, 'react-dom/dist/react-dom.min.js');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
//具體作用及缺點見plugins中的描述
//var WebpackMd5Hash = require('webpack-md5-hash');
// 該插件是對“webpack-md5-hash”的改進：在主文件中獲取到各異步模塊的hash值，然后將這些hash值與主文件的代碼內容一同作為計算hash的參數(shù)，這樣就能保證主文件的hash值會跟隨異步模塊的修改而修改。
var WebpackSplitHash = require('webpack-split-hash');

var config = {
  entry:{
    app:path.resolve(__dirname, 'src/js/entry.js'),
    mobile: path.resolve(__dirname, 'src/js/mobile.js'),
    //添加要打包在vendors.js里面的庫
    vendors:['react','react-dom']
  },
  resolve:{
    alias: {
      'react.js': pathToReact, //alias:別名,
      'react-dom.js': pathToReactDOM
    },
    fallback: path.join(__dirname, "node_modules")
  },
  resolveLoader: { 
    fallback: path.join(__dirname, "node_modules") 
  },
  output:{
    path:path.resolve(__dirname, 'dist'),
    publicPath:'../',//生成的html里的引用路徑用 publicPath
    //以文件內容的MD5生成Hash名稱的script來防止緩存
    filename: 'js/[name].[chunkhash:8].js',
    //異步加載的模塊是要以文件形式加載，生成的文件名是以chunkFilename配置的
    chunkFilename: 'js/[name].[chunkhash:8].js'
  },
  module:{
    loaders:[{
      test: /\.jsx?$/,
      //這里(node_modules文件夾)再也不需通過任何第三方來加載
      exclude:path.resolve(__dirname, 'node_modules'),
      loader: 'babel',
      query:{
        presets:['es2015', 'react']
      }
    },
    {
      test:/\.css$/,
      //loader:'style!css'
      loader: ExtractTextPlugin.extract("style", "css")
    },
    {
      test:/\.scss$/,
      loader:'style!css!sass'
    },
    //url-loader:圖片、字體圖標加載器，是對file-loader的上層封裝,支持base64編碼。傳入的size（也有的寫limit) 參數(shù)是告訴它圖片如果不大于 25KB 的話要自動在它從屬的 css 文件中轉成 BASE64 字符串。
    {
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
      loader: 'url?limit=25000&name=[name].[ext]'
    }]
  },
  plugins:[
    //提取公共代碼的插件，用于提取多個入口文件的公共腳本部分，然后生成一個vendors.js。注意HTML代碼中要加載這個公共文件
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendors',
      filename: 'js/vendors.js'
    }),
    //在文件開頭插入banner
    new webpack.BannerPlugin("The file is creted by yangmin.--"+ new Date()),
    //壓縮js文件
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    /*插件：單獨使用style標簽加載css文件.contenthash代表的是文本文件內容的hash值，也就是只有style文件的hash值*/
    new ExtractTextPlugin("css/[name].[contenthash:8].css"),//設置其路徑(路徑相對于path)
    /*插件：動態(tài)生成html，在webpack完成前端資源打包以后，自動將打包后的資源路徑和版本號寫入HTML中，達到自動化的效果。*/
    new HtmlWebpackPlugin({
      filename:'view/index.html',  //生成的html存放路徑，相對于 path
      template:'src/view/index.html',  //html模板路徑
      inject:true,  //允許插件修改哪些內容，true/'head'/'body'/false,
      chunks:['vendors','app'],//加載指定模塊中的文件，否則頁面會加載所有文件
      hash:false,  //為靜態(tài)資源生成hash值
      minify:{  //壓縮HTML文件
        removeComments:false,  //移除HTML中的注釋
        collapseWhitespace:false  //刪除空白符與換行符
      }    
    }),
    new HtmlWebpackPlugin({
      filename:'view/mobile.html',  //生成的html存放路徑，相對于 path
      template:'src/view/mobile.html',  //html模板路徑
      inject:true,  //允許插件修改哪些內容，true/'head'/'body'/false,
      chunks:['vendors','mobile'],//加載指定模塊中的文件，否則頁面會加載所欲文件
      hash:false,  //為靜態(tài)資源生成hash值
      minify:{  //壓縮HTML文件
        removeComments:false,  //移除HTML中的注釋
        collapseWhitespace:false  //刪除空白符與換行符
      }
    }),
    /*作用：生成具有獨立hash值的css和js文件，即css和js文件hash值解耦.
     *缺點：webpack-md5-hash插件對chunk-hash鉤子進行捕獲并重新計算chunkhash，它的計算方法是只計算模塊本身的當前內容（包括同步模塊）。這種計算方式把異步模塊的內容忽略掉了，會造成一個問題：異步模塊的修改并未影響主文件的hash值。
     */
    //new WebpackMd5Hash()
    new WebpackSplitHash()
  ]
}
 module.exports = config;

var webpack = require("webpack");
...
var HtmlWebpackPlugin = require('html-webpack-plugin');

var deps = [
  'react/dist/react.min.js',
  'react-dom/dist/react-dom.min.js'
];
var config = {
  ...
  resolve:{
    alias:{},
    fallback:path.join(__dirname, "node_modules")
  },
  ...
  module:{
     ...
     noParse:[]  
   }  
}
/*當加載多個壓縮文件時，下述方法更優(yōu)雅簡便*/
deps.forEach(function(dep){  
  var depPath = path.resolve(node_modules, dep);
  //path.dep是路徑分隔符。
  config.resolve.alias[dep.split(path.dep)[0]] = depPath;  
  config.module.noParse.push(depPath);

});

module.exports = config;

<script src="../dist/vendors.js"></script>
<script src="../dist/app.js"></script>

import 'main.css'; 
alert('I am main.js');

npm install extract-text-webpack-plugin --save-dev

//webpack.production.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');

//webpack.production.config.js
new ExtractTextPlugin("css/[name].[contenthash:8].css"),//設置其路徑(路徑相對于path)

//webpack.production.config.js

var WebpackMd5Hash = require('webpack-md5-hash');
...
new WebpackMd5Hash();

//entry.js

'use strict';

import './saveCarInfo.js';

window.onload = function(){//懶加載
  require.ensure(['./a.js'],function(require){
    var moduleA = require('./a.js');
  },'a');
};

//a.js

'use strict'

console.log("a");

setTimeout(function(){
  require.ensure([],function(require){
    require('./b.js');
  },'b');
},10000);

module.exports = "moduleA";

//b.js
import fn_c from './c.js';

console.log('b');
module.exports = 'moduleB';

//c.js

console.log("c");
module.exports = "moduleC";

output:{
  path:path.resolve(__dirname, 'dist'),
  publicPath:'../',//生成的html里的引用路徑用 publicPath
  filename: 'js/[name].[hash:8].js',
  //異步加載的模塊是要以文件形式加載，生成的文件名是以chunkFilename配置的
  chunkFilename: 'js/[name].[chunkhash:8].js'
},

//webpack.production.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
...
var config = {
...
plugins:[
... 
  new HtmlWebpackPlugin({
    filename:'view/index.html',  //生成的html存放路徑，相對于 path
    template:'src/view/index.html',  //html模板路徑
    inject:true,  //允許插件修改哪些內容，true/'head'/'body'/false,
    chunks:['vendors','app'],//加載指定模塊中的文件，否則頁面會加載所有文件
    hash:false,  //為靜態(tài)資源生成hash值
    minify:{  //壓縮HTML文件
      removeComments:false,  //移除HTML中的注釋
      collapseWhitespace:false  //刪除空白符與換行符
     }    
  }),
  new HtmlWebpackPlugin({
    filename:'view/mobile.html',  //生成的html存放路徑，相對于 path
    template:'src/view/mobile.html',  //html模板路徑
    inject:true,  //允許插件修改哪些內容，true/'head'/'body'/false,
    chunks:['vendors','mobile'],//加載指定模塊中的文件，否則頁面會加載所有文件
    hash:false,  //為靜態(tài)資源生成hash值
    minify:{  //壓縮HTML文件
      removeComments:false,  //移除HTML中的注釋
      collapseWhitespace:false  //刪除空白符與換行符
     }    
  })
]}