В соответствии с документами: https://webpack.js.org/configuration/output/
при настройке вывода:
module.exports = {
//...
output: {
library: 'someLibName',
libraryTarget: 'umd',
filename: 'someLibName.js',
auxiliaryComment: 'Test Comment'
}
};
должен вывести что-то вроде этого:
(function webpackUniversalModuleDefinition(root, factory) {
// Test Comment
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require('lodash'));
// Test Comment
else if(typeof define === 'function' && define.amd)
define(['lodash'], factory);
// Test Comment
else if(typeof exports === 'object')
exports['someLibName'] = factory(require('lodash'));
// Test Comment
else
root['someLibName'] = factory(root['_']);
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
// ...
});
, чтобы иметь возможностьиспользовать этот модуль любым другим потребителем.
Однако в моем случае вывод выглядит примерно так:
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React")):"function"==typeof define&&define.amd?define("lib",["React"],t):"object........"
Я использую машинописный текст вместо простого javascript, что я пропускаю или делаю неправильно?
Я использую веб-пакет "^ 4.27.1",
Это мой webpack.config.prod.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: "./src/index.tsx",
mode: "production",
output: {
//path: resolve(__dirname, 'umd'),
path: __dirname + "/dist",
filename: 'lib.js',
libraryTarget: 'umd',
library: 'lib',
umdNamedDefine: true,
auxiliaryComment: 'Test Comment'
//globalObject: 'this'
},
// output: {
// filename: "bundle.js",
// path: __dirname + "/dist"
// },
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
plugins:[
new UglifyJsPlugin(),
],
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
"react": "React",
"react-dom": "ReactDOM"
}
};