I'm facing annoying bug I finished to setup a basic webpack config, I would like to minify the ts code so I used terser to do it but webpack-cli throw
TypeError: Cannot read property 'javascript' of undefined
I'm a bit confused should I use uglify or an other plugin to minify the ts code or is that possible to do it with terser ?
Look it terser can't read ts code maybe possible to translate the ts code to js to be minify after :/
What is the current behavior?
I started to used webpack since a week and would like to implement it on my truly project.
Stack:
-TypeScript
-ReactJs
const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
module.exports = merge(common, {
mode: "production",
devtool: "source-map",
output: {
filename: "[name].[contentHash].bundle.js",
},
plugins: [
new HtmlWebpackPlugin({
minify: {
removeAttributQuotes: true,
collapseWhitespace: true,
removeComents: true,
},
}),
new MiniCssExtractPlugin({
filename: "[name].[contentHash].css",
}),
],
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, // 2. Extract CSS to dist (or file)
"css-loader", // 1. Turns CSS into commonjs
// for sass just add sass-loader to turns sass into CSS
],
},
],
},
optimization: {
minimizer: [new TerserPlugin(), new OptimizeCssAssetsWebpackPlugin()],
},
});
src/index.tsx
import * as _ from 'lodash';
import { cube } from "./math";
import './styles.css';
if (process.env.NODE_ENV !== 'production') {
console.log('Looks like we are in development mode!');
}
function component() {
const element = document.createElement('pre');
element.innerHTML = [
'Hello webpack!',
'5 cubed is equal to ' + cube(5)
].join('\n\n');
return element;
}
document.body.appendChild(component());
npm run build
Expected behavior
> webpack-react@1.0.0 build /Users/***/webpack-react
> webpack --config webpack.prod.js
[webpack-cli] TypeError: Cannot read property 'javascript' of undefined
at /Users/***/webpack-react/node_modules/terser-webpack-plugin/dist/index.js:400:38
at SyncHook.eval [as call] (eval at create (/Users/***/webpack-react/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:87:1)
at SyncHook.lazyCompileHook (/Users/***/webpack-react/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.newCompilation (/Users/***/webpack-react/node_modules/webpack/lib/Compiler.js:631:26)
at /Users/***/webpack-react/node_modules/webpack/lib/Compiler.js:667:29
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/***/webpack-react/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (/Users/***/webpack-react/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.compile (/Users/***/webpack-react/node_modules/webpack/lib/Compiler.js:662:28)
at /Users/***/webpack-react/node_modules/webpack/lib/Compiler.js:321:11
at Compiler.readRecords (/Users/***/webpack-react/node_modules/webpack/lib/Compiler.js:529:11)
Describe the bug
I'm facing annoying bug I finished to setup a basic webpack config, I would like to minify the ts code so I used terser to do it but webpack-cli throw
What is the current behavior?
I started to used webpack since a week and would like to implement it on my truly project. Stack: -TypeScript -ReactJs
To Reproduce
Steps to reproduce the behavior:
config :
package.json
webpack.commun.js
webpack.prod.js
src/index.tsx
Expected behavior