webpack PurgeCSS webpack Plugin not working as expected - javascript

I want to purge unused CSS from the Clarity UI CSS file, in a setup using webpack and purgecss-webpack-plugin.
However, while the size of the CSS file is reduced from 565kB to 172kB, it should be reduced to 0kB since I don't use any of it. If I do the same thing using Bootstrap, the filesize is reduced to 1kB.
Why is that behaviour and is there a fix?
My folder structure is as follows:
|-dist
|
|-node_modules
|
|-src
|--index.js
|
|.babelrc
|package.json
|webpack.config.js
My package.json:
{
"name": "webpack-clarity",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"start": "node ./index.js",
"build": "webpack"
},
"dependencies": {
"#clr/ui": "^4.0.0",
"bootstrap": "^4.5.2"
},
"devDependencies": {
"#babel/core": "^7.10.4",
"#babel/preset-env": "^7.10.4",
"babel-loader": "^8.1.0",
"css-loader": "^3.6.0",
"glob": "^7.1.6",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^0.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"purgecss-webpack-plugin": "^2.3.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}
webpack.config.js
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const glob = require("glob");
const PurgeCSSPlugin = require("purgecss-webpack-plugin");
module.exports = {
mode: "production",
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
},
optimization: {
minimizer: [new OptimizeCssAssetsPlugin(), new TerserPlugin()],
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
plugins: [
new MiniCssExtractPlugin({ filename: "[name].css" }),
new PurgeCSSPlugin({
paths: glob.sync("./src/**/*.js", { nodir: true }),
}),
],
};
.babelrc
{
"presets": [
[
"#babel/preset-env",
{"modules": false}
]
]
}
index.js
import "../node_modules/#clr/ui/clr-ui.min.css";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Related

Babel Errors in Webpack Configs after Updating Webpack

I am trying to update Webpack to a newer versions (by removing node_modules then running yarn), but I am not able to solve all the config errors shown below.
So far in the Webpack config, I have changed query to options, and loaders to rules. In package.json, I have replaced --colors with --color.
Original webpack.config.js [Source]:
const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
entry: {
background: path.join(__dirname, './src/background'),
entry: path.join(__dirname, './src/entry'),
},
output: {
path: path.join(__dirname, './dist'),
filename: '[name].js',
},
plugins: [
new CopyWebpackPlugin([
{ from: 'src/manifest.json' },
{ from: 'images/**/*' }
]),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
],
resolve: {
extensions: ['.js']
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0']
},
exclude: /node_modules/
}]
}
}
Current webpack.config.js:
const path = require("path");
const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
entry: {
background: path.join(__dirname, "./src/background"),
entry: path.join(__dirname, "./src/entry"),
},
output: {
path: path.join(__dirname, "./dist"),
filename: "[name].js",
},
plugins: [
new CopyWebpackPlugin([
{ from: "src/manifest.json" },
{ from: "images/**/*" },
]),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production"),
},
}),
],
resolve: {
extensions: [".js"],
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
options: {
presets: ["react", "es2015", "stage-0"],
},
exclude: /node_modules/,
},
],
},
};
Still many of the following errors...
ERROR in ./src/background.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'babel' of undefined
at Object.module.exports (/home/gameveloster/sidebar/node_modules/babel-loader/lib/index.js:103:36)
but there's no babel in the files stated in the errors, like ./src/background.js.
What is the correct way to fix this issue? Thanks!
package.json:
{
"name": "sidebar",
"private": true,
"version": "0.1.0",
"main": "dist/entry.js",
"license": "UNLICENSED",
"scripts": {
"build": "webpack --progress --profile --color",
"watch": "webpack --watch --progress --color",
"dev": "npm run watch"
},
"dependencies": {
"chrome-sidebar": "file:../chrome-sidebar",
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"babel-core": "6.24.0",
"babel-eslint": "^7.2.3",
"babel-generator": "6.24.0",
"babel-loader": "6.4.1",
"babel-plugin-module-resolver": "2.6.2",
"babel-plugin-react-require": "3.0.0",
"babel-plugin-transform-class-properties": "6.22.0",
"babel-plugin-transform-es2015-modules-commonjs": "6.24.0",
"babel-plugin-transform-object-rest-spread": "6.22.0",
"babel-plugin-transform-react-jsx-source": "6.22.0",
"babel-plugin-transform-react-remove-prop-types": "0.3.3",
"babel-plugin-transform-runtime": "6.22.0",
"babel-preset-env": "^1.4.0",
"babel-preset-latest": "6.24.0",
"babel-preset-node6-es6": "^11.2.5",
"babel-preset-react": "6.23.0",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "6.23.0",
"copy-webpack-plugin": "^4.0.1",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2"
}
}

Webpack: How to rewrie URL in .css

For 3 days straight I am having a trouble to setup Webpack for staging purposes.
The goal is to rewrite url of assets in final .css file (frontend.css) like this:
Let's say that in .scss file I have:
background: url('/assets/image.png') (this works for dev and prod)
and in final outputted .css file for staging, I want it to be:
background: url('https://stage.domain.com/staging/project-name/assets/image.png')
I have script npm run stage, that build js. and .css only for staging puposes.
It creates stage dir on root with two files frontened-bundle.js and frontend.css. (see bottom of "Files structure" screenshot).
I tried to rewrite url with resolve-url-loader with root parameter, but I cant get it working.
publicPath is also ignored.
I am not sure what I am doing wrong.
Please point me in right direction.
Files structure:
webpack.stage.js:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const public_path = 'https://stage.domain.com/staging/project-name/'
module.exports = {
context: __dirname,
entry: {
frontend: [
'./src/js/index.js',
'./src/scss/main.scss'
],
// customizer: './src/customizer.js'
},
resolve: {
extensions: ['.ts', '.js', '.jsx', '.scss', '...',],
},
output: {
path: path.resolve(__dirname, 'stage'),
publicPath: public_path,
filename: '[name]-bundle.js'
},
mode: 'production',
// devtool: 'cheap-eval-source-map',
module: {
rules: [
{
enforce: 'pre',
exclude: /node_modules/,
test: /\.jsx$/,
loader: 'eslint-loader'
},
{
test: /\.jsx?$/,
loader: 'babel-loader'
},
{
test: /\.s?css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: public_path,
sourceMap: true
}
},
{
loader: 'css-loader',
options: {
url: false,
sourceMap: true
}
},
{
loader: 'resolve-url-loader',
options: {
// root: path.join(__dirname, './'), // returns url("../../assets/assets/fonts/NewYork.woff2")
// root: '/', // returns url('../../../../../../assets/fonts/NewYork.woff2')
// root: './', // returns url('../../assets/fonts/NewYork.woff2')
attempts: 1,
debug: true,
sourceMap: true,
publicPath: public_path,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
},
]
},
{
test: /\.(ttf|woff|woff2|eot|jpe?g|png|svg|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
// outputPath: '../',
publicPath: publicPath,
},
},
'img-loader',
'url-loader',
]
}
]
},
plugins: [
// new StyleLintPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css'
}),
],
optimization: {
// minimizer: [new UglifyJsPlugin(), new OptimizeCssAssetsPlugin()]
}
};
package.json
{
"name": "project_name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode=production",
"dev": "webpack --watch",
"stage": "npm run clean && webpack --config webpack.stage.js -p --progress --profile",
"clean": "rm -rf stage"
},
"repository": {
"type": "git",
"url": ""
},
"keywords": [
"webpack"
],
"author": "",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": "",
"devDependencies": {
"#babel/cli": "^7.14.5",
"#babel/core": "^7.6.2",
"#babel/preset-env": "^7.6.2",
"autoprefixer": "^9.6.4",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"browser-sync": "^2.27.4",
"browser-sync-webpack-plugin": "^2.2.2",
"css-loader": "^3.2.0",
"css-mqpacker": "^7.0.0",
"eslint": "^6.5.1",
"eslint-config-prettier": "^6.4.0",
"eslint-config-wordpress": "^2.0.0",
"eslint-loader": "^3.0.2",
"eslint-plugin-prettier": "^3.1.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^4.2.0",
"img-loader": "^3.0.1",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"prettier": "^1.18.2",
"resolve-url-loader": "^4.0.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"stylelint": "^11.0.0",
"stylelint-config-recommended-scss": "^4.0.0",
"stylelint-config-wordpress": "^15.0.0",
"stylelint-order": "^3.1.1",
"stylelint-scss": "^3.11.1",
"stylelint-webpack-plugin": "^1.0.1",
"svg-sprite-loader": "^4.1.6",
"svgo": "^1.3.0",
"svgo-loader": "^2.2.1",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^4.1.1",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"wp-pot-cli": "^1.5.0"
},
"dependencies": {
"#babel/polyfill": "^7.6.0",
"imagemin": "^8.0.0",
"jquery": "^3.6.0"
}
}
I've had this similar issue in the past, I tried the below from the docs,
const ASSET_PATH = process.env.ASSET_PATH || '/';
export default {
output: {
publicPath: ASSET_PATH,
},
plugins: [
// This makes it possible for us to safely use env vars on our code
new webpack.DefinePlugin({
'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH),
}),
],
};
But actually, the one that worked perfectly for my issue is below, while the public path was the CDN link from where the assets were served
require('dotenv').config();
__webpack_public_path__ = config.publicPath // publicPath is process.env.ASSET_PATH || '/';
When you set the publicPath as "../" did you also try the useRelativePaths: true?
Ref:- https://github.com/webpack-contrib/file-loader#userelativepath

the error gives the npm name of a package that does not exist

An error appeared - Cannot find the module, but the problem is that such a module does not exist. The correct module name is babel-plugin-proposal-class-properties (and the error - 'babel-plugin-transform-class-propties'). Please tell me what could be the problem.
I type "npm run start:dev" into the terminal and I get the error output.
webpack.config.js:
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const TerserJSPlugin = require('terser-webpack-plugin') // min js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin') // min css
const autoprefixer = require('autoprefixer-stylus')
const devMode = process.env.NODE_ENV !== 'production'
// dev - devMode = true
// prod - devMode = false
const jsLoaders = () => {
const loaders = [
{
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
},
},
]
if (devMode) {
loaders.push('eslint-loader')
}
return loaders
}
module.exports = {
context: path.resolve(__dirname, 'frontend/src'),
// entry: ['#babel/polyfill', './index.js'],
entry: './index.js',
mode: 'development', // uncompress
output: {
// filename: 'bundle.[hash].js', // 'build.js',
// path: path.resolve(__dirname, 'dist'),
path: path.resolve(__dirname, 'frontend/static/frontend'),
filename: 'main.js'
},
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
resolve: {
// элиасы
extensions: ['.js'],
alias: {
'#': path.resolve(__dirname, 'frontend/src'),
fonts: path.join(__dirname, 'frontend/src/assets/fonts'),
},
},
devtool: devMode ? 'source-map' : false,
devServer: {
port: 5000,
hot: devMode,
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'frontend/templates/frontend/index.html'),
}),
new CopyPlugin({
patterns: [
{
// imgs
from: path.resolve(__dirname, 'frontend/src/assets/img'),
to: 'assets/img',
},
{
// fonts
from: path.resolve(__dirname, 'frontend/src/assets/fonts'),
to: 'assets/fonts',
},
],
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: devMode ? 'style.css' : 'style.[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
}),
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: jsLoaders(),
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development',
reloadAll: true,
},
},
'css-loader?url=false',
'sass-loader',
],
},
{
test: /\.styl$/,
use: [
{
loader: 'style-loader', // creates style nodes from JS strings
},
{
loader: MiniCssExtractPlugin.loader,
options: { publicPath: 'frontend/dist' },
},
{ loader: 'css-loader' },
// {loader: 'stylus-loader'},
{
loader: 'stylus-loader', // compiles Stylus to CSS
options: {
use: [autoprefixer()],
},
},
],
},
{
test: /\.pug$/,
loader: 'pug-loader',
options: {
pretty: true,
},
},
{
test: /\.(png|svg|jpg|gif|eot|ttf|woff|woff2)$/,
loader: 'url-loader',
options: {
publicPath: './',
limit: 10000,
},
},
],
},
}
package.json
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --open",
"start:dev": "cross-env NODE_ENV=development webpack serve",
"build": "cross-env NODE_ENV=production webpack --mode=production",
"test": "jest"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/preset-env": "^7.12.11",
"#babel/preset-react": "^7.12.10",
"autoprefixer-stylus": "^1.0.0",
"babel-eslint": "^10.1.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^7.0.0",
"cross-env": "^7.0.3",
"css-loader": "^5.0.1",
"eslint": "^7.18.0",
"eslint-config-google": "^0.14.0",
"eslint-loader": "^4.0.2",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.0.0-beta.6",
"jest": "^26.6.3",
"mini-css-extract-plugin": "^1.3.4",
"node-sass": "4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"postcss-loader": "^4.1.0",
"pug": "^3.0.0",
"pug-loader": "^2.4.0",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"stylus": "^0.54.8",
"stylus-loader": "^4.3.3",
"terser-webpack-plugin": "^5.1.1",
"url-loader": "^4.1.1",
"webpack": "^5.17.0",
"webpack-cli": "^4.4.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"#babel/polyfill": "^7.12.1",
"#leanup/cli": "^1.0.90",
"#leanup/cli-preact": "^1.0.90",
"babel-loader": "8.2.1",
"browserslist": "^4.16.1",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
index.js - https://codepen.io/dev-sera/pen/mdObpwv
The error shows that you've misspelled "properties" as "propties", missing the "er" after the second "p" somewhere in index.js

Integrate React 17 with webpack 5 and babel-plugin-react-css-modules (css modules with stylename)

I am trying to setup a react app with latest versions.
React 17, Webpack 5 and other modules.
I need css modules with styleName concept by using babel-plugin-react-css-modules
Trying to run the code shows the output but no styles are applied.
package.json
{
"name": "react-app",
"version": "1.0.0",
"description": "React Template App",
"author": "",
"license": "ISC",
"main": "index.js",
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production",
"format": "prettier --write \"src/**/*.js\"",
"eslint-fix": "eslint --fix \"src/**/*.js\""
},
"dependencies": {
"babel-plugin-react-css-modules": "^5.2.6",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/preset-env": "^7.12.11",
"#babel/preset-react": "^7.12.10",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"css-loader": "^5.0.1",
"eslint": "^7.16.0",
"eslint-config-react": "^1.1.7",
"eslint-loader": "^4.0.2",
"eslint-plugin-react": "^7.21.5",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.5.0",
"less": "^4.0.0",
"less-loader": "^7.2.0",
"mini-css-extract-plugin": "^1.3.3",
"prettier": "2.2.1",
"style-loader": "^2.0.0",
"webpack": "^5.11.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
}
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: path.join(__dirname, "dist"),
open: true,
host: "localhost",
compress: true,
port: process.env.CLIENT_PORT,
hot: true,
quiet: false
},
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader']
},
{
test: /\.css$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
// "less-loader",
{
loader: 'css-loader',
options: {
modules: true,
}
}
],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
filename: "./index.html",
favicon: "./public/favicon.ico"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
devtool: 'inline-source-map',
};
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
[
"babel-plugin-react-css-modules",
{
"webpackHotModuleReloading": true,
"autoResolveMultipleImports": true
}
]
]
}
home.js
import React from "react";
import "./style.css";
const Home = () => {
return (
<div styleName="container">
<div styleName="title">Hello from Home CSS</div>
</div>
);
};
export default Home;
style.css
.container {
display: flex;
flex-direction: column;
}
.title {
font-size: 24px;
color: red;
}
That's interesting issue which requires us to do a few more things to make it work as following:
babel-plugin-react-css-modules isn't working properly with css-loader in case of generating the name. But luckily we have a work around by using a temporary fix of someone #dr.pogodin/babel-plugin-react-css-modules. So just install needed packages:
npm i -D #dr.pogodin/babel-plugin-react-css-modules postcss // postcss is required aslo
Reconfigure babel configuration by changing the name in .babelrc:
{
// ...
"plugins": [
[
"#dr.pogodin/babel-plugin-react-css-modules",
{
"webpackHotModuleReloading": true,
"autoResolveMultipleImports": true
}
]
]
}
Finally, we would change the class name to make it consistent between babel-plugin-react-css-modules and css-loader in webpack.config.js:
{
test: /\.css$/,
use: [
// ...
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[path]___[name]__[local]___[hash:base64:5]', // This pattern matches with the default in `babel-plugin-react-css-modules`
},
}
}
],
}

Webpack with sourcemap can't resolve variables in production mode

I would like to generate source maps for our production build with Webpack. I managed to generate it, but when I stop on a breakpoint in the debugger, variables are not resolved:
What am I doing wrong? How can I generate a source map that lets the chrome devtools resolve the variables once I stopped on a breakpoint in the debugger?
These are my webpack configurations:
webpack.config.js:
const path = require('path');
const ROOT = path.resolve( __dirname, 'src/main/resources/packedbundle' );
const HtmlWebpackPlugin = require('html-webpack-plugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
context: ROOT,
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'eslint-loader',
options: {
failOnError: true,
quiet: true
}
}
],
enforce: 'pre'
},
{
test: /\.ts$/,
exclude: [ /node_modules/ ],
use: [
'ng-annotate-loader',
'awesome-typescript-loader'
]
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader'],
publicPath: '../'
}),
},
{
test: /\.(jpg|png|gif)$/,
use: 'file-loader'
},
{
test: /\.(svg|woff|woff2|eot|ttf)$/,
use: 'file-loader?outputPath=fonts/'
},
{
test: /.html$/,
exclude: /index.html$/,
use: 'html-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'AngularJS - Webpack',
template: 'index.html',
inject: true
}),
new LoaderOptionsPlugin({
debug: true
}),
new ExtractTextPlugin('css/style.css')
],
entry: './index.ts'
};
webpack-prd.config.js:
const path = require('path');
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.config.js');
const DESTINATION = path.resolve( __dirname, 'dist/packedbundle' );
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = webpackMerge(commonConfig, {
devtool: 'module-source-map',
mode: 'production',
output: {
path: DESTINATION,
filename: 'js/[name]-bundle-[chunkhash].js'
},
optimization: {
minimizer: [
new UglifyJsPlugin({
sourceMap: true
})
]
}
});
package.json:
{
"name": "com.avon.maps.packedbundle.webcontent",
"version": "1.0.0",
"description": "Packed bundle creation screen frontend",
"main": "index.js",
"scripts": {
"prestart": "rimraf dist",
"start": "node node/node_modules/npm/bin/npx-cli.js check-node-version --package && webpack --config webpack-dev.config.js",
"prebuild": "rimraf dist",
"build": "node node/node_modules/npm/bin/npx-cli.js check-node-version --package && webpack --config webpack-prd.config.js",
"test": "mocha -r ts-node/register -r ignore-styles -r jsdom-global/register __tests__/**/*.spec.ts"
},
"author": "BlackBelt",
"private": true,
"engines": {
"node": "11.10.0"
},
"devDependencies": {
"#types/angular": "1.6.51",
"#types/angular-loading-bar": "0.0.35",
"#types/chai": "4.1.7",
"#types/core-js": "2.5.0",
"#types/jquery": "3.3.29",
"#types/kendo-ui": "2019.1.1",
"#types/mocha": "5.2.6",
"#types/node": "10.12.0",
"#types/underscore": "1.8.13",
"#types/webpack-env": "1.13.6",
"#typescript-eslint/eslint-plugin": "1.6.0",
"#typescript-eslint/parser": "1.6.0",
"acorn": "6.1.1",
"awesome-typescript-loader": "5.2.1",
"chai": "4.2.0",
"check-node-version": "3.2.0",
"css-loader": "1.0.0",
"eslint": "5.16.0",
"eslint-config-airbnb-base": "13.1.0",
"eslint-loader": "2.1.2",
"eslint-plugin-import": "2.16.0",
"extract-text-webpack-plugin": "v4.0.0-beta.0",
"file-loader": "2.0.0",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"ignore-styles": "5.0.1",
"istanbul-instrumenter-loader": "3.0.1",
"jsdom": "14.0.0",
"jsdom-global": "3.0.2",
"mocha": "6.1.2",
"ng-annotate-loader": "0.6.1",
"node-sass": "4.11.0",
"rimraf": "2.6.2",
"sass-loader": "7.1.0",
"style-loader": "0.23.1",
"ts-node": "8.0.3",
"typescript": "3.4.2",
"uglifyjs-webpack-plugin": "2.0.1",
"webpack": "4.23.1",
"webpack-cli": "3.1.2",
"webpack-merge": "4.1.4"
},
"dependencies": {
"angular": "1.7.5",
"core-js": "3.0.1",
"growl": "1.10.5",
"jquery": "3.3.1",
"underscore": "1.9.1"
}
}
I cannot share the source code, but I used this angularjs webpack starter project to start mine.
Issues with invalid sourcemaps in Webpack and terser-webpack-plugin are addressed starting with webpack 4.39.2 and terser-webpack-plugin 1.4.0.
v4.39.0 release log:
webpack-sources + terser-webpack-plugin comes with quality optimizations for SourceMaps
There was an additional issue, whose fix was published later. It was included for webpack-sources v1.4.2/webpack 4.39.2. In conclusion 4.39.2or latest version is the one to go.
Details
Sourcemaps in production mode seem to work as expected in most cases now. Unfortunately, if you have non trivial code transformations like inlining of functions (that exist in source code, but are dissolved from webpack) in the course of uglyfying/minification/optimization, breakpoints sometimes still don't get mapped well. Part of the reason is, that the sourcemap spec is vague concerning those aspects.

Categories