wp-generate/core/webpack.config.js

var path = require('path');
var fs = require('fs');
var exec = require('child_process').exec;
var HappyPack = require('happypack');
var merge = require('webpack-merge');
var webpack = require('webpack');
var WebpackMd5Hash = require('webpack-md5-hash');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

var data = JSON.parse(fs.readFileSync('app.json', 'utf-8'));
//取出页面文件映射
var getHtmlPluginArr = function() {
  var pageList = data.pageList;
  var resultObj = {
    "pluginArr": [],
    "entryObj": {}
  };
  for (var index = 0; index < pageList.length; index++) {
    var element = pageList[index];
    var src = element.src;
    //通过对app.json中src的路径截取获得分发路径
    var dist = (function () {
      var s1 = src.split("./app/page/")[1];
      var s2 = s1.substr(0, s1.lastIndexOf("/"));
      return s2;
    })();
    var title = element.title;
    var extra = element.extra;
    resultObj.entryObj[dist] = src;

    //利用路径一部分来进行HtmlwebpackPlugin的chunks
    resultObj.pluginArr.push(
      new HtmlwebpackPlugin({
        chunks: [dist], //当前页面js
        title: title,
        extra: extra,//包含页面额外的配置信息
        template: "app/" + "template.ejs",
        filename: 'html/' + dist + '.html',
        chunksSortMode: "dependency" //按chunks的顺序对js进行引入
      })
    );

    //HappyPack, loader多进程去处理文件
    resultObj.pluginArr.push(
      new HappyPack({ id: 'html' }),
      new HappyPack({ id: 'css' }),
      new HappyPack({ id: 'js' }),
      new HappyPack({ id: 'tpl' })
    );
  }
  return resultObj;
};

var appJsonObj = getHtmlPluginArr();
var commonConfig = {
  entry: appJsonObj.entryObj,
  module: {
    loaders: [
      { test: /\.html$/, loader: "html?minimize=false", happy: {id: "html"} },
      { test: /\.json$/, loader: "json" },
      { test: /\.scss|\.css$/, loaders: ["style", "css", "sass"], happy: {id: "css"} },
      { test: /\.(?:jpg|gif|png)$/, loader: 'url?limit=10240&name=images/[name]-[hash:10].[ext]' },
      { test: /\.handlebars/, loader: "handlebars", happy: {id: "tpl"} },
      { test: /\.js|\.jsx$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['es2015','react'] }, happy: {id: "js"} }
    ]
  },
  output: {
    path: BUILD_PATH,
    filename: "js/[name].js"
  },
  externals: {
    "jquery": "jQuery"
  },
  //配置短路径引用
  resolve: {
    alias: {
      lib: path.resolve(APP_PATH, "lib"),
      module: path.resolve(APP_PATH, 'module'),
      component: path.resolve(APP_PATH, "component"),
      page: path.resolve(APP_PATH, "page"),
      node_modules: path.resolve(ROOT_PATH, 'node_modules')
    },
    extensions: ['', '.js', '.jsx', '.json', '.scss']
  },
  plugins: appJsonObj.pluginArr,
  cache: true
}

//删除build目录
exec('rm -rf build', function(err, out) {
  console.log(out); err && console.log(err);
});
//删除image目录
exec('rm -rf images', function(err, out) {
  console.log(out); err && console.log(err);
});

module.exports = merge(commonConfig, {
  output: {
    publicPath: '//s3.meituan.net/v1/mss_c4375b35f5cb4e678b5b55a48c40cf9d/' + data.cdn.bucketName,
    path: BUILD_PATH,
    filename: "js/[name]-[chunkhash:10].js"
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({ minimize: true }),
    new WebpackMd5Hash()
  ]
});