We Keep Coding

ChunkLoadError: Loading chunk 597 failed. React webpack

i am creating react library. when i use that libary in my project i am facing this issue
(https://i.stack.imgur.com/HymU0.png)](https://i.stack.imgur.com/HymU0.png)
This is my webpack.config file
var path = require("path");
module.exports = {
mode: "production",
entry: "./tables.js",
output: {
// path: path.resolve("build"),
libraryTarget: "umd",
path: __dirname + '/dist',
publicPath: '/',
filename: 'index.js',
},
module: {
rules: [
{
test: /\.jsx?$/, exclude: /node_modules/
, use: {
loader: 'babel-loader',
options: {
presets: [
['#babel/preset-env', { targets: "defaults" }, '#babel/preset-react'
]
],
plugins: ['#babel/plugin-proposal-class-properties']
}
}
},
{
test: /\.(s*)css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
]
},
externals: {
'react': 'react',
}
};
i am expecting to load this chunk in my project without facing this issue

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
})
]
};

webpack does not include css file

I have build a react-stepper and uploaded it to github.
When i want to build my App, webpack does not include font-awesome css. But it includes my own style.scss file. I use the style loader in webpack.
In dev mode everything works fine. Only in build mode it does not work.
Here is my repo:
https://github.com/tkwant/react-stepper-wizard
Here is my webpack.build.config file:
const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports = {
entry: "./src/index.js",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.(scss|css)$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}
]
},
resolve: {
extensions: ["*", ".js", ".jsx"]
},
output: {
path: __dirname + "/dist",
publicPath: "/",
filename: "react-stepper-wizard.js",
library: "Stepper",
libraryTarget: "umd"
},
externals: ["react", "react-dom", "font-awesome"],
plugins: [
new CleanWebpackPlugin(["dist"]),
new webpack.HotModuleReplacementPlugin()
],
devtool: "source-map",
devServer: {
contentBase: "./examples",
hot: true,
port: 9001
}
};
It would be fine if somebody can help me here or can do a PR to fix this problem.

You're copying a .css file, right?
You may want to try the webpack-copy-plugin

solution was to use url loader.
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },

Webpack 3 minify css

I am using webpack 3 and I have the following Webpack config file:
var webpack = require("webpack");
var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: [
"./src/index.tsx", "./src/assets/css/styles.css"
],
output: {
filename: "bundle.js",
publicPath: "/",
path: path.resolve(__dirname, "dist")
},
// Enable sourcemaps for debugging webpack's output.
// devtool: "cheap-module-source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new ExtractTextPlugin({
filename: (getPath) => {
return getPath('assets/css/styles.css').replace('css/js', 'css');
},
allChunks: true
})
],
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, use: ["awesome-typescript-loader"] },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ test: /\.js$/, enforce: "pre", use: "source-map-loader" },
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
// If you are having trouble with urls not resolving add this setting.
// See https://github.com/webpack-contrib/css-loader#url
url: false,
minimize: true,
sourceMap: true
}
}
]
})
}
],
loaders: [ {
test: /\.js|.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
}, {
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
} ]
}
};
I can see the css file generated into build folder, but it is not minified at all, I would like it to be as in one line all the css so it will be optimized, minified.
I dont know if I am using the right plugin in this case for this to happen.
Anyone have any idea what I am doing wrong here?

Webpack Angular 2 bundle whole project in single file

I am trying to bundle whole my Angular 2 project in one single index.html file (js, fonts, css and images).
Below is my current webpack config file, what should I do or update here to bundle all in one file, (with map file) if it is possible ?
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app/main.ts',
output : {
path: './dist',
filename: 'app.bundle.js'
},
module: {
preLoaders: [
{
test: /\.ts$/,
loader: 'tslint'
}
],
loaders : [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.(html)$/,
loader: 'raw-loader'
},
{
test: /.(jpg|jpeg|gif|png|eot|ttf|svg|cur|woff(2)?)(\?[a-z0-9=\.]+)?$/,
loaders: ['raw-loader', 'url-loader']
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
},
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
},
]
},
resolve: {
extensions: ['', '.ts', '.tsx', '.js', '.jsx']
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
]
};