覆盖2个webpack项目中的html

时间:2017-06-29 13:42:40

标签: javascript webpack

(我的英语很糟糕)我有一个关于html覆盖的问题......我有2个项目:一个有核心,一个有特定模板。我在项目中使用特定的模板,但我想从这个特定的服务中提供html文件,如果html不存在,我会从核心中获取html ...我该怎么做? 谢谢你!

我在互联网上搜索了很多,但没有。

[编辑1]我的配置

const webpack = require("webpack");
const conf = require("./gulp.conf");
const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const WebPackAngularTranslate = require("webpack-angular-translate");
const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
const autoprefixer = require("autoprefixer");

module.exports = {
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.json$/,
        include: [
          "node_modules/myProjectCore/src/"
        ],
        loader: 'json-loader'
      },
      {
        test: /\.(css|scss)$/,
        use: [
          {loader: "style-loader"},
          {loader: "css-loader", options:{sourceMap: true}},
          {loader: "resolve-url-loader", options:{sourceMap: true}},
          {loader: "sass-loader", options:{sourceMap: true}}
        ]
      },
      {
        test: /\.js$/,
        enforce: "pre",
        exclude: /node_modules/,
        loader: "eslint-loader"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          WebPackAngularTranslate.jsLoader(),
          "ng-annotate-loader",
          {
            loader: "babel-loader",
            options: {
              presets: ["es2015"]
            }
          }
        ]
      },
      {
        test: /.html$/,
        use: [
          "html-loader",
          WebPackAngularTranslate.htmlLoader()
        ]
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [
          {loader: "url-loader", "options": {limit: 10000, mimetype: "application/font-woff"}}
        ]
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [
          {loader: "file-loader", options: {mimetype: "application/octet-stream"}}
        ]
      },
      {
        test: /\.(png|jpg)$/,
        use: [
          {loader: "file-loader"}
        ]
      }
    ]
  },
  resolve: {
    alias: {
      "myProjectCore$": getLinkToMyProjectCore()
    }
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin({
      template: conf.path.src("index.html")
    }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      _: "lodash",
      moment: "moment"
    }),
    new WebPackAngularTranslate.Plugin(),
    new LodashModuleReplacementPlugin()
  ],
  // postcss: () => [autoprefixer],
  // debug: true,
  output: {
    publicPath: "http://localhost:3000/",
    path: path.join(process.cwd(), conf.paths.tmp),
    filename: "index.js"
  },
  entry: `./${conf.path.src("index")}`
};

function getLinkToMyProjectCore() {
  const defaut = "myProjectCore";
  const mode = process.argv.indexOf("--core");
  const r = (mode > -1) ? process.argv[mode + 1] : defaut;
  const result = path.join(process.cwd(), `../${r}/src`);
  console.log(result);
  return result;
}

这是我特定项目的配置。

[编辑2]

myFolder
  |- myProjectCore
  |- mySpecificProject

0 个答案:

没有答案