entry: {
vender: [
'react',
'react-dom',
'eslint-plugin-react',
],
},
The code snippet above seems to be the cause of my issues. This code sample is a part of my webpack.config.js file. If I run yarn build for this application it removes my CSS file that was being created through the ExtractTextWebpackPlugin (ETP in my code). If I comment out the code section above the CSS file is present in the public directory after I run build. Would anyone happen to know how I can remedy this issue.
const ETP = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const parts = require('./webpack.parts');
const path = require('path');
const webpack = require('webpack');
const glob = require('glob');
const PATHS = {
public: path.join(__dirname, 'public'),
src: path.join(__dirname, 'src'),
styles: path.join(__dirname, 'src', 'scss'),
};
const options = {
host: 'localhost',
port: '8085',
};
const commonConfig = merge([
{
entry: PATHS.src,
output: {
path: PATHS.public,
filename: '[name].bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Jason Ganz Portfolio',
template: path.join(PATHS.src, 'index.html'),
}),
new OpenBrowserPlugin({
url: `http://${options.host}:${options.port}`,
}),
new ETP('style.css'),
new webpack.LoaderOptionsPlugin({
options: {
eslint: {
failOnWarning: false,
failOnError: true,
fix: false,
// // Output to Jenkins compatible XML
// // outputReport: {
// // filePath: 'checkstyle.xml',
// // formatter: require('eslint/lib/formatters/checkstyle'),
// // },
},
},
}),
parts.purifyCSS({
paths: glob.sync(`${PATHS.src}/**/*.js`, {nodir: true}),
}),
],
},
parts.loadSASS(PATHS.styles),
parts.loadJSX(),
]);
const productionConfig = merge([
//Generates Source Maps for js files
parts.generateSourceMaps({ type: 'source-map' }),
{
entry: {
vender: [
'react',
'react-dom',
'eslint-plugin-react',
],
},
plugins: [ new webpack.optimize.CommonsChunkPlugin({name: 'vendor'})],
},
]);
const developmentConfig = merge([
parts.devServer({
host: options.host,
port: options.port,
path: PATHS.public,
}),
{
output: {
devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]',
},
},
parts.generateSourceMaps({ type: 'cheap-module-eval-source-map' }),
]);
module.exports = (env) => {
if(env == 'development') {
return merge(commonConfig, developmentConfig);
}
return merge(commonConfig, productionConfig);
};
My loaders and modules are being stored in a separate webpack.parts.js file which can be seen below.
const ETP = require('extract-text-webpack-plugin');
const PurifyCSSPlugin = require('purifycss-webpack');
exports.devServer = ({host, port, path} = {})=> ({
devServer: {
compress: true,
contentBase: path,
historyApiFallback: true,
host,
port,
overlay: {
errors: true,
warnings: true,
},
stats: 'errors-only',
},
});
exports.generateSourceMaps = ({ type }) => ({
devtool: type,
});
exports.loadCSS = () => ({
module:{
loaders: [{
test: /\.css$/,
loader: ['style-loader','css-loader'],
}],
},
});
exports.loadJSX = () => ({
module:{
loaders: [{
test: /\.(js|jsx)$/,
exclude: '/node_modules/',
loader: 'babel-loader',
}],
},
});
exports.loadSASS = (path) => ({
module: {
loaders: [{
test: /\.(css|sass|scss)$/,
loader: ETP.extract({
fallback: 'style-loader',
use: 'css-loader!postcss-loader!sass-loader',
}),
include: path,
}],
},
});
exports.purifyCSS = ({ paths }) => (new PurifyCSSPlugin({paths}))
You are writing "vender" instead of "vendor" in the entry property
Related
**I have two single-spa projects (root-config, app-hello) and I need to create a build so that the file name is the same in both root-config and app-hello. The problem is that when I run the proteins separately in the build I get different dates in the file name and for this I am looking for a way to build them together **
Webpack app-hello
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const Dotenv = require('dotenv-webpack');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
const singleSpaDefaults = require('webpack-config-single-spa-react');
const override = require('./config-overrides.js');
module.exports = (webpackConfigEnv, argv) => {
const defaultConfig = singleSpaDefaults({
orgName: 'app',
projectName: 'hello',
webpackConfigEnv,
argv,
override,
});
return merge(defaultConfig, {
resolve: {
extensions: ['.ts', '.tsx', '.js'],
preferRelative: true,
alias: {
containers: path.resolve(__dirname, 'src/containers'),
components: path.resolve(__dirname, 'src/components'),
layouts: path.resolve(__dirname, 'src/layouts'),
stores: path.resolve(__dirname, 'src/stores'),
hooks: path.join(__dirname, 'src/hooks'),
context: path.join(__dirname, 'src/context'),
assets: path.join(__dirname, 'src/assets'),
helpers: path.join(__dirname, 'src/helpers'),
},
plugins: [new TsconfigPathsPlugin({ configFile: './tsconfig.json' })],
},
devServer: {
port: 8500,
},
plugins: [
new Dotenv({
path: './.env.development',
}),
new FilterWarningsPlugin({
exclude:
/There are multiple modules with names that only differ in casing/,
}),
new CleanWebpackPlugin(),
],
output: {
path: path.resolve(__dirname, 'build'),
filename: `app-chat-${Date.now()}.js`,
assetModuleFilename: 'assets/[name][ext]',
},
module: {
rules: [
{
test: /\.m?js/,
type: 'javascript/auto',
resolve: {
fullySpecified: false,
},
},
{
test: /\.js$|jsx/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.json$/,
use: 'json-loader',
},
{
test: /\.svg$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['preact', 'env'],
},
},
{
loader: '#svgr/webpack',
options: { babel: false },
},
],
},
],
},
});
};
webpack root-config
const { merge } = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa-ts");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = (webpackConfigEnv, argv) => {
const orgName = "app";
const defaultConfig = singleSpaDefaults({
orgName,
projectName: "root-config",
webpackConfigEnv,
argv,
disableHtmlGeneration: true,
});
return merge(defaultConfig, {
plugins: [
new HtmlWebpackPlugin({
inject: false,
template: "src/index.ejs",
templateParameters: {
isLocal: webpackConfigEnv && webpackConfigEnv.isLocal,
orgName,
hash: Date.now(),
},
}),
],
});
};
index root-config
<script type="systemjs-importmap">
{
"imports": {
"react": "https://cdn.jsdelivr.net/npm/react#17.0.2/umd/react.production.min.js",
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom#17.0.2/umd/react-dom.production.min.js",
"single-spa": "https://cdn.jsdelivr.net/npm/single-spa#5.9.0/lib/system/single-spa.min.js",
"#app/root-config": "https://login-7mpuan0pw5.s3.amazonaws.com/app-root-config.js",
"#app/chat": "https://login-7mpuan0pw5.s3.amazonaws.com/app-chat-<%= hash %>.js",
"#app/switcher": "https://login-7mpuan0pw5.s3.amazonaws.com/switcher/app-switcher-<%= hash %>.js"
}
}
</script>
When I import the react component for the next SSR, it gives an import error, what could be the matter? I don't want to use type module in package.json
Maybe I made a mistake somewhere.....I will be very grateful for your help
babel.rc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript",
"#babel/register"
]
}
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin");
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { getGlobals } = require("./config/get-globals");
const isDev = process.env.NODE_ENV === "development";
const isProd = !isDev;
const globals = getGlobals();
const optimization = () => {
const config = {
splitChunks: {
chunks: "all",
},
};
if (isProd) {
config.minimizer = [
new CssMinimizerWebpackPlugin(),
new TerserWebpackPlugin(),
];
}
return config;
};
const ClientConfig = {
entry: path.join(__dirname, "src", "index.jsx"),
output: {
path: path.join(__dirname, "build"),
filename: "[name].[contenthash].js",
},
mode: 'development' === process.env.NODE_ENV ? 'development' : 'production',
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "public", "index_template.ejs"),
favicon: "src/public/favicon.ico",
alwaysWriteToDisk: true,
minify: {
collapseWhitespace: isProd,
},
inject: false,
templateParameters: (options) => {
const js = Object.keys(options.assets)
.filter((el) => /\.js$/.test(el))
.map((el) => "/" + el);
const css = Object.keys(options.assets)
.filter((el) => /\.css$/.test(el))
.map((el) => "/" + el);
return {
css,
js,
globals,
};
},
}),
new HtmlWebpackPlugin({
inject: false,
minify: false,
template: path.resolve(__dirname, "config", "render-stats.js"),
filename: path.join(__dirname, "config", "build-stats.json"),
}),
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
}),
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, "src", "public", "favicon.ico"),
to: path.resolve(__dirname, "build"),
},
],
}),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: "ts-loader",
},
},
{
test: /\.(png|svg|jpg|gif|jpeg|ico)$/,
use: ["file-loader"],
},
{
test: /\.(ttf|woff|woff2|eot)$/,
use: ["file-loader"],
},
{
test: /\.xml$/,
use: ["xml-loader"],
},
{
test: /\.csv$/,
use: ["csv-loader"],
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: true,
},
},
],
},
{
test: /\.ejs$/,
use: { loader: "ejs-compiled-loader", options: {} },
},
],
},
resolve: {
extensions: [".js", ".jsx", ".ejs", ".tsx", ".ts"],
},
devServer: {
port: 3007,
hot: isDev,
},
optimization: optimization(),
};
module.exports = [ClientConfig];
server.js
const express = require("express");
const fs = require("fs");
const path = require("path");
// create express application
const app = express();
// import App component
const { App } = require("../src/components/app.tsx");
app.use("*", (req, res) => {
let indexHTML = fs.readFileSync(path.resolve(__dirname, "../build/index.html"), {
encoding: "utf8"
});
// set header and status
res.contentType("text/html");
res.status(200);
return res.send(indexHTML);
});
// run express server on port 9000
app.listen("9000", () => {
console.log("Express server started at http://localhost:9000");
});
Error
import * as React from "react";
^^^^^^
SyntaxError: Cannot use import statement outside a module
Use this configuration for compile server filewebpack.server.config.js
const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
entry: './src/server/index.js',
target: 'node',
externals: [nodeExternals()],
output: {
path: path.resolve(__dirname, './dist/server'),
filename: 'server.js'
},
resolve : {
extensions : [".js",".jsx"],
},
module: {
rules: [
{
test: /\.jsx?/,
use: 'babel-loader'
}
]
}
};
I work with webpack 5. Pug works well - after autosave or cmd+S I get new version of page. And it doesn't work so with JS and SCSS: SCSS autosave works well but after cmd+S I get some old version of page(usually everytime the same). With JS both autosave and cmd+S return some old version of page. Can you help me to find a solution? Below I dropped webpack.config.js
const path = require("path");
const fs = require("fs");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const isDev = process.env.NODE_ENV === "development";
const isProd = !isDev;
const PATHS = {
src: path.join(__dirname, "./src"),
dist: path.join(__dirname, "./dist"),
};
const PAGES_DIR = `${PATHS.src}/`;
const PAGES = fs.readdirSync(PAGES_DIR).filter((fileName) => fileName.endsWith(".pug"));
const filename = (ext) => `[name].${ext}`;
const plugins = () => {
const basePlugins = [
...PAGES.map(
(page) =>
new HTMLWebpackPlugin({
template: `${PAGES_DIR}/${page}`,
filename: `./${page.replace(/\.pug/, ".html")}`,
})
),
new MiniCssExtractPlugin({
filename: `./css/${filename("css")}`,
}),
new CopyWebpackPlugin({
patterns: [
{ from: path.resolve(__dirname, "src/assets"), to: path.resolve(`${PATHS.dist}`) },
{ from: path.resolve(__dirname, "src/img"), to: path.resolve(`${PATHS.dist}/img/`) },
],
}),
];
return basePlugins;
};
module.exports = {
context: path.resolve(`${PATHS.src}`),
mode: "development",
entry: "./js/main.js",
output: {
filename: `./js/${filename("js")}`,
path: path.resolve(`${PATHS.dist}`),
publicPath: "",
clean: true,
},
devServer: {
historyApiFallback: true,
static: path.resolve(`${PATHS.dist}`),
open: true,
compress: true,
hot: true,
port: 3000,
},
optimization: {
splitChunks: {
chunks: "all",
},
},
plugins: plugins(),
devtool: isProd ? false : "source-map",
module: {
rules: [
{
test: /\.pug$/,
loader: "pug-loader",
},
{
test: /\.s[ac]ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: (resourcePath, context) => {
return path.relative(path.dirname(resourcePath), context) + "/";
},
},
},
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: ["postcss-preset-env"],
},
},
},
"sass-loader",
],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.(?:|gif|png|jpg|jpeg|svg|webp)$/,
use: [
{
loader: "file-loader",
options: {
name: `./img/${filename("[ext]")}`,
},
},
],
},
{
test: /\.(?:|woff2)$/,
use: [
{
loader: "file-loader",
options: {
name: `./fonts/${filename("[ext]")}`,
},
},
],
},
],
},
};
I don't know what to write here. I described my problem above.
I found that some of the styles are not applied in Production website, but working in development env(localhost).
But Inspecting in Browser Inspector > Sources, I found that in Production sources(css/main.c938xxxxx.css), it missed #roadmap .slick-slide{padding:0 18px}}

Which exist in localhost

Not sure what’s wrong for the production webpack setting. I am using webpack 5
Webpack.base.js
const webpack = require("webpack");
const utils = require("./utils");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const BundleAnalyzerPlugin =
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const ProgressBarPlugin = require("progress-bar-webpack-plugin");
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const chalk = require("chalk");
const smp = new SpeedMeasurePlugin();
module.exports = smp.wrap({
entry: "./src/index.jsx",
resolve: {
alias: {
"#": utils.resolve("src"),
},
extensions: ["*", ".js", ".jsx"],
fallback: {…},
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true,
},
},
}
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
{
loader: "sass-loader",
},
{
loader: "sass-resources-loader",
options: {
resources: ["./src/assets/scss/main.scss"],
},
},
],
},
{
test: /\.(png|jpg|gif|svg)$/i,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 8192
}
}
},
{
test: /\.(ico)$/,
exclude: /node_modules/,
use: ["file-loader?name=[name].[ext]"], // ?name=[name].[ext] is only necessary to preserve the original file name
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "public/index.html",
filename: "index.html",
favicon: "public/favicon.ico",
manifest: "public/manifest.json",
inject: true,
}),
new webpack.ProvidePlugin({
Buffer: ["buffer", "Buffer"],
}),
new webpack.ProvidePlugin({
process: "process/browser",
}),
new ProgressBarPlugin({
format: ` :msg [:bar] ${chalk.green.bold(":percent")} (:elapsed s)`,
}),
],
});
webpack.dev.js
const { merge } = require("webpack-merge");
const path = require("path");
const base = require("./webpack.base");
const utils = require("./utils");
const Dotenv = require("dotenv-webpack");
module.exports = merge(base, {
mode: "development",
devtool: "inline-source-map",
output: {
publicPath: '/',
assetModuleFilename: (pathData) => {
const filepath = path
.dirname(pathData.filename)
.split("/")
.slice(1)
.join("/");
return `${filepath}/[name].[hash][ext][query]`;
},
},
devServer: {
port: 3300,
static: [
{ directory: utils.resolve("dist") },
{ directory: utils.resolve("public") },
],
},
plugins: [new Dotenv({ path: "./.env.dev })],
});
webpack.uat.js
const { merge } = require("webpack-merge");
const base = require("./webpack.base");
const path = require("path");
const Dotenv = require("dotenv-webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["js", "css"];
module.exports = merge(base, {
mode: "production",
output: {
path: path.join(__dirname, "../dist"),
filename: "js/[name].[contenthash].js",
assetModuleFilename: (pathData) => {
const filepath = path
.dirname(pathData.filename)
.split("/")
.slice(1)
.join("/");
return `${filepath}/[name].[hash][ext][query]`;
},
},
optimization: {
minimizer: [`...`, new CssMinimizerPlugin()],
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
},
"sass-loader",
{
loader: "sass-resources-loader",
options: {
resources: ["./src/assets/scss/main.scss"],
},
},
],
},
],
},
plugins: [
new Dotenv({ path: "./.env.uat" }),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: "css/[name].[contenthash].css",
}),
new CompressionPlugin({
filename: "[path][name].gz[query]",
algorithm: "gzip",
test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
threshold: 10240,
minRatio: 0.8,
})
],
});
utils.js
const path = require('path')
module.exports = {
resolve: function(dir) {
return path.join(__dirname, '..', dir)
}
}
Add "style-loader" in webpack.uat.js file.
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "style-loader",
},
{
loader: "css-loader",
},
"sass-loader",
{
loader: "sass-resources-loader",
options: {
resources: ["./src/assets/scss/main.scss"],
},
},
],
},
],
I have the following folder structure (here is the demo app source code):
MyComp.scss:(app\web\src\components\MyComp\MyComp.scss)
I've below URL:
.content{
background-image: url(/icons/myIcon.png); // should resolve to web\icons\myIcon.png
}
Webpack is throwing error for this:
Error: Can't resolve '/icons/myIcon.png' in
'C:\app\web\src\components\
MyContainer.jsx: (app\web\src\containers\MyContainer\MyContainer.jsx) I am using below absolute imports which are giving errors:
import MyComp from 'components/MyComp'; // This should resolve to app\web\src\components\MyComp\MyComp.jsx
import { authorizingUser } from 'myRedux'; // should resolve to app\unify\myRedux\modules\auth\actions.js
Moreover, node_modules imports are also failing:
ERROR in ./node_modules/node-fetch/index.js 10:11-26 Module not found:
Error: Can't resolve 'http' in 'C:\node_modules\node-fetch'
Here is how my webpack config is:
config.js: (app\web\build\config.js)
const path = require('path');
const root = path.resolve(__dirname, '..', '..', '..'); // Project root.
const webRoot = path.resolve(root, 'app', 'web');
const assetPath = path.resolve(root, 'web', 'dist');
module.exports = { root, webRoot, assetPath };
webpack.frontend.config: (app\web\build\webpack.frontend.config.js)
require('dotenv').config();
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const AssetsPlugin = require('assets-webpack-plugin');
const config = require('./config.js');
const PROD = process.env.NODE_ENV === 'production';
const cssLoader = (enableModules = true) => {
return {
loader: 'css-loader',
options: {
modules: enableModules,
sourceMap: !PROD,
importLoaders: 2,
modules: {
localIdentName: PROD ? '[local]__[hash:base64:5]' : '[local]',
},
},
};
};
const postCssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: !PROD,
postcssOptions: {
public: [
'postcss-preset-env',
{
// Options
browsers: 'last 2 versions',
},
],
},
},
};
const sassLoader = {
loader: 'sass-loader',
options: {
sourceMap: !PROD,
},
};
const localStyleLoaders = [cssLoader(), postCssLoader, sassLoader];
// We want to disable css module.
const globalStyleLoaders = [cssLoader(false), postCssLoader, sassLoader];
const devPlugins = [new webpack.HotModuleReplacementPlugin()]; // <- To generate hot update chunk
const prodPlugins = [];
const devEntries = [
`webpack-dev-server/client?path=https://my-domain.com:443`, // <-- Enables web socket connection (needs url & port)
'webpack/hot/dev-server', // <- To perform HMR in the browser
];
const clientAppEntryFilePath = path.resolve(config.webRoot, 'src/client.jsx');
module.exports = {
entry: {
frontEndMain: [
'babel-polyfill',
...(PROD ? [] : devEntries),
clientAppEntryFilePath,
],
},
output: {
path: config.assetPath,
filename: '[name]-[hash].js', // Hash is used to force cache invalidation.
publicPath: PROD
? '/dist'
: `https://my-domain.com:443/dist/`,
},
module: {
rules: [
//JavaScript & JSX
{
test: /\.(jsx|js)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
// For local styles.
{
test: /\.(scss|css)$/,
use: PROD
? [MiniCssExtractPlugin.loader, ...localStyleLoaders]
: ['style-loader', ...localStyleLoaders],
include: path.resolve(config.webRoot, 'src'),
exclude: path.resolve(config.webRoot, 'src', 'theme'),
},
// Global styles
// Just like the normal style loader stack, but without css modules so we don't modify
// classnames for our style libraries like bootstrap, slick, etc
{
test: /\.(scss|css)$/,
use: PROD
? [MiniCssExtractPlugin.loader, ...globalStyleLoaders]
: ['style-loader', ...globalStyleLoaders],
include: [path.resolve(config.webRoot, 'src', 'theme'), /node_modules/],
},
// Images: Copy image files to build folder
{
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
loader: 'url-loader',
options: {
limit: 10240,
},
},
{
test: /\.woff2?(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff',
},
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/octet-stream',
},
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'mimetype=image/svg+xml',
},
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
},
],
},
resolve: {
modules: [
'node_modules',
// Since I am using absolute import for custom modules/js. So this is required.
'app',
'app/unify',
'app/web/src',
],
extensions: ['.js', '.jsx'],
},
plugins: [
...(PROD ? prodPlugins : devPlugins),
new CleanWebpackPlugin(),
// Since I have hashed frontEnd js/css, so this generates assets info file on root and
// which has assets info.
new AssetsPlugin({
path: config.root,
filename: 'web-frontend-assets.json',
prettyPrint: true,
}),
new webpack.DefinePlugin({
// To resolve this error on production build.
// "You are currently using minified code outside of NODE_ENV === 'production'"
'process.env': {
NODE_ENV: JSON.stringify(PROD ? 'production' : 'development'),
PLATFORM: JSON.stringify(process.env.PLATFORM),
WEB_ENV: JSON.stringify(process.env.WEB_ENV),
},
__CLIENT__: true,
__SERVER__: false,
__DEVELOPMENT__: process.env.NODE_ENV !== 'production',
}),
],
devServer: {
https: {
key: fs.readFileSync(`${config.webRoot}/certs/key.pem`),
cert: fs.readFileSync(`${config.webRoot}/certs/cert.pem`),
},
host: 'my-domain.com',
port: '443',
quiet: true,
inline: true,
hot: true,
compress: true, // <- Enables HMR in webpack-dev-server and in libs running in the browser
historyApiFallback: true,
disableHostCheck: true,
clientLogLevel: 'silent',
publicPath: `https://my-domain.com:443/dist/`,
contentBase: `https://my-domain.com:443`,
headers: { 'Access-Control-Allow-Origin': '*' },
stats: { colors: true },
},
node: false,
stats: {
preset: 'detailed',
assets: true,
builtAt: true,
moduleAssets: false,
assetsSpace: 15,
modulesSpace: 15,
colors: true,
env: true,
errors: true,
errorDetails: true,
errorStack: true,
reasons: true,
modules: true,
},
};
package.json:
"scripts": {
"start-frontend": "webpack --config ./app/web/build/webpack.frontend.config.js"
},
I am not sure, what exactly I need to pass in entry.frontEndMain, output.publicPath, devServer.publicPath, devServer.contentBase