We Keep Coding

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

Webpack resolving incorrect file path for node_modules when building

Im having a real hard time with this one. I was keen to get into webpack and do a setup from the ground up most of my build is building apart from the section that populates the index.html file. Webpack is throwing an error like so
ERROR in Error: undefined:1
undefine__webpack_require__i/*! !../node_modules/lodash/lodash.js
I also get a similar error with css-loader
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
SyntaxError: Unexpected identifier
at Object../node_modules/css-loader/dist/cjs.js
The odd thing about this error is the start of the path which should be ./node_modules from the location webpack is building from but for some reason its assuming its ../node_modules
The full error is below if anyone could hazard a guess to why this is happening
ERROR in Error: undefined:1
undefine__webpack_require__i/*! !../node_modules/lodash/lodash.js */ "./node_modules/lodash/lodash.js"defined undefined=undefined undefinedrundefinedeundefinedqundefineduundefinediundefinedrundefinedeundef
ined(undefined"undefined!undefined!undefined.undefined.undefined/undefinednundefinedoundefineddundefinedeundefined_undefinedmundefinedoundefineddundefineduundefinedlundefinedeundefinedsundefined/undefinedl
undefinedoundefineddundefinedaundefinedsundefinedhundefined/undefinedlundefinedoundefineddundefinedaundefinedsundefinedhundefined.undefinedjundefinedsundefined"undefined)undefined;undefinedmundefinedoundef
ineddundefineduundefinedlundefinedeundefined.undefinedeundefinedxundefinedpundefinedoundefinedrundefinedtundefinedsundefined undefined=undefined undefinedfundefineduundefinednundefinedcundefinedtundefinedi
undefinedoundefinednundefined undefined(undefinedtundefinedeundefinedmundefinedpundefinedlundefinedaundefinedtundefinedeundefinedPundefinedaundefinedrundefinedaundefinedmundefinedsundefined)
SyntaxError: Unexpected string
- template.html:97 Object../node_modules/html-webpack-plugin/lib/loader.js!./src/template.html
C:/Random_Personal_Projects/experimental_cloud_storage/src/template.html:97:1
- template.html:21 __webpack_require__
C:/Random_Personal_Projects/experimental_cloud_storage/src/template.html:21:30
- template.html:85
C:/Random_Personal_Projects/experimental_cloud_storage/src/template.html:85:18
- template.html:88
C:/Random_Personal_Projects/experimental_cloud_storage/src/template.html:88:10
- index.js:247 HtmlWebpackPlugin.evaluateCompilationResult
[experimental_cloud_storage]/[html-webpack-plugin]/index.js:247:28
- index.js:161
[experimental_cloud_storage]/[html-webpack-plugin]/index.js:161:23
The webpack config looks like so
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: ['babel-polyfill', './src/index.jsx'],
target: 'web',
resolve: {
modules: ['node_modules'],
extensions: ['.js', '.jsx'],
},
output: {
path: path.resolve(__dirname, 'wwwroot'),
filename: 'bundle.js',
publicPath: '/',
},
module: {
rules: [
{
enforce: 'pre',
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'eslint-loader',
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
{
test: /\.svg$/,
loader: 'svg-inline-loader',
},
{
test: /\.json$/,
use: ['json-loader'],
type: 'javascript/auto',
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
fallback: 'file-loader',
name: '[name].[ext]',
outputPath: 'assets/',
publicPath: '/assets/',
},
},
],
},
{
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
{
loader: 'fast-sass-loader',
options: {
sourceMap: true,
data: '#import "app.scss";',
includePaths: [path.resolve(__dirname, 'src/styles/sass')],
},
},
],
},
],
},
devtool: 'cheap-module-eval-source-map',
plugins: [
new StyleLintPlugin({
syntax: 'scss',
}),
new MiniCssExtractPlugin({
filename: 'style.bundle.css',
}),
new HtmlWebpackPlugin({
template: './src/template.html',
filename: './index.html',
favicon: './src/assets/img/favicon.png',
}),
],
};
My babel config looks like this
module.exports = {
presets: [
[
'#babel/preset-env', {
targets: { esmodules: true },
},
],
'#babel/preset-react',
],
plugins: [
'#babel/plugin-transform-runtime',
'#babel/plugin-proposal-object-rest-spread',
['inline-react-svg', {
svgo: {
plugins: [
{
removeTitle: true,
},
{
removeAttrs: { attrs: '(data-name)' },
},
],
},
}],
],
};
And the package.json looks like this
{
"name": "experimental_cloud_storage",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.4.1",
"firebase": "^7.8.2",
"node-sass": "^4.13.1",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"redux": "^4.0.5",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"sweetalert": "^2.1.2",
"sweetalert2": "^9.7.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"watch": "webpack --config webpack.dev.js --watch"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "^7.6.4",
"#babel/plugin-proposal-object-rest-spread": "^7.6.2",
"#babel/plugin-transform-runtime": "^7.6.2",
"#babel/preset-env": "^7.6.3",
"#babel/preset-react": "^7.6.3",
"autoprefixer": "^8.4.1",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"babel-plugin-inline-react-svg": "^1.1.0",
"babel-plugin-lodash": "^3.3.4",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^3.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "^6.5.1",
"eslint-config-airbnb": "^18.0.1",
"eslint-loader": "^3.0.2",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.16.0",
"fast-sass-loader": "^1.5.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"jest": "^23.0.0",
"jest-cli": "^23.0.0",
"jest-html-reporter": "^2.5.0",
"jest-localstorage-mock": "^2.4.0",
"jest-teamcity-reporter": "^0.9.0",
"json-loader": "^0.5.7",
"mini-css-extract-plugin": "^0.4.5",
"mock-socket": "^8.0.5",
"node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^2.1.4",
"precss": "^4.0.0",
"react-inlinesvg": "^1.1.7",
"react-svg-loader": "^3.0.3",
"redux-mock-store": "^1.5.4",
"resolve-url-loader": "^3.1.0",
"speed-measure-webpack-plugin": "^1.3.1",
"style-loader": "^0.21.0",
"stylelint": "^9.10.1",
"stylelint-config-airbnb": "0.0.0",
"stylelint-config-recommended-scss": "^3.2.0",
"stylelint-order": "^0.8.1",
"stylelint-scss": "^3.5.4",
"stylelint-webpack-plugin": "^0.10.4",
"svg-inline-loader": "^0.8.0",
"terser-webpack-plugin": "^2.1.3",
"url-loader": "^2.2.0",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack-merge": "^4.2.2",
"webpack-plugin-replace": "^1.2.0"
}
}
Cheers in advance as this one has had me stuck for over an hour with nothing seeming to do the trick from aliasing the modules folder including the modules: ['node_modules'] in the resolve part of the config to a whole variety of different things.
From looking around I think its something to do with the HtmlWebpackPlugin but I could be completely wrong on that one

So after hours of debugging I have finally found what was causing the issue.
when the script strats via npm it calls webpack.dev.js which merges the common setup with the dev setup. i removed all the values from
plugins: [
new ReplacePlugin({
exclude: [
/node_modules/,
/obj/,
/Properties/,
/react/,
/redux/,
/\.js$/,
],
values: {}, <--- here leaving im assuming lodash to freak out as it was trying to merge nothing.
}),
],
After i removed the plugins from that file everything was fine as im again assuming that the plugin wasnt being called with no arguments.

webpack: custom style is missing after production build

I've updated my webpack file. Now it's won't apply my custom style to the main style bundle. No errors, classes with custom style just missing in bundle.
When I'm running build with development mode - everything is ok and my styles are exist in the bundle. Such happens only with production build.
I tried extract-text-webpack-plugin instead mini-css-extract-plugin but result is same - in prod build my styles are missing.
I'll be very apriciated for any kind of help.
Here is files:
webpack.config.js
const path = require('path');
const fs = require('fs');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const autoprefixer = require('autoprefixer');
const lessToJs = require('less-vars-to-js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const publicPath = 'public';
const themeVariables = lessToJs(
fs.readFileSync(path.join(__dirname, './assets/style/ant-theme-vars.less'), 'utf8'),
);
module.exports = (env, options) => {
const mode = env ? env.mode : options.mode;
return {
entry: './assets/app.jsx',
output: {
path: path.resolve(__dirname, publicPath),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: 'last 2 version',
}),
],
},
},
{
loader: 'less-loader',
options: {
javascriptEnabled: true,
modifyVars: themeVariables,
},
},
],
},
{
test: /\.s?css$/,
exclude: [/node_modules/],
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: 'last 2 version',
}),
],
},
},
{
loader: 'sass-loader',
},
],
},
{
test: /\.jsx?$/,
exclude: [/node_modules/],
loaders: ['babel-loader'],
resolve: { extensions: ['.js', '.jsx'] },
},
{
test: /\.(png|jpg|jpeg|gif|svg|ico)$/,
exclude: [/node_modules/],
use: [
{
loader: 'file-loader',
options: {
name: 'img/[name].[ext',
},
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 70,
},
},
},
],
},
{
test: /\.(otf|ttf|woff|woff2)$/,
exclude: [/node_modules/],
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]',
},
},
],
},
plugins: [
new CleanWebpackPlugin(publicPath, {}),
new MiniCssExtractPlugin({
filename: 'bundle.css',
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './assets/www/index.html',
}),
],
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: true,
mangle: true,
warnings: false,
drop_console: true,
unsafe: true,
},
sourceMap: true,
}),
],
},
devServer: {
contentBase: path.join(__dirname),
compress: true,
port: 9000,
publicPath: '/',
historyApiFallback: true,
},
devtool: mode === 'development' ? 'cheap-inline-module-source-map' : '',
};
};
package.json
{
"name": "react-templates",
"version": "1.0.0",
"description": "",
"main": "bundle.js",
"sideEffects": false,
"scripts": {
"build": "webpack --progress --mode production",
"build-dev": "webpack -p --progress --mode development",
"start": "webpack-dev-server --mode production --open",
"eslint": "eslint . --ext .js --ext .jsx",
"stylelint": "stylelint assets/scss",
"deploy-current-branch-dev": "npm run build-dev && firebase deploy",
"deploy-dev": "git checkout -- . && git clean -fd && git checkout develop && git remote update && git pull && npm run build-dev && firebase deploy"
},
"author": "",
"license": "ISC",
"dependencies": {
"antd": "3.8.2",
"autoprefixer": "9.0.1",
"brace": "0.11.1",
"clean-webpack-plugin": "0.1.19",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"fast-async": "^6.3.8",
"file-system": "2.2.2",
"firebase": "5.3.0",
"history": "4.7.2",
"html-webpack-plugin": "^3.2.0",
"less-vars-to-js": "1.3.0",
"lodash": "^4.17.11",
"mini-css-extract-plugin": "^0.4.3",
"moment": "2.22.2",
"optimize-css-assets-webpack-plugin": "5.0.0",
"prop-types": "15.6.2",
"react": "15.6.1",
"react-ace": "6.1.4",
"react-copy-to-clipboard": "5.0.1",
"react-dom": "15.6.1",
"react-favicon": "0.0.14",
"react-redux": "5.0.7",
"react-router": "4.3.1",
"react-router-dom": "4.3.1",
"react-sticky": "^6.0.3",
"redux": "4.0.0",
"redux-devtools-extension": "2.13.5",
"redux-logger": "3.0.6",
"redux-thunk": "2.3.0",
"uglifyjs-webpack-plugin": "^2.0.1",
"webpack": "^4.16.1",
"webpack-merge": "^4.1.4"
},
"devDependencies": {
"#babel/core": "^7.1.2",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"babel-eslint": "8.2.6",
"babel-loader": "^8.0.4",
"babel-plugin-import": "^1.9.1",
"css-loader": "1.0.0",
"eslint": "4.19.1",
"eslint-config-airbnb": "17.0.0",
"eslint-plugin-import": "2.12.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.9.1",
"file-loader": "^2.0.0",
"husky": "1.0.0-rc.13",
"image-webpack-loader": "^4.3.1",
"less": "3.8.1",
"less-loader": "4.1.0",
"node-sass": "4.9.2",
"postcss-loader": "2.1.6",
"sass-loader": "7.0.3",
"style-loader": "0.21.0",
"stylelint": "9.4.0",
"stylelint-config-recommended": "2.1.0",
"webpack-bundle-analyzer": "^3.0.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
},
"husky": {
"hooks": {
"pre-commit": "npm run eslint && npm run stylelint"
}
}
}
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties",
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
}

The probplem is sideEffects: false in my package.json file.
I found an issue on Github and there are some issues related to it.
Main reason I did it - I wanted to make a tree shank in my development mode. It worked as I expected but in production mode all my custom styles are missing. To solve this problem I just removed sideEffects: false. So I lost tree shank in dev mode (think it's not good solution to make it in development mode but however).

TypeError: Attempting to change enumerable attribute of unconfigurable property (Vue.js SPA)(Webpack 4)(iPhone 6S)(iOS Safari)

(2018-July-29)
1. Background (Tech Stack)
Vue.js 2 (I am building a Single Page Application(SPA) with Vuex, vue-router)
Webpack 4
2. Problem
Visit my website in iOS Safari,
got white screen (because JS error, so nothing render)
3. Screenshot
Zoom in the error mesage
3. Error message
TypeError: Attempting to change enumerable attribute of unconfigurable property.
4. How to reproduce?
Visit https://browserstack.com
Choose iPhone 6S Safari
Visit https://wittcism.com
3. My Config
/webpack.config.js
var path = require('path')
var webpack = require('webpack')
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin'); // https://github.com/webpack-contrib/copy-webpack-plugin
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js',
},
module: {
rules: [{
test: /\.md$/,
use: 'raw-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
],
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minify: true }
}
]
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': path.resolve(__dirname, './src/'),
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.output = {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: '[name].[hash].js',
},
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
}),
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Wittcism',
filename: './index.html',
template: './template/index.html',
minify: true,
}),
])
}
.babelrc
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}
package.json
{
"name": "hide",
"description": "hide",
"version": "1.1.0",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --port 8081 --host 0.0.0.0",
"build": "cross-env NODE_ENV=production webpack --mode production --progress --hide-modules"
},
"dependencies": {
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.1.1",
"bootstrap-vue": "^2.0.0-rc.11",
"es6-promise": "^4.2.4",
"jstransformer-verbatim": "^1.1.1",
"jwt-decode": "^2.2.0",
"moment": "^2.22.2",
"qiniu-js": "^2.4.0",
"tippy.js": "^2.5.4",
"tui-editor": "^1.2.3",
"v-tooltip": "^2.0.0-rc.33",
"vue": "^2.5.11",
"vue-carousel": "^0.10.0",
"vue-i18n": "^8.0.0",
"vue-markdown": "^2.2.4",
"vue-router": "^3.0.1",
"vuelidate": "^0.7.4",
"vuex": "^3.0.1"
},
"browserslist": [
"> 1%",
"last 2 versions",
"ie 6-8"
],
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-3": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.2",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.9.0",
"pug": "^2.0.3",
"pug-loader": "^2.4.0",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.7",
"style-loader": "^0.21.0",
"vue-loader": "^14.2.2",
"vue-template-compiler": "^2.4.4",
"webpack": "^4.16.3",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^2.9.1"
}
}
Question: How to fix: TypeError: Attempting to change enumerable attribute of unconfigurable property?
My Guess: iOS Safari doesn't support ES6 fully