wp-generate/core/webpack.dev.config.js

var path = require('path');
var fs = require('fs');
var merge = require('webpack-merge');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-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 MODULE_PATH = path.resolve(ROOT_PATH, 'node_modules');

//取出页面文件映射
var getHtmlPluginArr = function() {
  var data = JSON.parse(fs.readFileSync('app.json', 'utf-8'));
  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: dist + '.html',
        chunksSortMode: "dependency" //按chunks的顺序对js进行引入
      })
    );
  }
  return resultObj;
};

var appJsonObj = getHtmlPluginArr();
var commonConfig = {
  entry: appJsonObj.entryObj,
  module: {
    preLoaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'eslint-loader',
        include: APP_PATH,
        exclude: MODULE_PATH
      }
    ],
    loaders: [
      { test: /\.html$/, loader: "html?minimize=false" },
      { test: /\.json$/, loader: "json" },
      { test: /\.scss|\.css$/, loaders: ["style", "css", "sass"] },
      { test: /\.(?:jpg|gif|png)$/, loader: 'url?limit=10240&name=../images/[name]-[hash:10].[ext]' },
      { test: /\.handlebars/, loader: "handlebars" },
      { test: /\.(js|jsx)$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['es2015','react'] } }
    ]
  },
  output: {
    path: BUILD_PATH,
    filename: "js/[name].js"
  },
  externals: {
    "jquery": "jQuery"
  },
  //配置短路径引用
  resolve: {
    alias: {
      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,
  devtool: "cheap-source-map",
  cache: true
}
//webpack-dev-server 提供的是内存级别的server,不会生成build的文件夹
//访问路径直接参照build下的路径 如http://127.0.0.1:8080/page1/page1.html
module.exports = merge(commonConfig, {
  devServer: {
    hot: true,
    inline: true,
    progress: true,
    host: process.env.HOST,
    port: "8808",
    proxy: {
      //转发至线下服务器f
      '/download/mos/*': {
        target: 'http://10.4.245.50:8912',
        secure: false
      },
      '*/api/*': {
        target: 'http://10.4.246.56:8912/',//dev
        //target: 'http://10.4.246.105:8912/',//qa
        secure: false
      },
      '*/reuse/product/*': {
        target: 'http://10.4.245.50:8912/',
        secure: false
      },
      //转发至本地mock
      '*/mock/*': {
        target: 'http://127.0.0.1:8809',
        secure: false
      }
    }
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new OpenBrowserPlugin({
      url: 'http://127.0.0.1:8808/pageList/pageList.html'
    })
  ]
});