Develop Reference

Webpack source-map targets to *.min.js bundle and not to the source files in production mode

we have almost the same configuration for development and production mode in webpack. In both cases we want to have source maps to be able to debug in browser. For development mode all works fine. Our source files appear in the browser dev tools and all our files are listed in the app2.min.js.map file.
{
"version":3,
"sources":[
"webpack:///webpack/bootstrap",
"webpack:///./app2/app.dev.ts",
"webpack:///./app2/app.module.ts",
"webpack:///./app2/app.routing.ts",
"webpack:///./app2/components/absenceManagement/...
...
But in production mode the source map targets back to the minified bundle file
{
"version":3,
"sources":[
"webpack:///js/app2.min.js"
],
"names":[
"modules","installedModules",
"__webpack_require__",
...
Therefore the bundled js file targets to the source map (//# sourceMappingURL=app2.min.js.map) and the source map back to the bundle file.
Our configuration
webpack.dev.js
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
module.exports = function () {
return webpackMerge(commonConfig,
{
devtool: 'source-map',
entry: {
app: './app2/app.dev.ts'
},
mode: 'development'
});
}
webpack.prod.js
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
module.exports = function () {
return webpackMerge(commonConfig,
{
devtool: 'source-map',
entry: {
app: './app2/app.prod.ts'
},
mode: 'production'
});
}
webpack.common.js
const { CheckerPlugin } = require('awesome-typescript-loader');
module.exports = {
// Currently we need to add '.ts' to the resolve.extensions array.
resolve: {
extensions: ['.ts', '.tsx', '.js', '.html', '.css'],
modules: ['app2', 'node_modules', 'js']
},
// Add the loader for .ts files.
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /\.spec\.ts$/,
use: ['awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.css$/,
loader: 'raw-loader'
},
{
test: /\.html$/,
loader: 'raw-loader'
}
]
},
plugins: [
new CheckerPlugin()
],
stats: {
colors: false
},
output: {
filename: './js/app2.min.js'
}
};
tsconfig.js
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"./#types/",
"./node_modules/#types/",
"./js/"
],
"baseUrl": ".",
"paths": {
"typemoq": [ "js/typemoq" ]
},
"types": [
"lodash",
"moment",
"jquery",
"typemoq"
]
},
"awesomeTypescriptLoaderOptions": {
"useCache": true
},
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
some of the package.json
"angular2-template-loader": "^0.6.0",
"awesome-typescript-loader": "^5.2.1",
...
"typescript": "^2.9.2",
"webpack": "^4.19.1",
"webpack-merge": "^4.1.4",
"webpack-stream": "^5.1.1"

You can try the following:
Setup terser-webpack-plugin in your webpack config. Therefore see: https://webpack.js.org/configuration/optimization/
And then use UglifyJS for the minification of your code. See: https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions and https://github.com/mishoo/UglifyJS#minify-options.
Also disable the optimiztion that is done by webpack itself which you can do with:
module.exports = {
//...
optimization: {
minimize: false,
},
};`
Your configuration for your productive environment should look like this:
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = function () {
return webpackMerge(commonConfig,
{
devtool: 'source-map',
entry: {
app: './app2/app.prod.ts'
},
mode: 'production',
optimization: {
minimizer: [
new TerserPlugin({
parallel: true,
minify: TerserPlugin.uglifyJsMinify,
terserOptions: {
sourceMap: {
filename: 'app2.min.js',
url: 'app2.min.js.map'
}
},
}),
],
},
});
}

"Parsing error: invalid character" when bundling images with Webpack's loaders

When I'm trying to bundle my React project, I get the following error regarding an image I'm about to load:
Oddly enough, when I hide the error overlay, I can see in a browser that my picture has been loaded correctly, despite Webpack's complaints. I've already been carefully following other working config examples, where that problem doesn't occur, but I can't easily identify the source of the issue, what leaves me here with no idea how to approach it or where to look for a hint. I've also tried different loaders: url-loader, file-loader and image-webpack-loader, but to no avail. Maybe that's Typescript what causes these troubles?
App.tsx where I'm importing my image:
import "./app.d";
import React from "react";
import SampleImage from "./assets/images/sample-image.jpg";
const App: React.FC = () => (
<div>
<img src={SampleImage} />
</div>
);
export default App;
app.d.ts with modules declarations to allow importing assets in typescripts files:
declare module "*.jpeg";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.png";
webpack.common.ts - my main Webpack config file, where I placed both url-loader and file-loader as it is in ejected create-react-app config, but it doesn't really change anything:
import path from "path";
import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
import HtmlWebpackPlugin from "html-webpack-plugin";
import { CleanWebpackPlugin } from "clean-webpack-plugin";
module.exports = {
entry: path.resolve(__dirname, "..", "./src/index.tsx"),
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: [
{
loader: require.resolve("babel-loader"),
options: {
presets: [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript",
],
},
},
],
},
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.(ts|tsx)$/,
/\.css$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
loader: require.resolve("file-loader"),
options: {
name: "static/media/[name].[hash:8].[ext]",
},
include: path.resolve(__dirname, "..", "./src/assets"),
},
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve("url-loader"),
options: {
name: "static/media/[name].[hash:8].[ext]",
},
include: path.resolve(__dirname, "..", "./src/assets"),
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js", ".jsx"],
},
output: {
path: path.resolve(__dirname, "..", "./dist"),
filename: "bundle.js",
},
devServer: {
contentBase: path.resolve(__dirname, "..", "./dist"),
hot: true,
compress: true,
open: true,
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: "React App",
template: path.resolve(__dirname, "..", "./src/index.html"),
}),
new ForkTsCheckerWebpackPlugin({
async: false,
eslint: {
files: path.resolve(__dirname, "..", "./src/**/*"),
},
}),
],
};
webpack.dev.ts
import webpack from "webpack";
import ReactRefreshWebpackPlugin from "#pmmmwh/react-refresh-webpack-plugin";
module.exports = {
mode: "development",
devtool: "eval-source-map",
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: [
{
loader: require.resolve("babel-loader"),
options: {
presets: [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript",
],
plugins: [require.resolve("react-refresh/babel")],
},
},
],
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new ReactRefreshWebpackPlugin({
overlay: {
sockIntegration: "wds",
},
}),
],
};
webpack.prod.ts
import webpack from "webpack";
module.exports = {
mode: "production",
devtool: "source-map",
};
webpack.config.ts
import merge from "webpack-merge";
import devConfig = require("./webpack.dev");
import prodConfig = require("./webpack.prod");
import commonConfig = require("./webpack.common");
module.exports = ({ env }: { env: "dev" | "prod" }) => {
const envConfig = env === "dev" ? devConfig : prodConfig;
return merge(commonConfig, envConfig);
};
Additionaly, my .babelrc file:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript"
],
"plugins": [
"react-refresh/babel",
[
"#babel/plugin-transform-runtime",
{
"regenerator": true
}
]
]
}
and tsconfig.json:
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"allowSyntheticDefaultImports": true,
"skipLibCheck": true,
"esModuleInterop": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": ["src"]
}
Scripts in package.json:
"scripts": {
"start": "webpack serve --config config/webpack.config.ts --env env=dev --hot",
"build": "webpack --config config/webpack.config.ts --env env=prod",
},
I'd be really grateful for any hint how to solve the issue.

Thanks to help received here: https://github.com/webpack/webpack/issues/12276#event-4152056913, I've managed to surpass the error overlay by changing the options passed to the ForkTsCheckerWebpackPlugin in my webpack.common.ts file.
Before:
new ForkTsCheckerWebpackPlugin({
async: false,
eslint: {
files: path.resolve(__dirname, "..", "./src/**/*"),
},
}),
Now:
new ForkTsCheckerWebpackPlugin({
async: false,
eslint: {
files: path.resolve(__dirname, "..", "./src/**/*.{ts,tsx,js,jsx}"),
},
}),

ImmutableJS List type not defined in React

I'm getting the Typescript error:
'List' refers to a value, but is being used as a type here.
But the immutable.d.ts does have the export interface List type. So I'm unsure of what is going on.
Here is the file I'm trying to reference it from:
import * as React from 'react';
import {IProduct} from "./Product";
const { List } = require('immutable');
interface GantryFootProps {
orders: List<IOrder>;
}
export interface IOrder {
product: IProduct
quantity: number;
}
export const GantryFoot: React.FunctionComponent<GantryFootProps> = (props) => {
return (<div>
<h2>Gantry Foot</h2>
</div>)
}
my tsconfig
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es2015",
"jsx": "react",
"allowJs": true,
"lib": ["es2015", "dom"]
},
"exclude": [
"node_modules"
]
}
and my webpack.config
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: './src/index.tsx',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.scss/,
use: [
MiniCssExtractPlugin.loader,
'css-loader','sass-loader'],
}
],
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
externals: {
"react": 'React'
},
devServer: {
contentBase: './dist'
},
plugins: [new MiniCssExtractPlugin({
filename: 'main.css',
chunkFilename: '[name].css'
})]
};
Any other clues as to the reason for the error would be greatly appreciated. Thanks!

Assuming you are running TypeScript 3.8+ you can use import type { List } from "immutable"(Playground),
for lower TypeScript versions you can use import { List } from "immutable"(Playground) and have webpack remove immutable from your chunk.
Documentation for import type

How to not rely on relative paths in React/Webpack 3 app

I'm trying to get rid of this:
import { something } from '../../services/somewhere';
And instead use:
import { something } from 'services/somewhere';
I found this article, but it only has an example for 1.x and 2.x
https://moduscreate.com/blog/es6-es2015-import-no-relative-path-webpack/
My project's main folder is called app.
I've tried both of these in my webpack.config.babel.js but with no luck so far.
3.x style: https://webpack.js.org/configuration/resolve/#resolve-modules
resolve: {
modules: [path.resolve(__dirname, 'app'), 'node_modules', path.resolve('node_modules')]
}
2.x style: https://moduscreate.com/blog/es6-es2015-import-no-relative-path-webpack/
resolve: {
modules: [
path.resolve('./app'),
path.resolve('./node_modules')
]
}
Any ideas?
Webpack Config
/* eslint-disable no-console */
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import path from 'path';
import chalk from 'chalk';
const coinhover = path.resolve(__dirname, 'coinhover');
const app = path.resolve(__dirname, 'app');
const log = console.log;
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
// template: `${__dirname}/app/index.html`,
template: path.join(__dirname, '/app/index.html'),
inject: 'body'
});
const ExtractTextPluginConfig = new ExtractTextPlugin({
filename: 'coinhover.css',
disable: false,
allChunks: true
});
const CopyWebpackPluginConfig = new CopyWebpackPlugin([{ from: 'app/static', to: 'static' }]);
const PATHS = {
app,
build: coinhover
};
const LAUNCH_COMMAND = process.env.npm_lifecycle_event;
const isProduction = LAUNCH_COMMAND === 'production';
process.env.BABEL_ENV = LAUNCH_COMMAND;
const productionPlugin = new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
});
const base = {
entry: [
PATHS.app
],
output: {
path: PATHS.build,
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.s?css/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)/,
loader: 'file-loader?name=[path][name].[ext]'
}
]
},
resolve: {
modules: [path.resolve(__dirname, 'app'), 'node_modules', path.resolve('node_modules')]
}
// resolve: {
// modules: [
// path.resolve('./app'),
// path.resolve('./node_modules')
// ]
// }
};
const developmentConfig = {
devtool: 'cheap-module-inline-source-map',
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig
]
};
const productionConfig = {
devtool: 'cheap-module-source-map',
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig,
productionPlugin
]
};
log(`${chalk.magenta('🤖 ')} ${chalk.italic.green('npm run:')} ${chalk.red(LAUNCH_COMMAND)}`);
export default Object.assign({}, base,
isProduction === true ? productionConfig : developmentConfig
);

Maybe it's an issue with your eslint config? For example, in your .eslintrc, try adding app to your resolver settings:
{
"...": {},
"settings": {
"import/resolver": {
"node": {
"moduleDirectory": [
"app",
"node_modules"
]
}
}
},
}

TypeError: is not a constructor [ Webpack Typescript ] import to nodeJS

Create themes Node.js Express App from WebStorm 2017.2.5
Javascript Language version ECMAScript 5.1
error with test for webpack#2 and webpack#3
i'am not new obj from import class
I try default export and any
sorry, am little eng skill
---------- bin
---------- ctrl/
main.ts
control.ts
interface.ts
---------- dist / main.js
---------- node_modules /
---------- public /
---------- routes / index.js
---------- views /
---------- app.js
---------- package.json
---------- package-lock.json
---------- webpack.config.js
---------- tsconfig
main.ts
import {controlA} from from './control';
export default class mainA{
protected token:string;
protected controlOBJ:any;
constructor(_token:string){
this.token = _token;
console.log('token'+this.token);
this.controlOBJ = new controlA(this.token);
}
}
control.ts
export class controlA{
protected verifyToken:string;
constructor(_verifyToken:string){
this.verifyToken = _verifyToken;
console.log('verifyToken'+this.verifyToken);
}
}
index.js
var express = require('express');
var router = express.Router();
//////////////
var mainA = require('../dist/main).default;
new mainA('token');
// try not work TypeError: mainA is not a constructor
var mainA = require('../dist/main).mainA; // try not work
new mainA('token');
// try not work TypeError: mainA is not a constructor
var mainA = require('../dist/main);
new mainA.mainA('token');
// try not work TypeError: mainA is not a constructor
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './ctrl/main.ts',
resolve: {
extensions: [".webpack",".tsx", ".ts", ".js"]
},
module: {
loaders: [
{ test: /.ts$/, loader: 'ts-loader' , exclude: /node_modules/} //awesome-typescript-loader
]
},
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
}
**** test with
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts-loader' }
]
}
not work
module: {
rules: [
{
test: /\.ts$/,
exclude: path.resolve(__dirname, 'node_modules'),
use: {
loader: 'babel-loader',
options: {
presets: [ 'env' ],
plugins: [ 'transform-runtime' ]
}
}
}
]
},
not work
var babelOptions = {
"presets": "es5"
};
module: {
rules: [{
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: babelOptions
},
{
loader: 'ts-loader'
}
]
}, {
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: babelOptions
}
]
}]
},
not work
tsconfig
{
"compileOnSave": true,
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"noImplicitAny": false,
"noEmitOnError": false,
"removeComments": true,
"sourceMap": false,
"inlineSources": false,
"preserveConstEnums": true,
"declaration": false,
"noEmit": false,
"noLib": false,
"allowJs": false
},
"exclude": [
"*"
],
"files": [
"ctrl/interface.ts",
"ctrl/control.ts",
"ctrl/main.ts"
]
}
Please to help me
try for delete line header generator from webpack(dist/main.js) it work
why? T T