Webpack is not bundling css from node_modules - javascript

I'm migrating a react website to webpack 4 (from 3) but have been running into some strange problems when using webpack for css.
It works fine for the css that I wrote myself, but any css from third party components in node_modules does not seem to be included at all.
Here is an example of my webpack config:
const webpack = require('webpack');
const path = require('path');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const config = {
entry: [
'react-hot-loader/patch',
'./src/index.js'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
exclude: [/node_modules/, /global\.css$/],
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
}
},
'postcss-loader'
]
},
{
test: /\.css$/,
include: [/node_modules/, /global\.css$/],
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 0,
modules: true,
}
}
]
},
{
test: /\.png$/,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/png'
}
}
]
},
{
test: /\.svg$/,
use: 'file-loader'
},
{
test: /\.jpg$/,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/jpg'
}
}
]
},
]
},
resolve: {
extensions: [
'.js',
'.jsx'
],
alias: {
'react-dom': '#hot-loader/react-dom'
},
modules: [
'node_modules',
],
},
devServer: {
contentBase: './dist'
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
new LodashModuleReplacementPlugin,
new HtmlWebpackPlugin({
template: require('html-webpack-template'),
inject: false,
appMountId: 'app',
})
],
optimization: {
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
}
};
module.exports = (env, argv) => {
if (argv.hot) {
// Cannot use 'contenthash' when hot reloading is enabled.
config.output.filename = '[name].[hash].js';
}
return config;
};
Only css from my own files are included in the generated bundle.
I'm using the latest versions:
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
Greatful for any help!
Layout of the project

Related

#babel/polyfill - is deprecated. Please, use required parts of `core-js` and `regenerator-runtime/runtime` separately

I am having an issue trying to 'run serve' with a React-App I am working on. I am getting a bunch of error messages but I think are mainly due to this one error -
#babel/polyfill is deprecated. Please, use required parts of 'core-js' and 'regenerator-runtime/runtime' separately.
This is a webpack.config.dev.js and webpack.config.js file
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: { main: './src/index.tsx' },
mode: 'development',
externals: {
react: 'React',
'react-dom': 'ReactDOM',
'react-router': 'ReactRouter',
},
target: 'web',
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
[
'#babel/preset-env',
{
useBuiltIns: 'entry',
corejs: 3,
},
],
],
},
},
{ loader: 'ts-loader' },
],
},
{
test: /\.(jsx?)$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
[
'#babel/preset-env',
{
useBuiltIns: 'entry',
corejs: 3,
},
],
],
},
},
],
},
{
test: /\.(s*)css$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: 'src/index.html',
filename: 'index.html',
chunksSortMode: 'auto',
chunks: ['main'],
}),
],
};
Any ideas? Thank you!

document is not defined after running webpack scripts

So I tried creating a boilerplate for an existing project that our company have and after running the script for webpack,
it generated a ./dist/server.js however, when I run it from node, I am getting this document not found error. Please let me know if you need a code snippet of a specific file.
ERROR
){var n=(0,r.renderToString)(o().createElement(Wn,null));a.send('\n <!DOCTYPE html>\n <html>\n <head>\n </head>\n <body style="margin:0">\n <div id="root">'+n+'</div>\n </body>\n <script src="main.bundle.js" defer><\/script>\n </html>\n')})),Hn.listen(3e3,(function(){console.log("app listening on port 3000!")}))})()})();
ReferenceError: document is not defined
code above is a long one line code which I had to cut off
webpack.config.client.js
const path = require('path');
module.exports = {
mode: 'production',
entry: {
main: './src/index.tsx',
},
module: {
rules: [
{
loader: 'ts-loader',
test: /\.(tsx|ts)?$/,
exclude: [/node_modules/],
},
{
test: /\.(scss)$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'file-loader',
options: {
name: '/src/assets/images/[name].[ext]'
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
loader: "file-loader"
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: '[name].bundle.js',
sourceMapFilename: '[file].map',
path: path.resolve(__dirname, 'dist/public'),
},
};
webpack.config.server.js
const path = require('path');
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const nodeExternals = require('webpack-node-externals');
const { join } = require('lodash');
module.exports = {
mode: 'production',
entry: {
server: './server/index.tsx',
},
target: 'node',
node: {
__dirname: false,
__filename: false,
},
externals: [nodeExternals()],
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
title: "Test",
template: './src/index.html'
})
],
module: {
rules: [
{
loader: 'ts-loader',
test: /\.tsx?$/,
options: {
transpileOnly: true,
},
exclude: [/node_modules/],
},
{
test: /\.(s*)css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'file-loader',
options: {
name: '/src/assets/images/[name].[ext]'
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
loader: "file-loader"
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
};

Webpack module federation hot reloading betwwen apps

I'm starting to experiment with the micro frontend with webpack module federation.
This is for a very particular purpose because in our company we develop big software like dashboards in react in Role base access control, and I would like each section (or almost) to be a separate application.
So I managed to implement everything, only I noticed that the automatic reload of the app container was not done when I modify a remote app. I can understand why, but I wonder if there is a way to modify this? Knowing that I can't work only on the remote app because it uses the app container's redundancy provider...
Here my webpack config for app container :
const ReactRefreshPlugin = require("#pmmmwh/react-refresh-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack").container
.ModuleFederationPlugin;
const path = require("path");
const deps = require("./package.json").dependencies;
module.exports = {
entry: "./src/index",
target:"web",
mode: "development",
devServer: {
contentBase: path.join(__dirname, "dist"),
port: 3001,
hot:true
},
output: {
publicPath: "auto",
},
resolve: {
extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],
},
module: {
rules: [
{
test: /bootstrap\.tsx$/,
loader: "bundle-loader",
options: {
lazy: true,
},
},
{
test: /\.tsx?$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
plugins: ['react-refresh/babel'],
presets: ["#babel/preset-react", "#babel/preset-typescript"],
},
},
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader",
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
sourceMap: true,
},
},
{
loader: 'postcss-loader',
options: {
options: {}
}
},
],
},
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
'resolve-url-loader',
'sass-loader',
],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
],
},
],
},
plugins: [
new ModuleFederationPlugin({
name: "appshell",
filename: "remoteEntry.js",
remotes: {
mfsectors: "mfsectors#http://localhost:3002/remoteEntry.js",
},
exposes: {
"./routes": "./src/routes",
"./src/store/**": "./src/store"
},
shared: {
...deps,
react: {
eager: true,
singleton: true,
requiredVersion: deps.react,
},
"react-dom": {
eager: true,
singleton: true,
requiredVersion: deps["react-dom"],
},
},
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
new ReactRefreshPlugin({
exclude: [/node_modules/, /bootstrap\.tsx$/],
}),
],
};
and here my webpack config for app remote :
const ReactRefreshPlugin = require("#pmmmwh/react-refresh-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack").container
.ModuleFederationPlugin;
const path = require("path");
const deps = require("./package.json").dependencies;
module.exports = {
entry: "./src/index.ts",
mode: "development",
devServer: {
contentBase: path.join(__dirname, "dist"),
port: 3002,
hot:true
},
output: {
publicPath: "auto",
},
resolve: {
extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],
},
module: {
rules: [
{
test: /bootstrap\.tsx$/,
loader: "bundle-loader",
options: {
lazy: true,
},
},
{
test: /\.tsx?$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
plugins: ['react-refresh/babel'],
presets: ["#babel/preset-react", "#babel/preset-typescript"],
},
},
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader",
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
sourceMap: true,
},
},
{
loader: 'postcss-loader',
options: {
options: {}
}
},
],
},
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
'resolve-url-loader',
'sass-loader',
],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
],
},
],
},
plugins: [
new ModuleFederationPlugin({
name: "mfsectors",
filename: "remoteEntry.js",
remotes: {
appshell: "appshell#http://localhost:3001/remoteEntry.js",
},
exposes: {
"./routes": "./src/routes",
},
shared: {
...deps,
react: {
eager: true,
singleton: true,
requiredVersion: deps.react,
},
"react-dom": {
eager: true,
singleton: true,
requiredVersion: deps["react-dom"],
},
},
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
new ReactRefreshPlugin({
exclude: [/node_modules/, /bootstrap\.tsx$/],
}),
],
};
Thank you !
Sorry for my bad english ^^'
you could simply add this to your host's webpack.config.js:
{
...
devServer: {
...
liveReload: true,
watchFiles: [path.resolve(__dirname, '..')], // make sure that hits your host app folder
},
}
and then on your remote's webpack.config.js:
{
...
devServer: {
...
devMiddleware: {
writeToDisk: true,
},
},
}

webpack only compile files with recent changes

I am working on a large codebase; I have multiple src files to compile. When I run watch or compile for production it will compile all files found in src. Which is exactly what webpack should do.
But I would like to compile only the files which have been recently changed instead of all the files. Is this possible?
Here's my webpack config
const path = require("path");
const webpack = require("webpack");
const extractTextPlugin = require("extract-text-webpack-plugin");
const {VueLoaderPlugin} = require("vue-loader");
module.exports = {
entry: {
clients:
"./src/clients/Resources/vue-js/clients.js",
dashboard:
"./src/dashboard/Resources/vue-js/dashboard.js",
mapView:
"./src/mapView/Resources/vue-js/mapView.js",
admin:
"./src/admin/Resources/vue-js/admin.js"
},
output: {
path: path.join(__dirname, "./dist/"),
publicPath: "/dist/",
filename: "js/[name].js",
chunkFilename: "js/[name].js"
},
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
name: "vendor",
filename: "js/vue_bundle.js",
automaticNameDelimiter: "_",
test: /[\\/]node_modules[\\/]/,
chunks: "all",
priority: 1,
minChunks: 2,
minSize: 0
},
}
},
occurrenceOrder: true,
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
presets: ["env"]
}
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: "url-loader?limit=100000"
},
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.scss$/,
use: extractTextPlugin.extract({
// use: ['raw-loader', 'sass-loader']
use: "raw-loader!sass-loader"
})
},
{
test: /\.sass$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader!sass-loader"
})
},
{
test: /\.jpe?g$|\.ico$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/,
loader: "file-loader?name=[name].[ext]"
},
{
test: /\.yaml$/,
loader: "json-loader!yaml-loader"
}
]
},
plugins: [
new extractTextPlugin({
filename: "css/[name].css",
allChunks: true
})
]
};

Maintain src folder structure into dist folder with Webpack?

I'm studying Webpack and I am facing this issue.
When i run the build task "npm run build", webpack creates the dist folder. The problem is that the dist folder doesn't respect the src folder, and Webpack puts all files into the root folder (the dist folder). So I have *.html pages near the style file and all the images. I want html files inside dist, images inside img (img inside dist) and so on...
This is my webpack.config.js file:
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.html$/,
use: [{
loader: 'html-loader',
options: {
minimize: true,
},
}],
},
{
test: /\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1,
sourceMap: true,
url: false,
minimize: true,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
},
},
{
loader: 'sass-loader',
},
],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
}],
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: 'index.html',
}),
new HtmlWebPackPlugin({
template: './src/work.html',
filename: 'work.html',
}),
new MiniCssExtractPlugin({
filename: '[name].[hash].css',
}),
new CleanWebpackPlugin(['dist']),
],
};
I found something on the Internet but all solutions didn't work.
Maybe I made something wrong? Please help me.
...
module: {
rules: [
...
{
test: /\.(png|svg|jpg|gif)$/,
use: [{
loader: 'file-loader',
options: {
name: 'img/[name].[ext]',
},
}],
},
],
},
plugins: [
...
new MiniCssExtractPlugin({
filename: 'styles/[name].[contenthash].css',
}),
],
};
You just add paths to the name

Categories