Related
I've been working on using ModuleFederation and have ran into an issue where if the remote webpack configuration had optimize.splitChunks.chunk = "all" then the host application would throw a loadScript exception. This could be a complete fundamental knowledge gap on my part why that wouldn't work. I haven't seen any documentation on not using that option along with Module Federation.
Has anyone had similar experiences or can tell me why it's a conflicting setting?
Thanks for your help!
remote webpack.config.js
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ModuleFederationPlugin } = webpack.container;
module.exports = {
entry: "./index.js",
mode: "development",
devServer: {
contentBase: path.join(__dirname, "dist"),
port: 1338,
},
output: {
publicPath: "auto",
},
optimization: {
splitChunks: {
chunk: "all"
}
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
presets: ["#babel/preset-react"],
},
},
],
},
plugins: [
new ModuleFederationPlugin({
name: "comic",
filename: "remoteEntry.js",
exposes: {
"./XKCD": "./app.jsx",
},
shared: [
{
react: { singleton: true, eager: true },
"react-dom": { singleton: true, eager: true },
},
],
}),
new HtmlWebpackPlugin({
template: "./index.html",
}),
],
};
host webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack").container
.ModuleFederationPlugin;
const path = require("path");
module.exports = {
entry: "./index.js",
mode: "development",
devServer: {
contentBase: path.join(__dirname, "dist"),
port: 1337,
},
output: {
publicPath: "auto",
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
presets: ["#babel/preset-react"],
},
},
],
},
plugins: [
new ModuleFederationPlugin({
name: "home",
filename: "remoteEntry.js",
remotes: {
comic: `comic#http://localhost:1338/remoteEntry.js)`,
},
shared: [
{
react: { singleton: true, eager: true },
"react-dom": { singleton: true, eager: true },
},
],
}),
new HtmlWebpackPlugin({
template: "./index.html",
}),
],
};
I have a similar problem.
I change the remote webpack.config.js optimization.splitChunks as
optimization: {
splitChunks: {
chunks: 'async'
}
}
This problem is fixed.
Maybe you can try it.
Sorry my pool english
I am getting this error when I run the app:
ERROR in ./node_modules/primereact/resources/themes/saga-blue/theme.css (./node_modules/css-loader!./node_modules/style-loader!./node_modules/css-loader!./node_modules/primereact/resources/themes/saga-blue/theme.css)
Module build failed (from ./node_modules/css-loader/index.js):
Unknown word (2:1)
1 |
> 2 | var content = require("!!../../../../css-loader/index.js!./theme.css");
| ^
3 |
4 | if(typeof content === 'string') content = [[module.id, content, '']];
5 |
# ./node_modules/primereact/resources/themes/saga-blue/theme.css 2:14-136 21:1-42:3 22:19-141
# ./src/index.js
I have not modified any of the common, dev and prod webpacks. I've read the other 2 questions posted around this but none of the answers worked.
I'll post the webpack configurations for your convenience.
Common:
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: path.resolve(__dirname, "../src", "index.js"),
},
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname, '../dist'),
publicPath: "/"
},
devServer: {
port: 3042,
historyApiFallback: true,
overlay: true,
open: true,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: [/node_modules/],
use: [{ loader: "babel-loader" }]
},
{
test: /.*\.(gif|png|jp(e*)g|svg)$/i,
use: [
{
loader: "url-loader",
options: {
limit: 21000,
name: "images/[name]_[hash:7].[ext]"
}
}
]
},
// Vendor CSS loader
// This is necessary to pack third party libraries like antd
{
test: /\.css$/,
include: path.resolve(__dirname, '../node_modules'),
use: [
'style-loader',
'css-loader'
],
},
]
},
plugins: [
new HtmlWebPackPlugin({
template: path.resolve(__dirname, '../public', 'index.html'),
}),
],
resolve: {
extensions: ['.js', '.jsx']
},
}
Dev:
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const mapStyle = process.env.MAP_STYLE === 'true';
module.exports = merge (common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
port: 3042,
historyApiFallback: true,
overlay: true,
open: true,
stats: 'errors-only'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: mapStyle ? "css-loader?sourceMap" : "css-loader" }
]
},
{
test: /\.s(a|c)ss$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
}),
],
});
Prod:
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const ManifestPlugin = require('webpack-manifest-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const enableBundleAnalyzer = process.env.ENABLE_ANALYZER === 'true';
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map',
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: "css-loader" }
]
},
{
test: /\.s(a|c)ss$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
},
]
},
optimization: {
splitChunks: {
chunks: 'all',
},
runtimeChunk: false,
},
plugins: [
new CleanWebpackPlugin([path.resolve(__dirname, '../dist')], {
root: process.cwd(),
verbose: true,
dry: false
}),
new OptimizeCssAssetsPlugin(),
new MiniCssExtractPlugin({
filename: "[name].[hash:8].css",
chunkFilename: "[id].[hash:8].css"
}),
new ManifestPlugin(),
new BundleAnalyzerPlugin({
analyzerMode: enableBundleAnalyzer === true ? 'static' : 'disabled',
openAnalyzer: true,
}),
],
});
And here is where I import them:
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import App from './components/App';
import store from './app/store';
import './assets/styles/style.sass';
import './assets/styles/style.css';
import './index.scss';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import 'primeflex/primeflex.css';
import 'primereact/resources/themes/saga-blue/theme.css';
import '/src/assets/styles/customTheme.scss';
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
// Check if hot reloading is enable. If it is, changes won't reload the page.
// This is related to webpack-dev-server and works on development only.
if (module.hot) {
module.hot.accept();
}
One of the questions answered this by saying that i needed the url-loader but, as you can see, the boilerplate contains that aswell.
I hope I gave you enough information. Thank you in advance.
I think I've found my answer. I needed to exclude node_modules from the css loader rules from both the dev and prod configurations since the common configuration was handling that. The error was thrown because there were 2 conflicting css loaders.
Can't load png and gif images in webpack.config.js
This issue came while running unit test using Mocha-webpack.
Here I have pasted my webpack.config.js.
How can I fix this issue??
I have tried with the image loader too for fix this, It won't work.
Any other way to fix this type of loader issue?
Here is the screenshot for that issue
'use strict'
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
// output: {
// path: path.resolve(__dirname, './dist'),
// publicPath: '/dist/',
// filename: 'build.js'
// },
resolve: {
extensions: ['.js', '.jsx', '.css'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': path.resolve(__dirname, 'src')
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg|css|eot|ttf)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.(jpg|jpeg|gif|png|css)$/,
loader: [ 'css-loader' ]
},
{
test: /\.(jpg|jpeg|gif|png)$/,
loader:'url-loader?limit=1024&name=images/[name].[ext]'
},
{
test: /\.(woff|woff2|eot|ttf|svg|png|gif)$/,
loader: 'url-loader?limit=1024&name=fonts/[name].[ext]'
},
{
test: /\.(png|jpg|svg)$/,
loader: 'file-loader',
query: {
name: './src/assets/[name]-[sha512:hash:base64:7].[ext]',
},
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)$/,
loader:['url-loader?limit=10000',
'img-loader']
},
{
test: /\.(woff(2)?|ttf|eot|png|gif|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
}
]
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
// test specific setups
if (process.env.NODE_ENV === 'test') {
module.exports.externals = [require('webpack-node-externals')()]
module.exports.devtool = 'eval'
devtool: 'inline-cheap-module-source-map'
}
Did you try using url-loader for loading images?
Like just replacing
{
test: /\.(png|jpg|gif|svg|css|eot|ttf)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
with
{
test: /\.(png|jpg|gif|svg|css|eot|ttf)$/,
loader: 'url-loader',
}
I want to have some dependencies in different chunks so client.js would be smaller. webpack 4.16.5
Why I get same code included to several chunks? What's missing?
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
mode: 'production',
target: 'web',
// devtool: 'source-map',
entry: {
echarts: ['echarts'],
vendor_1: ['react', 'immutable', 'lodash', 'redux', 'redux-saga'],
vendor_2: ['#material-ui/core', '#tinymce/tinymce-react'],
client: ['babel-polyfill', path.join(__dirname, 'app/index.js')],
},
output: {
path: path.join(__dirname, '/dist/'),
filename: '[hash].[name].js',
publicPath: './',
},
resolve: {
modules: [
path.join(__dirname, '/app'),
'node_modules',
],
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template: 'app/index.tpl.html',
inject: 'body',
filename: 'index.html',
}),
new BundleAnalyzerPlugin(),
],
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
}],
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]',
'sass-loader',
],
},
{
test: /\.woff(2)?(\?[a-z0-9#=&.]+)?$/,
use: [{
loader: 'url?limit=10000&mimetype=application/font-woff',
}],
},
{
test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/,
use: [{
loader: 'file',
}],
},
],
},
};
I added optimization config and it works now as expected.
optimization: {
splitChunks: {
chunks: 'initial',
},
},
I've played with values a bit and this was the best result for my code base without any extra code edits. You can find all possible options here:
https://webpack.js.org/configuration/optimization/
Thanks Pavel for the tip ;)
I'm getting the above error when I run the grunt dist, It worked perfectly fine with my other machine.
Please find my gruntfile.
$ grunt imagemin.
Running "imagemin:png" (imagemin) task
Minified 132 images (saved 134.02 kB)
Running "imagemin:gif" (imagemin) task
Fatal error: write EPIPE
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
server: {
options: {
port: 9001,
livereload: true,
hostname: 'localhost',
base: ['.']
}
}
},
watch: {
options: {
livereload: true
},
all: {
files: ['Content/**/*.scss'],
tasks: 'sass'
}
},
open: {
all: {
path: 'http://localhost:9001/app/index.html'
}
},
concat: {
style: {
src: [
"Content/font-awesome/css/font-awesome.min.css",
"Content/scss/all.scss",
"Content/scss/_buttons.scss"],
dest: 'Content/dist/scss/style.scss'
},
ie: {
cwd: 'Content',
expand: true,
src: [
"scss/ie9.scss",
"scss/ie8.scss"
],
dest: 'Content/dist'
}
},
sass: {
dist: {
options: {
style: 'expand',
compass: true,
},
files: {
'Content/dist/css/style.css': 'Content/dist/scss/style.scss',
'Content/dist/css/ie8.css': 'Content/dist/scss/ie8.scss',
'Content/dist/css/ie9.css': 'Content/dist/scss/ie9.scss'
}
}
},
cssmin: {
css:{
files: {
'Content/dist/ie8.css': 'Content/dist/css/ie8.css',
'Content/dist/ie9.css': 'Content/dist/css/ie9.css',
'Content/dist/style.css': 'Content/dist/css/style.css'
}
}
},
imagemin: {
png: {
files: [{
expand: true,
cwd: 'Images/',
src: '**/*.png',
dest: 'Images/dist/'
}]
},
gif: {
files: [{
expand: true,
cwd: 'Images/',
src: '**/*.gif',
dest: 'Images/dist/'
}]
},
ico: {
files: [{
expand: true,
cwd: 'Images/',
src: '**/*.ico',
dest: 'Images/dist/'
}]
},
jpg: {
files: [{
expand: true,
cwd: 'Images/',
src: '**/*.jpg',
dest: 'Images/dist/'
}]
},
jpeg: {
files: [{
expand: true,
cwd: 'Images/',
src: '**/*.jpeg',
dest: 'Images/dist/'
}]
}
},
clean: {
build : {
src: ['Content/dist/', 'Images/dist', 'Scripts/dist']
},
scss: {
src: ['Content/dist/scss', 'Content/dist/css']
},
map: {
src: 'Content/dist/css/*.map'
},
js: {
src: ['Scripts/temp']
}
},
compass: {
dist: {
options: {
sassDir: 'app/sass',
cssDir: 'Content/dist/css'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-open');
grunt.registerTask('server', function() {
grunt.task.run([
'connect',
'open',
'watch'
]);
});
grunt.registerTask('dist', 'Running the minification job for production', function() {
grunt.task.run([
'clean:build',
'concat',
'sass',
'cssmin',
'imagemin',
'clean:scss',
'clean:js'
]);
});
};