Webpack 4.36.1不使用html Webpack外部插件

我正在将一个库从网页1迁移到网页4。将由另一个具有webpack 3的应用程序使用

My libraries 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;
    }
    ...
}

图书馆的网页有：

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中，该repo的网页包具有html网页包插件，如下所示：

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/',
});

然后在应用程序中以全局方式使用它，如下所示：

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帮助程序以前是一个函数，但使用webpack 4现在是一个esmodule。所以new不是构造函数

我试过了

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

按照

编辑：使用libraryExport以更好的方式解决了此部分：“默认”。但是下面提到的错误仍然存在。

但是当使用config时，它在库中开始失败

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

错误：

无法设置#的属性assetpath，它只有一个getter

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

我错过了什么？我已经将html网页包插件更新到^3

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

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

我以类似的方式出口

编辑

我想我找到了解决办法。UMD不支持ESM，但您可以在不使用“html网页包外部插件”的情况下导入库。我刚测试过。首先，我如上所述导出了库

然后在项目中导入库

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

---

我还准备了一个例子，我能够解决这个问题。问题不在于webpack配置，而在于在helper文件中导入配置的方式。它需要导出默认值或其他模块绑定器，所以我不得不添加它。这就是我的配置文件中更改的内容

config.js

--

++

helper.js

--

++

---

没用，我也犯了同样的错误。在删除globalObject&&var helper=require（'helper'）的hack之后，我也尝试过；访问配置时，错误“无法设置#的属性assetpath，它只有一个getter”仍然存在。@Amritesh Anand我想我已经找到了一个解决方案，对于需要获取库的repo，使用导入编译失败。未找到./src/helpers/RealtimeConnectionHandler.js模块中的错误：错误：无法解析“/***/src/helpers”中的“helper”。嘿，我能够解决该问题。问题不在于网页包配置，而在于配置文件本身。我以前没有检查过。我将分别发布答案。谢谢你的帮助。

import * as config from './config';

import config from './config';