Develop Reference

Font urls path is wrong and includes css path after WebPack Build

I can't figure out the right combo here to make this all happy. I'm having MiniCssExtractPlugin create css or less files encountered.
I am importing a less and a css file in src/client/index.tsx:
import './less/master.less';
import '../../ext/ink-3.1.10/css/ink.min.css';
webpack.config.js is then doing its magic with MiniCssExtractPlugin:
Note: the reasons I have publicPath: '' for the css loader is because when I had it as publicPath: '/lib/css', it was appending that to the font url so by removing that the font-urls no longer had the issue at least after webpack created dist of the underlying problem I still see at runtime. Honestly I don't know if I even need to set publicPath here anyway because it defaults to "" anyway.
Changing it then to publicPath: '', stripped out the /lib/css part from /lib/css/lib/assets/fonts and I thought that fixed my issue but then during runtime it's still trying to hit fonts via /lib/css/lib/assets/fonts which baffles me
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
const html = () => {
return new HtmlWebPackPlugin({
template: path.resolve(__dirname, 'src/client', 'index.html'),
filename: 'index.html',
hash: true,
});
};
const copyAllOtherDistFiles = () => {
return new CopyPlugin({
patterns: [
{ from: 'src/client/assets', to: 'lib/assets' },
{ from: 'package.json', to: './' },
{ from: 'ext/ink-3.1.10/js/ink-all.min.js', to: 'lib/js' },
{ from: 'ext/ink-3.1.10/js/autoload.min.js', to: 'lib/js' },
{ from: 'ext/js/jquery-2.2.3.min.js', to: 'lib/js' },
{ from: 'feed.xml', to: './' },
{
from: 'src/shared',
to: './shared',
globOptions: {
ignore: ['**/*suppressed.json'],
},
},
],
});
};
module.exports = {
entry: './src/client/index.tsx',
output: {
filename: 'scripts/app.[hash].bundle.js',
publicPath: '',
path: path.resolve(__dirname, 'dist'),
},
resolve: {
extensions: ['.ts', '.tsx', '.js'],
},
devtool: isProduction ? '' : 'eval-cheap-source-map',
devServer: {
writeToDisk: true,
contentBase: path.resolve(__dirname, 'dist'),
port: 8080,
},
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true,
},
},
},
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.(tsx|ts)?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
},
],
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '',
},
},
'css-loader',
],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
loader: 'file-loader',
options: {
outputPath: 'lib/assets/fonts',
},
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['url-loader'],
},
],
},
plugins: [
new CleanWebpackPlugin(),
copyAllOtherDistFiles(),
new MiniCssExtractPlugin({
filename: isProduction ? 'lib/css/[name].[hash].css' : 'lib/css/main.css',
}),
html(),
],
};
api.js
const compression = require('compression'),
express = require('express'),
historyApi = require('connect-history-api-fallback'),
oneYear = 31536000;
module.exports = express()
.use(compression())
.on('error', (err: string) => {
console.log(err);
})
.use(historyApi())
.use(
express.static('dist', {
maxage: oneYear,
})
)
.use((_req: any, res: any) => {
res.send('Sorry, Page Not Found');
});
So the issue comes up during runtime with ink.min.css because it's referencing some fonts that I also processed with file-loader as you can see above. The problem is when I run the site in Dev mode via NODE_ENV=development webpack-dev-server --open I end up with a few requests for those fonts because it's appending /lib/css/lib/assets/fonts instead of just /lib/assets/fonts during runtime:
The weird thing about this though is when I go to my dist folder, when I look at styles.main.css (which apparently it renamed ink.min.css to this for some odd reason, the url to the fonts don't have that extra /lib/css so I don't understand why when my browser loads it's trying to reference it with that extra part still:
Another thing that's kinda weird is I do see images loading but when I look at the source in the browser, I don't see my assets folder. I know dist definitely contains it, but it doesn't show it here:

I don't understand why this fixed it. This entire thing feels hacky to me.
I changed it to publicPath: '../../'
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../../',
},
},
'css-loader',
],
I guess I'm loading my .css file and then I'm under the context of /lib/css already so my font urls have /lib/css I guess? and I need to for some reason have MiniCssExtractPlugin have a public path at the root? I don't get it.
Also now I see the assets folder, wt???

webpack Module not found issue

I'm new in Webpack (before I used Gulp) and now I want to move the existing application from Gulp to Webpack.
But I'm getting issues like Module not found: Error: Can't resolve '/src/app/index.js' in '/var/www/project' or Module not found: Error: Can't resolve '/src/styles/main.scss' in '/var/www/project' and same for every file i'm using on my enty chain.
Here is my file structures:
package.json
.env
.env.example
webpack.conf.js
src/
app/
index.js
other js/vue related files
styles/
main.scss and all related styles
public/
index.html
favicon.ico
images/
all images
and here is mine webpack.conf.js:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const Dotenv = require('dotenv-webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const ENV = process.env.APP_ENV;
const isDev = ENV === 'dev'
const isProd = ENV === 'prod';
function setDevTool() {
if (isDev) {
return 'inline-source-map';
} else if (isProd) {
return 'source-map';
} else {
return 'eval-source-map';
}
}
const config = {
entry: {
'bundle.min.css': [
path.resolve(__dirname, '/src/styles/main.scss'),
],
'bundle.js': [
path.resolve(__dirname, '/src/app/index.js')
]
},
output: {
filename: '[name]',
path: path.resolve(__dirname, 'dist'),
},
devtool: setDevTool(),
module: {
rules: [
// fonts loader
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
},
// babel loader
{
test: /\.js$/,
use: 'babel-loader',
exclude: [
/node_modules/
]
},
// raw html loader
{
test: /\.html/,
loader: 'raw-loader'
},
// css loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
// sass loader
{
test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['style-loader', 'css-loader', 'sass-loader']
})
},
// vue loader
{
test: /\.vue$/,
loader: 'vue-loader'
},
// image url inliner
{
test: /\.(jpe?g|png|gif)$/,
loader: 'url-loader',
options: {
limit: 50 * 1024
}
},
// svg url inliner
{
test: /\.svg$/,
loader: 'svg-url-loader',
options: {
limit: 50 * 1024,
noquotes: true,
}
},
// image loader
{
test: /\.(jpg|png|gif|svg)$/,
loader: 'image-webpack-loader',
enforce: 'pre'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + "/src/public/index.html",
inject: 'body'
}),
new Dotenv({safe: true}),
new ExtractTextPlugin("bundle.min.css"),
new VueLoaderPlugin()
],
devServer: {
contentBase: './src',
port: 7700,
}
}
if (isProd) {
config.plugins.push(
new UglifyJSPlugin(),
new CopyWebpackPlugin([{
from: __dirname + '/src/public'
}])
);
};
module.exports = config;
I do not understand why it can't find those files if for examlpe '/var/www/project//src/styles/main.scss' it mention in error is correct path?

Try to remove the initial slashes from path.resolve(). For example:
path.resolve(__dirname, '/src/styles/main.scss')
should be:
path.resolve(__dirname, 'src/styles/main.scss')

Webpack recompiles CSS but does not update

Using webpack 4.1.1 and webpack-dev-server I have the following webpack.dev.js file
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin')
const src = path.resolve(__dirname, "../");
const build = path.resolve(__dirname, "../../build");
const components = path.resolve(__dirname, "../components");
const icons = path.resolve(__dirname, "../static/icons");
const images = path.resolve(__dirname, "../static/images");
const context = path.resolve(__dirname, 'src');
module.exports = {
mode: 'development',
entry: `${src}/index.js`,
output: {
filename: "bundle.js",
path: build
},
resolve: {
alias: {
components: components,
icons: icons,
images: images
}
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
path: build
}),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
],
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
plugins: [
"transform-react-jsx",
[
"react-css-modules",
{
context
}
]
]
}
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader:'css-loader',
options:{
modules: true
}
}
]},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
},
},
],
},
{
test: /\.svg/,
use: {
loader: 'svg-url-loader',
options: {}
}
}
]
},
};
My issue is that when I update a CSS file, i watch the terminal, it says it compiles successfully, however I don't see the changes in the browser. Even when I navigate directly do localhost:8080/main.css, the old CSS file is still shown. The only way I can get the CSS to successfully recompile is to stop the dev server and start it all over again.
FWIW, here is my startup script:
$ ./node_modules/.bin/webpack-dev-server --config ./src/config/webpack.dev.js --content-base build/ --content-base src/static
Can someone tell me what I'm missing here?

Can the PurifyCss plugin be forced to wait until the bundle is ready?

My first "Hello Webpack" project was going great until I started integrating purifycss-webpack. If I delete my /dist folder manually and then build, this config works. But if the /dist folder exists and CleanWebpackPlugin deletes it as its designed to do, then PurifyCSS throws this error:
clean-webpack-plugin: \dist has been removed.
purifycss-webpack\dist\index.js:52 \ if (!_fs2.default.existsSync(p))
throw new Error('Path ' + p + ' does not exist.');
Is there another way to have Webpack run PurifyCSS only AFTER all the other plugins have executed? I thought I was doing that by placing it last in the plugins array, but this feels like execution order issues to me. Here's my config:
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const globAll = require('glob-all');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const PurifyCSSPlugin = require('purifycss-webpack');
const webpack = require("webpack");
var extractPluginCSS = new ExtractTextPlugin({
filename: "app.css"
});
module.exports = {
entry: "./src/js/app.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "app.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
presets: ["env"]
}
}
]
},
{
test: /app\.scss$/,
use: extractPluginCSS.extract({
use: [
{
loader: "css-loader",
options: {}
},
{
loader: "sass-loader",
options: {}
}
]
})
},
{
test: /\.html$/,
use: ["html-loader"]
},
{
test: /\.(jpg|png)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "img/"
}
}
]
}
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template: "./src/html/index.html"
}),
new webpack.optimize.UglifyJsPlugin(),
extractPluginCSS,
new PurifyCSSPlugin({
// Give paths to parse for rules. These should be absolute!
paths: globAll.sync([
path.join(__dirname, '/dist/*.html')
]),
// minimize: true,
verbose: true
})
]
};

"Can't resolve 'syncfusion-javascript'" Webpack - Aurelia

I'm trying to integrate Syncfusions' Js library with an Aurelia project using the Aurelia Syncfusion Bridge, but i'm getting the following error when trying to load the plugin into my vendor package.
ERROR in dll vendor
Module not found: Error: Can't resolve 'syncfusion-javascript' in 'C:\Users\Liam\Downloads\aurelia-webpack1333503894'
# dll vendor
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
const bundleOutputDir = './wwwroot/dist';
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
return [{
stats: { modules: false },
entry: { 'app': 'aurelia-bootstrapper' },
resolve: {
extensions: ['.ts', '.js'],
modules: ['ClientApp', 'node_modules'],
},
output: {
path: path.resolve(bundleOutputDir),
publicPath: 'dist/',
filename: '[name].js'
},
module: {
rules: [
{ test: /\.ts$/i, include: /ClientApp/, use: 'ts-loader?silent=true' },
{ test: /\.html$/i, use: 'html-loader' },
{ test: /\.css$/i, use: isDevBuild ? 'css-loader' : 'css-loader?minimize' },
{ test: /\.(png|jpg|jpeg|gif|cur|svg)$/, use: 'url-loader?limit=25000' },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', query: { limit: 10000, mimetype: 'application/font-woff2' } },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', query: { limit: 10000, mimetype: 'application/font-woff' } },
{ test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' },
]
},
plugins: [
new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
}),
new AureliaPlugin({ aureliaApp: 'boot' }),
].concat(isDevBuild ? [
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
new webpack.optimize.UglifyJsPlugin()
])
}];
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-
webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('vendor.css');
module.exports = ({ prod } = {}) => {
const isDevBuild = !prod;
return [{
stats: { modules: false },
resolve: {
extensions: ['.js']
},
module: {
loaders: [
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
{ test: /\.css(\?|$)/, loader: extractCSS.extract([isDevBuild ? 'css-loader' : 'css-loader?minimize']) }
]
},
entry: {
vendor: [
'aurelia-event-aggregator',
'aurelia-fetch-client',
'aurelia-framework',
'aurelia-history-browser',
'aurelia-logging-console',
'aurelia-pal-browser',
'aurelia-polyfills',
'aurelia-route-recognizer',
'aurelia-router',
'aurelia-templating-binding',
'aurelia-templating-resources',
'aurelia-templating-router',
'bootstrap',
'bootstrap/dist/css/bootstrap.css',
'jquery',
"aurelia-syncfusion-bridge",
"syncfusion-javascript"
],
},
output: {
path: path.join(__dirname, 'wwwroot', 'dist'),
publicPath: 'dist/',
filename: '[name].js',
library: '[name]_[hash]',
},
plugins: [
extractCSS,
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.DllPlugin({
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
name: '[name]_[hash]'
}),
new ModuleDependenciesPlugin({
"aurelia-syncfusion-bridge": ["./grid/grid", "./grid/column"],
}),
].concat(isDevBuild ? [] : [
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
])
}]
};

Thanks for your interest towards Syncfusion controls.
We recommend you to configure aurelia-syncfusion-bridge resources in webpack.config.js file. Because aurelia-syncfusion-bridge’s resources are traced by aurelia-webpack-plugin and included in app.bundle.
Suppose If we add this plugin in webpack.vendor.js, we need to bundle manually for every additional aurelia-syncfusion-bridge’s resources for proper bundling. Since, we recommend to configure our bridge in webpack.config.js, which will automatically bundle the bridge source along with application bundle.
We have prepared sample for the same and attached below.
Sample
Please let us know if you need further assistance on this.
Thanks,
Abinaya S