Errors cause webpack to not build - reactjs

I'm using Webpack to compile the front end of a website created in React.
For the development environment, in Windows's cmd.exe I run the yarn dev instruction and the webpack correctly produces the bundles in the /dist folder.
For the production environment, in Windows's cmd.exe I run the yarn production instruction but it does not produce any bundles due to some errors in my .ts files. Is it possible to ignore these errors and complete bundles production?
package.json:
{
"name": "prtj",
"version": "1.0.0",
"description": "",
"main": "entry.js",
"scripts": {
"dev": "webpack --env=development",
"production": "webpack --env=production"
},
"author": "PRG",
"license": "ISC",
"dependencies": {
"i18next": "^14.0.1",
"moment": "^2.24.0",
"react": "^16.4.0",
"react-day-picker": "^7.4.0",
"react-dom": "^16.4.0",
"react-i18next": "^9.0.10",
"react-idle-timer": "^4.2.3",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.85.0"
},
"devDependencies": {
"#types/node": "^10.12.12",
"#types/react": "^16.7.13",
"css-loader": "^2.0.0",
"file-loader": "^2.0.0",
"style-loader": "^0.23.1",
"ts-loader": "^5.3.3",
"typescript": "^2.5.3",
"url-loader": "^0.5.9",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1"
}
}
webpack.config.js:
const path = require('path');
const config = require('../common/config.js');
const webpackConfig = env => {
return {
mode: env === "development" ? "development" : "production",
entry: ["./src/Index.tsx"],
output: {
filename: "tfsBundle.js",
path: path.join(__dirname, "dist/")
},
devtool: env === "development" ? "cheap-eval-source-map" : false,
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ['.ts', '.tsx', '.js', '.jsx'],
modules: [
path.resolve('./node_modules/'),
path.resolve('./src')
]
},
module: {
rules: [
{
test: /\.(jsx|tsx|js|ts)$/,
loader: "ts-loader",
options: {
compilerOptions: {
target: env === "development" ? "ES6" : "es5"
}
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
}
]
},
devServer: {
host: "localhost",
contentBase: path.join(__dirname, "dist/")
},
externals: {
'Config': config.getConfig(env),
}
}
};

You can opt out using transpileOnly for .ts errors.
In your webpack.
{
test: /\.(tsx|ts)$/,
loader: "ts-loader",
options: {
transpileOnly: true
compilerOptions: { target: env === "development" ? "ES6" : "es5" } }
}

Related

How to remove source maps from webpack 5 #React.js #webpack 5

The common solution for removing source maps from a CRA build is to add "GENERATE_SOURCEMAPS=false react-scripts build" in package.json build scripts and/or "GENERATE_SOURCEMAPS=false" in the CRA .env file. However, I do not use Create React App. Therefore, "react-scripts build" is not recognized as an internal command, my .env file has no effect on the bundled code, and simply adding "GENERATE_SOURCEMAPS=false" to my build scripts does nothing. I would like to remove source maps from the webpack bundle. Here is my package.json.
{
"name": "reactboilerplate",
"version": "1.0.0",
"description": "boilerplate code",
"main": "index.js",
"presets":
[
"#babel/preset-env",
"#babel/preset-react"
],
"scripts":
{
"build": "cross-env GENERATE_SOURCEMAP=false webpack --watch",
"start": "webpack serve",
"build-prod": "weback -p",
"winBuild": "set \"GENERATE_SOURCEMAP=false\" && build"
},
"keywords": [],
"author": "ziggy",
"license": "NONE",
"devDependencies":
{
"#babel/core": "^7.16.7",
"#babel/preset-env": "^7.16.8",
"#babel/preset-react": "^7.16.7",
"babel-loader": "^8.2.3",
"css-loader": "^6.5.1",
"file-loader": "^6.2.0",
"html-loader": "^3.1.0",
"html-webpack-plugin": "^5.5.0",
"node-polyfill-webpack-plugin": "^1.1.4",
"style-loader": "^3.3.1",
"webpack": "^5.66.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.7.3"
},
"dependencies":
{
"#aws-amplify/ui-react": "^2.1.9",
"aws-amplify": "^4.3.12",
"aws-amplify-react": "^5.1.9",
"bootstrap": "^5.1.3",
"pandadoc-node-client": "^4.1.0",
"react": "^17.0.2",
"react-bootstrap": "^2.1.1",
"react-dom": "^17.0.2",
"typewriter-effect": "^2.18.2"
}
}
Here is my webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output:
{
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
resolve:
{
modules: [path.join(__dirname, 'src'), 'node_modules'],
alias: { react: path.join(__dirname, 'node_modules', 'react') }
},
plugins:
[
new NodePolyfillPlugin(),
new HtmlWebpackPlugin({ template: './src/index.html' }),
],
module:
{
rules: [
{
test: /\.css/i,
use: ['style-loader', 'css-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
use:
{
loader: "babel-loader",
options:
{
presets: ['#babel/preset-env', '#babel/preset-react']
}
}
},
{
test: /\.(png|mp4)$/i,
type: "asset/resource"
},
{
test: /\.txt$/i,
type: 'asset/source'
},
{
test: /\.(woff|woff2|ttf)$/i,
type: "asset/resource"
},
{
test: /\.html$/,
use: ["html-loader"]
},
{
test: /\.(mov|mp4)$/,
use:
[
{
loader: 'file-loader',
options:
{
name: '[name].[ext]'
}
}
]
},
{
test: /\.m?js/,
resolve:
{
fullySpecified: false
}
},
]
}
}

Webpack live reload says "nothing changed" even if I modify a file. Why?

I have a react project and I'm using Webpack (webpack-dev-server) for my development.
Everything compiles well, and when I make a change in my file (for the first time), the live reloading works well.
BUT, after changing the same file twice (or more), the live reloading stop working. In the console it says "nothing changed" even when I made a change.
Looks like the webpack-dev-server memory doesn't pick up the change. Any idea why?
Webpack Config
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ProvidePlugin } = require("webpack");
module.exports = {
target: "web",
mode: "development",
entry: ["regenerator-runtime/runtime.js", "./src/index.js"],
devtool: "inline-source-map",
devServer: {
historyApiFallback: true,
hot: true,
port: 8080,
static: "./dist",
watchFiles: "src/**/*,js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "index_bundle.js",
},
resolve: { extensions: ["*", ".js", ".jsx"] },
module: {
rules: [
{
test: /\.(jsx|js)$/,
exclude: /(node_modules)/,
use: [
{
loader: "babel-loader",
options: {
presets: ["#babel/env", "#babel/react"],
},
},
],
},
{
test: /\.css$/,
// exclude: /node_modules/,
use: ["style-loader", "css-loader"],
},
{
test: /\.svg$/,
use: [
{
loader: "svg-url-loader",
options: {
limit: 10000,
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html",
title: "Development",
}),
new ProvidePlugin({
React: "react",
}),
],
};
Package.json
{
"name": "timerfrontend",
"version": "1.0.0",
"main": "index.js",
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve",
"create": "webpack -w",
"build": "webpack -p"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.16.5",
"#babel/preset-env": "^7.16.5",
"#babel/preset-react": "^7.16.5",
"babel-loader": "^8.2.3",
"css-loader": "^6.5.1",
"html-webpack-plugin": "^5.3.1",
"style-loader": "^3.3.1",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0"
},
"dependencies": {
"#apollo/client": "^3.5.6",
"#apollo/link-context": "^2.0.0-beta.3",
"#apollo/react-hooks": "^4.0.0",
"#auth0/auth0-react": "^1.8.0",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link-http": "^1.5.17",
"bootstrap": "^5.0.1",
"dayjs": "^1.10.5",
"npm-force-resolutions": "^0.0.10",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.1.1",
"regenerator-runtime": "^0.13.9",
"svg-url-loader": "^7.1.1"
},
"description": "",
"resolutions": {
"react": "17.0.2",
"graphql": "16.1.0"
}
}
I found the solution (hint: its weird)
I realized that my Webpack live reloading was working on my other components (except the I had issue with).
I finally resolved to deleting that component and create a new one (exact copy) and then it worked perfectly!?
I still don't know why Webpack didn't like this component specifically...
It was happening to me, I checked the files and class names, they have to be exactly the same, including caps and lowercase letters
In my case, the file I was modified is not being use anywhere in project, so webpack does not recognize it.
After import and use it in the code, then it work fine

./components/Avatar.tsx Error: Cannot find module '#babel/preset-stage-0'

After a few hours of research, I still haven't solved an issue I've been having with Babel and Webpack. ): I'm sure the solution is simple.
My .babelrc:
{
"presets": ["#babel/preset-env", "#babel/preset-react", "#babel/preset-stage-0"]
}
My package.json
{
"name": "sabrinasbase",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"chokidar": "^3.5.1",
"css-modules-typescript-loader": "^4.0.1",
"next": "10.0.5",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-particles-js": "^3.4.1",
"react-tsparticles": "^1.18.11",
"sass": "^1.32.5",
"three": "^0.124.0"
},
"devDependencies": {
"#babel/cli": "^7.12.10",
"#babel/core": "^7.12.10",
"#babel/preset-env": "^7.12.11",
"#babel/preset-react": "^7.12.10",
"#babel/preset-stage-0": "^7.8.3",
"#babel/register": "^7.12.10",
"#types/node": "^14.14.22",
"#types/react": "^17.0.0",
"babel-loader": "^8.2.2",
"typescript": "^4.1.3",
"url-loader": "^4.1.1",
"webpack": "^5.16.0",
"webpack-cli": "^4.4.0",
"webpack-dev-middleware": "^1.2.0",
"webpack-hot-middleware": "^2.0.0"
},
"resolutions": {
"#babel/core": "^7.12.10"
}
}
My webpack.config.js
var path = require("path");
module.exports = {
//mode: "production",
mode: "development",
devtool: "inline-source-map",
context: path.join(__dirname, "pages"),
entry: ["/_app.js" /*main*/],
output: {
filename: "./bundle.js", // in /dist
},
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: [".ts", ".tsx", ".js", ".css", ".scss"],
},
module: {
rules: [
{ test: /\.tsx?$/, loader: "ts-loader" },
{
test: /\.scss$/,
use: [
{ loader: "style-loader" }, // to inject the result into the DOM as a style block
{ loader: "css-modules-typescript-loader" }, // to generate a .d.ts module next to the .scss file (also requires a declaration.d.ts with "declare modules '*.scss';" in it to tell TypeScript that "import styles from './styles.scss';" means to load the module "./styles.scss.d.td")
{ loader: "css-loader", options: { modules: true } }, // to convert the resulting CSS to Javascript to be bundled (modules:true to rename CSS classes in output to cryptic identifiers, except if wrapped in a :global(...) pseudo class)
{ loader: "sass-loader" }, // to convert SASS to CSS
// NOTE: The first build after adding/removing/renaming CSS classes fails, since the newly generated .d.ts typescript module is picked up only later
],
},
{
test: /\.png|jpg|gif$/i,
use: [
{
loader: "url-loader",
options: {
limit: 8192,
},
},
],
},
{ test: /\.js|tsx|ts$/, loader: "babel-loader", exclude: /node_modules/ },
],
},
};
All I want to do is import a picture into a component. Originally I was getting Plugin/Preset files are not allowed to export objects, only functions error, but now I am getting vaguer errors that the module isn't working correctly. There were a few times that the Webpack would compile successfully, but the file I wanted to use wouldn't. Is there anything I am missing? I promise I am installing the preset-stage-0 package.
Error: Cannot find module '#babel/preset-stage-0'
Require stack:
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\compiled\babel\bundle.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\compiled\babel\code-frame.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\lib\typescript\diagnosticFormatter.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\lib\typescript\runTypeCheck.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\lib\verifyTypeScriptSetup.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\server\next-dev-server.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\server\next.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\server\lib\start-server.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\cli\next-dev.js
- C:\Users\Sabri\Documents\GitHub\sabrinasbase\sabrinasbase\node_modules\next\dist\bin\next
at Array.map (<anonymous>)
at Generator.next (<anonymous>)
at loadFileChain.next (<anonymous>)
Not sure why you are getting this error
Here is my webpack which works as expected
Also, apologies in advance as I have done heck load of optimization to reduce bundle size
Webpack.config.base.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const CopyPlugin = require("copy-webpack-plugin");
const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');
const {WebpackManifestPlugin} = require('webpack-manifest-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const PurifyCssPlugin = require('purifycss-webpack');
const glob = require("glob");
module.exports = {
target: 'web',
stats: 'verbose',
output: {
path: __dirname + '/dist',
filename: '[name].[hash].bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: './'
}
}, 'css-loader']
},
{
test: /\.scss$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: './'
}
}, 'css-loader', 'sass-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true, // webpack#1.x
disable: true, // webpack#2.x and newer
mozjpeg: {
progressive: true,
},
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false,
},
},
}
]
}
]
},
plugins: [
new CopyPlugin({
patterns: [
{from: "icons", to: "icons"},
{from: "./manifest.webmanifest", to: ""},
{from: "./.htaccess", to: ""},
{from: "./robots.txt", to: ""}
],
}),
new MiniCssExtractPlugin({
filename: "[name].[hash].css"
}),
new HtmlWebpackPlugin({
template: "./src/app/index.html",
favicon: "./src/assets/image/favicon.png",
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true
}
}),
new ServiceWorkerWebpackPlugin({
entry: path.join(__dirname, './src/app/serviceWorker/serviceWorkerInit.js'),
}),
new WebpackManifestPlugin({
fileName: 'asset-manifest.json', // Not to confuse with manifest.json
}),
new ESLintPlugin({files: './src/app/app.js'}),
new PurifyCssPlugin({
paths: [
...(glob.sync(`./src/app/*.html`)),
...(glob.sync(`./src/app/**/*.jsx`)),
...(glob.sync(`./dist/*.html`))
],
styleExtensions: ['.css','.scss'],
moduleExtensions: [".html"],
verbose: true,
purifyOptions: {
info: true,
minify: true,
whitelist: ["*purify*"]
},
})
]
};
Webpack.config.prod.js
const merge = require('webpack-merge');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const webpackBaseConfiguration = require('./webpack.config.base.js');
const TerserPlugin = require('terser-webpack-plugin')
const webpack = require('webpack');
const GLOBALS = {
'process.env.NODE_ENV': JSON.stringify('production'),
__DEV__: false
};
module.exports = merge(webpackBaseConfiguration,{
mode: 'production',
entry: [
'#babel/polyfill',
'./src/app/app.jsx'
],
devServer: {
contentBase: './dist'
},
optimization: {
splitChunks: {
chunks: 'all',
minSize: 20000,
maxSize: 0,
minChunks: 2,
maxAsyncRequests: 30,
maxInitialRequests: 30,
enforceSizeThreshold: 50000,
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
reuseExistingChunk: true
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
},
usedExports: true,
minimizer: [
new TerserPlugin({
parallel: true,
terserOptions: {
ecma: 6,
},
}),
new OptimizeCSSAssetsPlugin()
]
},
plugins: [
new webpack.DefinePlugin(GLOBALS),
new CompressionPlugin({
algorithm: 'gzip',
minRatio: Number.MAX_SAFE_INTEGER
}),
new CompressionPlugin({
filename: "[path].br",
algorithm: "brotliCompress",
test: /\.(js|css|html|svg|png|svg|jpg|gif)$/,
deleteOriginalAssets: false,
minRatio: Number.MAX_SAFE_INTEGER
})
]
});
Webpack.config.dev.js
const merge = require('webpack-merge');
const webpackBaseConfiguration = require('./webpack.config.base');
const webpack = require('webpack');
module.exports = merge(webpackBaseConfiguration,{
mode: 'development',
output: {
publicPath: '/'
},
devServer: {
contentBase: './src',
historyApiFallback: true
},
devtool: 'cheap-module-eval-source-map',
entry: [
'#babel/polyfill',
'webpack-hot-middleware/client?reload=true',
'./src/app/app.jsx'
],
plugins: [
/*For hot deployment*/
new webpack.HotModuleReplacementPlugin()
]
});
package.json
{
"name": "Sample",
"version": "1.0.0",
"description": "React app",
"scripts": {
"clean": "rimraf dist",
"deploy": "node deploy",
"build:prod:deploy": "npm run clean && webpack --mode production --config webpack.config.prod.js && node deploy",
"build:prod": "npm run clean && webpack --mode production --config webpack.config.prod.js",
"build:dev": "webpack-dev-server --mode development --config webpack.config.dev.js --open --hot",
"start": "npm run build && npm run deploy",
"build": "npm run clean && webpack --mode production --config webpack.config.prod.js && npm run deploy"
},
"engines": {
"node": "14.x",
"npm": "6.x"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.12.1",
"#babel/core": "^7.2.2",
"#babel/node": "^7.2.2",
"#babel/plugin-proposal-class-properties": "^7.3.0",
"#babel/polyfill": "^7.2.5",
"#babel/preset-env": "^7.2.0",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.0.0",
"#gfx/zopfli": "^1.0.15",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.0.4",
"brotli-webpack-plugin": "^1.1.0",
"compression-webpack-plugin": "^2.0.0",
"copy-webpack-plugin": "6.2.1",
"css-loader": "^2.1.0",
"eslint": "^7.18.0",
"eslint-webpack-plugin": "^2.4.1",
"file-loader": "^3.0.1",
"ftp-deploy": "^2.4.0",
"glob": "^7.1.6",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"image-minimizer-webpack-plugin": "^1.0.0",
"image-webpack-loader": "^7.0.1",
"imagemin-gifsicle": "^7.0.0",
"imagemin-jpegtran": "^7.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^8.0.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"rimraf": "^2.6.3",
"sass-loader": "^7.1.0",
"serviceworker-webpack-plugin": "^1.0.1",
"terser-webpack-plugin": "4.2.3",
"uglifyjs-webpack-plugin": "^2.1.1",
"webpack": "^4.40.0",
"webpack-cli": "^3.1.2",
"webpack-dev-middleware": "^3.5.2",
"webpack-dev-server": "^3.11.0",
"webpack-ftp-upload-plugin": "^1.0.3",
"webpack-hot-middleware": "^2.24.3",
"webpack-manifest-plugin": "^3.0.0",
"webpack-merge": "^4.2.1",
"workbox-cacheable-response": "^6.0.2",
"workbox-expiration": "^6.0.2",
"workbox-routing": "^6.0.2",
"workbox-strategies": "^6.0.2",
"workbox-webpack-plugin": "^6.0.2",
"zlib": "^1.0.5"
},
"dependencies": {
"axios": "^0.19.0",
"bootstrap": "^4.5.0",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-lazy-load-image-component": "^1.5.1",
"react-paginate": "^6.5.0",
"react-redux": "^7.2.2",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"redux": "^4.0.5",
"redux-immutable-state-invariant": "^2.1.0",
"redux-thunk": "^2.3.0"
}
}

Getting module not build error due to sass-loader

I am getting the below error while running the command npm run dev. But the same code is working fine in my colleague system. I am not getting what went wrong.
When I am adding one global.scss file in App.js then only I am getting the below error otherwise component level scss file working fine.
ERROR in ./src/client/styles/global.scss (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/sass-loader/dist/cjs.js!./src/client/styles/global.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "��": expected "{", was ""
on line 1 of C:\Users\Azad\Repos\travelBookingCloud-FE\src\client\styles\global.scss
>> ��
^
# ./src/client/styles/global.scss 2:26-153 43:4-64:5 46:18-145
# ./src/client/client.js
i 「wdm」: Failed to compile.
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const miniCssPlugin = new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
});
const htmlPlugin = new HtmlWebpackPlugin({
filename: "index.html",
template: path.join(__dirname, "src", "index.html")
});
const uglifyJsPlugin = new UglifyJsPlugin({
sourceMap: true,
test: /\.min\.js$/i,
});
const dotEnv=new Dotenv();
module.exports = (env, argv)=> {
const isDevelopment = argv.mode === 'development';
return {
optimization: {
nodeEnv: argv.mode
},
entry: path.join(__dirname, "src/client", "client.js"),
output: {
path: path.join(__dirname, "build"),
filename: "bundle.js",
publicPath: '/'
},
mode: argv.mode,
devtool: isDevelopment
? '#eval-source-map'
: 'source-map',
devServer: {
stats: {
children: false,
maxModules: 0
},
port: 3000,
historyApiFallback: true
},
node: {
fs: "empty"
},
resolve: {
modules: ['src/scripts', 'node_modules'],
extensions: ['.jsx', '.js'],
unsafeCache: true,
alias: {
Config: path.resolve(__dirname, 'src/config'),
Components: path.resolve(__dirname, 'src/client/components'),
Constants: path.resolve(__dirname, 'src/client/constants'),
Helpers: path.resolve(__dirname, 'src/client/helpers'),
Views: path.resolve(__dirname, 'src/client/views'),
Widgets: path.resolve(__dirname, 'src/client/widgets'),
App: path.resolve(__dirname, 'src')
}
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(sa|sc|c)ss$/,
use: [
isDevelopment
? "style-loader"
: MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
importLoaders: 1
}
},
"sass-loader"
]
},
{
test: /\.(png|jpg|jp(e)g|gif|svg)$/i,
use: [
{
loader: "url-loader",
options: {
limit: 8192
}
}
]
},
{
test: /\.(ttf|eot|svg|jpg|jp(e)g|png|woff(2)?)(\?[a-z0-9=&.]+)?$/,
use: [
{
loader: "file-loader",
options: {
name: "[path][name]-[hash:8].[ext]"
}
}
]
}
]
},
plugins: [
uglifyJsPlugin,htmlPlugin,miniCssPlugin,dotEnv
]
};
};
package.json
{
"name": "travelbookingcloud-fe",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --mode development",
"dev": "webpack-dev-server --mode development --hot --open",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.10.4",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/preset-env": "^7.10.4",
"#babel/preset-react": "^7.10.4",
"#date-io/date-fns": "^2.6.2",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
"#material-ui/pickers": "^3.2.10",
"#material-ui/utils": "^4.10.2",
"axios": "^0.19.2",
"babel-loader": "^8.1.0",
"copy-webpack-plugin": "^6.0.3",
"css-loader": "^3.6.0",
"dotenv": "^8.2.0",
"dotenv-webpack": "^1.8.0",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^0.9.0",
"moment": "^2.27.0",
"node-sass": "^4.14.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"sass-loader": "^8.0.2",
"style-loader": "^1.2.1",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
}
}

webpack plugins loading depending on environment

I want to load two plugins to webpack: extract-text-webpack-plugin and babel-minify-webpack-plugin.babel-minify-webpack-plugin should be only loaded if the environment is in production. Currently I'm creating envPlugin array and pushing plugins, depending on the environment flag.
module.exports = (env) => {
const isProduction = env === 'production';
const CSSExtract = new ExtractTextPlugin('styles.css');
const bundleJSMinifier = new MinifyPlugin();
let envPlugins = [CSSExtract];
if (isProduction) {
envPlugins.push(bundleJSMinifier);
}
return {
entry: ['babel-polyfill', './src/app.js'],
output: {
path: path.join(__dirname, 'public', 'dist'),
filename: 'bundle.js'
},
module: {
rules: [...]
},
plugins: envPlugins,
devtool: isProduction ? 'source-map' : 'inline-source-map',
devServer: {...}
};
};
The question is there a better way to load plugins to webpack depending on environment I'm currently in.
You can split your production and development configuration in different files, put the common settings in a common file and use webpack-merge plugin to merge them in each env like this:
webpack.common.js
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: 'development',
entry: __dirname + '/admin/app/frontend/entry.js',
output: {
path: __dirname + '/admin/public/compiled',
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
include: __dirname + '/admin/app/frontend/',
use: {
loader: 'babel-loader'
}
},
{
test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
{
test: /\.png$/,
loader: "url-loader?mimetype=image/png"
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "styles.css",
}),
new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en|de)$/)
]
};
webpack.dev.js:
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devtool: 'inline-source-map',
});
webpack.prod.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
plugins: [
new UglifyJSPlugin({
sourceMap: true
})
]
});
and in my package.json I have specific commands for each env. npm watch for development and npm build for production. each of them points to the correct env file:
{
"name": "my-app",
"version": "1.0.0",
"description": "my app desc",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --config webpack.dev.js --watch",
"build": "webpack --config webpack.prod.js"
},
"repository": {
"type": "git",
"url": "https://repo-url"
},
"keywords": [
"bpaulino",
"bruno"
],
"engines": {
"node": "8.5.0"
},
"author": "Bruno Paulino",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-display-name": "^6.5.0",
"babel-polyfill": "^6.7.4",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
...
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-merge": "^4.1.0"
},
"dependencies": {
"axios": "^0.16.2",
"babel-plugin-prismjs": "^1.0.2",
"bootstrap-sass": "^3.3.7",
"history": "^4.6.3",
"lodash": "^4.17.4",
"marked": "^0.5.0",
"moment": "2.22.2",
"node-uuid": "^1.4.8",
"normalizr": "^3.2.3",
"npm": "^6.2.0",
"prismjs": "^1.15.0",
"prop-types": "^15.6.2",
"react": "^16.4.1",
...
}
}
using the webpack-merge plugin you can override any settings defined in the common configuration.

Resources