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;

根据

的建议

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

但是当使用 config

时，它在库中开始失败

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

错误：

无法设置只有 getter

的 # 的属性 assetpath

令人惊奇的是，当我在同一行停止它后在控制台上执行它时，相同的命令运行正常。

我错过了什么？我也更新了 html-webpack-plugin 到 ^3.

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

Answer 1

试试这个方法。

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

上准备了一个例子

Answer 2

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

config.js

--

export let assetPath = 'assets3d';

++

export default {
    assetPath: 'assets3d'
 }

helper.js

--

import * as config from './config';

++

import config from './config';

Webpack 4.36.1 不适用于 html-webpack-externals-plugin

Webpack 4.36.1 not working with html-webpack-externals-plugin

webpack

ecmascript-6

babel-loader

html-webpack-plugin

es6-module-loader