Webpack 4.36.1无法使用html-webpack-externals-plugin [英] Webpack 4.36.1 not working with html-webpack-externals-plugin

问题描述

我正在将库从Webpack 1迁移到Webpack 4，该库将由具有Webpack 3的另一个应用程序使用.

I am migrating a library from webpack 1 to webpack 4. Which is to be consumed by another application with webpack 3.

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

My libraries index.js looks like this,

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具有:

Webpack of the library has:

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
};

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

Now I have to include it as global in another repo whose webpack has html-webpack-plugin and looks like this:

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

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

And then you use it in the application as global like this:

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

使用webpack 1助手曾经是一个功能，但是现在使用webpack 4则是一个esmodule.因此new无法说不构造函数.

With webpack 1 helper used to be a function but with webpack 4 now its a esmodule. So new fails saying not a constructor.

我尝试过，

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

根据 SO的建议由Felix King

使用libraryExport:'default'可以更好地解决此部分.但是下面提到的错误仍然存​​在.

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

But then its starts failing inside the library when using config

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

错误:

无法设置只有吸气剂的#的财产资产路径

令人惊奇的是，当我在同一行上将其停止后，在控制台上执行该命令时，该命令可以正常运行.

Amzingly the same command runs fine when I execute it on console after stopping it on the same line.

我想念什么?我也将html-webpack-plugin也更新为^ 3.

What am I missing? I have updated html-webpack-plugin as well to ^3.

为什么我的配置只以吸气剂的形式暴露?

推荐答案

我能够解决此问题.问题不在于webpack配置，而是配置在帮助文件中的导入方式.它需要导出默认值或其他模块绑定程序，因此我必须添加它.这就是我的配置文件中发生的更改.

I was able to solve this. The problem was not with the webpack config but the way the config had been imported in the helper file. It requires export default or anouther module binder so I had to add it. This is what changed in my config file.

config.js

config.js

-

export let assetPath = 'assets3d';

++

export default {
    assetPath: 'assets3d'
 }

helper.js

helper.js

-

import * as config from './config';

++

import config from './config';

这篇关于Webpack 4.36.1无法使用html-webpack-externals-plugin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！