Webpack 4.36.1 不能与 html-webpack-externals-plugin 一起使用

Question

我正在将一个库从 webpack 1 迁移到 webpack 4。它将被另一个使用 webpack 3 的应用程序使用。

我的库 index.js 看起来像这样，

import * as config from './config';
export default class Helper{
    constructor(options) {
       this.configurePaths({assetPath: options.assetPath || ''});
    }
    configurePaths(configuration) {
        config.assetPath = configuration.assetPath || config.assetPath;
    }
    ...
}

库的Webpack有：

const path = require('path');
const env = require('yargs').argv.mode;
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const JavaScriptObfuscator = require('webpack-obfuscator');
const webpack = require('webpack');

const version = require('./releaseConfig').version;
const libraryName = 'vektor3d';

let optimization = {}
let plugins = [
  new webpack.ProvidePlugin({
    vektor3d: 'vektor3d'
  })
]
let outputFile;

if (env === 'produciton') {
  optimization.minimizer =  [new UglifyJsPlugin()]
  outputFile = libraryName + '-' + version + '.min.js';
  plugins.push(new JavaScriptObfuscator({
    rotateUnicodeArray: true,
    disableConsoleOutput: false
  }, []));
} else {
  outputFile = libraryName + '.js';
}

module.exports = {
  devtool: env === 'development' ? 'source-map' : undefined,
  entry: __dirname + '/src/index.js',
  output: {
    path: __dirname+'/lib',
    filename: outputFile,
    library: libraryName,
    libraryTarget: 'umd',
    umdNamedDefine: true,
    globalObject: `(typeof self !== 'undefined' ? self : this)`
  },
  resolve: {
    modules: [path.resolve('./src')],
    extensions: ['.js']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader'
        }
      }
    ]
  },
  optimization: optimization,
  plugins: plugins
};

现在我必须将它作为全局包含在另一个 repo 中，其 webpack 具有 html-webpack-plugin 并且看起来像这样：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
module.exports = {
  entry: {
    app: './src/index.js',
  },
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: '*****'
    }),
    new HtmlWebpackExternalsPlugin({
      externals: [{
         module: 'helper',
         entry: './helper.js',
         global: 'helper',
      }]
    }),
  ],
  ...
};

然后你在应用程序中像这样全局使用它：

/* global helper */
this.helper = new helper({
  assetPath: this.assetPath + '/assets/',
});

在 webpack 1 中，helper 曾经是一个函数，但在 webpack 4 中，它现在是一个 esmodule。所以 new 说不是构造函数失败了。

我试过了，

var helper = require('helper').default;

按照SO answer by Felix King的建议

编辑：这部分通过 libraryExport: 'default' 以更好的方式解决。但是下面提到的错误仍然存​​在。

但是当使用配置时它开始在库中失败

key: "configurePaths",
value: function configurePaths(configuration) {
  _config__WEBPACK_IMPORTED_MODULE_0__["assetPath"] = configuration.assetPath || _config__WEBPACK_IMPORTED_MODULE_0__["assetPath"];

错误：

无法设置只有 getter 的 # 的属性资产路径

当我在同一行停止它后在控制台上执行它时，同样的命令运行良好。

我错过了什么？我也将 html-webpack-plugin 更新为 ^3。

为什么我的配置以只有 getter 的方式公开？

Answer 1

我能够解决这个问题。问题不在于 webpack 配置，而是在帮助文件中导入配置的方式。它需要导出默认值或另一个模块绑定器，所以我不得不添加它。这是我的配置文件中发生的变化。

config.js

--

export let assetPath = 'assets3d';

++

export default {
    assetPath: 'assets3d'
 }

helper.js

--

import * as config from './config';

++

import config from './config';

Answer 2

试试这个方法。

output: {
  path: __dirname+'/lib',
  filename: outputFile,
  library: 'helper', // if you use this way new helper
  libraryExport: 'default', // it is important
  libraryTarget: 'umd',
  umdNamedDefine: true,
},

我以类似的方式导出my library。

编辑

我想我找到了解决办法。 UMD 不支持 ESM，但您可以在没有 'html-webpack-externals-plugin' 的情况下导入库。我刚刚测试过。首先，我像上面一样导出了库。

然后在项目中导入库。

import './helper';
new helper ({});

我还在github上准备了一个例子