我目前在webpack上遇到一个问题,即“压缩”文件至原始大小的几倍。我不记得以前发生过这个问题,但是我似乎无法弄清楚我为介绍此问题所做的更改。
我哪里出错了?
原文:
export function updateFormAction() {
const formEl: HTMLElement | null = document.getElementById("330545");
if (formEl) {
formEl.setAttribute('action','https://sis.tfaforms.net/330542');
}
else {
throw new Error('Unable to find element 330545');
}
}
Webpack“已缩小”:
!(function(e) {
var t = {};
function n(r) {
if (t[r]) return t[r].exports;
var o = (t[r] = { i: r, l: !1, exports: {} });
return e[r].call(o.exports, o, o.exports, n), (o.l = !0), o.exports;
}
(n.m = e),
(n.c = t),
(n.d = function(e, t, r) {
n.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: r });
}),
(n.r = function(e) {
'undefined' != typeof Symbol &&
Symbol.toStringTag &&
Object.defineProperty(e, Symbol.toStringTag, { value: 'Module' }),
Object.defineProperty(e, '__esModule', { value: !0 });
}),
(n.t = function(e, t) {
if ((1 & t && (e = n(e)), 8 & t)) return e;
if (4 & t && 'object' == typeof e && e && e.__esModule) return e;
var r = Object.create(null);
if (
(n.r(r),
Object.defineProperty(r, 'default', { enumerable: !0, value: e }),
2 & t && 'string' != typeof e)
)
for (var o in e)
n.d(
r,
o,
function(t) {
return e[t];
}.bind(null, o)
);
return r;
}),
(n.n = function(e) {
var t =
e && e.__esModule
? function() {
return e.default;
}
: function() {
return e;
};
return n.d(t, 'a', t), t;
}),
(n.o = function(e, t) {
return Object.prototype.hasOwnProperty.call(e, t);
}),
(n.p = ''),
n((n.s = 0));
})([
function(e, t, n) {
'use strict';
Object.defineProperty(t, '__esModule', { value: !0 });
var r = n(1);
n(2),
(window.onload = function() {
r.updateFormAction();
});
},
function(e, t, n) {
'use strict';
Object.defineProperty(t, '__esModule', { value: !0 }),
(t.updateFormAction = function() {
var e = document.getElementById('330545');
if (!e) throw new Error('Unable to find element 330545');
e.setAttribute('action', 'example.com/330542');
});
},
function(e, t, n) {}
]);
这是我的webpack.config.js:
const webpack = require('webpack');
const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'production',
plugins: [
new MiniCssExtractPlugin({
filename: './[name]/customBundle.css',
chunkFilename: '[id].css',
ignoreOrder: false
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
entry: glob.sync('./forms/**/index.ts').reduce((acc, path) => {
const entry = path.replace('/index.ts', '');
acc[entry] = path;
return acc;
}, {}),
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: 'ts-loader',
options: {
transpileOnly: true,
experimentalWatchApi: true
}
}
],
exclude: /node_modules/
},
{
test: /\.s?[ac]ss$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development'
}
},
'css-loader',
'sass-loader'
]
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: './[name]/customBundle.js',
path: path.resolve(__dirname, './public')
},
externals: {
"jquery": "jQuery"
}
};
还有我的tsconfig.json:
{
"compilerOptions": {
/* Basic Options */
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
"allowJs": true, /* Allow javascript files to be compiled. */
"outDir": "./public", /* Redirect output structure to the directory. */
"removeComments": true, /* Do not emit comments to output. */
"strict": true, /* Enable all strict type-checking options. */
/* Additional Checks */
"noUnusedLocals": true, /* Report errors on unused locals. */
"noUnusedParameters": true, /* Report errors on unused parameters. */
"noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
"noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
"newLine": "LF"
},
"exclude": [
"node_modules",
"form-assembly-templates"
]
}