Related
I'm having an issue with my webpack application not loading fonts with type: 'asset/resource' honestly, it won't load many things that use asset/resource type but sticking to one issue :)
Here's my webpack.config.js file
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
module.exports = {
entry: path.join(__dirname, './react-client/src', 'index.jsx'),
output: {
path: path.resolve(__dirname, './react-client/dist'),
filename: 'index_bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Project-Atelier',
filename: 'index.html',
template: './react-client/src/index.html',
}),
new MiniCssExtractPlugin(),
],
mode: 'development',
module: {
rules: [
{
test: /\.(js|jsx)?/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.html$/i,
loader: 'html-loader',
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
loader: 'url-loader',
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
},
],
},
};
And my css file where I'm trying to import the font (the font I'm importing is indeed in the current folder. I placed it there to test.)
#font-face {
font-family: 'Roboto-Regular';
src: url('./Roboto-Black.ttf') format('truetype');
}
body {
font-family: 'Roboto-Regular';
font-size: 3rem;
}
Here's some details on my dependencies. All should be up to date.
// package.json
...
"dependencies": {
"axios": "^0.26.1",
"prop-types": "^15.8.1",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"styled-components": "^5.3.5",
"uniqid": "^5.4.0",
"url-loader": "^4.1.1"
},
"devDependencies": {
"#babel/core": "^7.17.8",
"#babel/plugin-transform-runtime": "^7.17.0",
"#babel/preset-env": "^7.16.11",
"#babel/preset-react": "^7.16.7",
"#testing-library/dom": "^8.12.0",
"babel-loader": "^8.2.4",
"css-loader": "^6.7.1",
"eslint": "^8.12.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.4.0",
"express": "^4.17.3",
"html-loader": "^3.1.0",
"html-webpack-plugin": "^5.5.0",
"jest": "^27.5.1",
"mini-css-extract-plugin": "^2.6.0",
"nodemon": "^2.0.15",
"webpack": "^5.71.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
}
...
I'm thinking it has something to do with babel but I could be wrong. EVERYTHING is working but importing fonts.I even tried changing css within the file I'm showing and changes worked. But not for fonts. An interesting observation I found is that I can't even add images with webpack using type: 'asset/resource' I have to use use: 'url-loader'
Been at this for a couple hours and still looking for answers.
Here's the error!
Error output from webpack.
Figured out my problem... in module.rules for babel-loader
on the line that has test: /\.(js|jsx)?/ rewriting it as test: /\.(js|jsx)$/ fixed the issue. It was just a single character that messed it up ? when it should have been a $.
I want to use webpack so that it will automatically compile any and all .scss files in my /src/app folder into a single .css file without me having to explicity point to all of the .scss files / import them.
I am trying to use ExtractTextPlugin to do this but it does not seem to be working. Do I need to provide a more specific entry point? Are my loaders not configured correctly? Or is there something else wrong? Thanks!
webpack.config.js:
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const DIST_DIR = path.resolve(__dirname, "dist");
const SRC_DIR = path.resolve(__dirname, "src");
const config = {
devtool: 'inline-source-map',
entry: [
"babel-polyfill",
SRC_DIR + "/app/index.js"
SRC_DIR + "/app/"
],
target: 'web',
output: {
path: DIST_DIR + "/app/",
filename: "bundle.js",
publicPath: "/app/"
},
devServer: {
contentBase: './dist',
historyApiFallback: true,
hot: true,
proxy: {
'/api': {
target: 'http://localhost:5001',
secure: false,
},
}
},
plugins: [
new ExtractTextPlugin({filename: "foo.css", allChunks: true})
],
module: {
rules: [
{
enforce: "pre",
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
failOnWarning: false,
failOnError: true
}
},
{
test: /\.js$/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'stage-2']
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader?importLoaders=1',
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract(['css-loader', 'sass-loader']),
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: ['file-loader?context=src/images&name=images/[path][name].[ext]', {
loader: 'image-webpack-loader',
query: {
mozjpeg: {
progressive: true,
},
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
pngquant: {
quality: '75-90',
speed: 3,
},
},
}],
exclude: path.resolve(__dirname, "node_modules"),
include: __dirname,
},
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
// loader: "url?limit=10000"
use: "url-loader"
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
use: 'file-loader'
},
]
},
};
module.exports = config;
package.json
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest",
"watch": "webpack --progress --watch",
"start": "yarn build",
"build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --inline --hot --history-api-fallback",
"build:dev": "webpack && cp src/index.html dist/index.html",
"build:prod": "webpack -p && cp src/index.html dist/index.html"
},
"author": "",
"license": "UNLICENSED",
"devDependencies": {
"babel-cli": "7.0.0-beta.3",
"babel-eslint": "7",
"babel-loader": "^7.1.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.7",
"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.0.1",
"eslint": "3.x",
"eslint-config-airbnb": "^15.1.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.4.0",
"extract-text-webpack-plugin": "^3.0.0",
"fetch-mock": "^6.0.0-beta.7",
"file-loader": "^0.11.2",
"image-webpack-loader": "^3.4.2",
"jest": "^23.1.0",
"jest-enzyme": "^4.0.0",
"jest-fetch-mock": "^1.6.4",
"node-sass": "^4.9.0",
"redux-mock-store": "^1.5.3",
"sass-loader": "^6.0.6",
"url-loader": "^0.5.9",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
},
"dependencies": {
"#trendmicro/react-toggle-switch": "^0.5.7",
"babel-polyfill": "^6.26.0",
"cross-fetch": "^1.1.1",
"font-awesome": "^4.7.0",
"highcharts": "^6.0.4",
"history": "^4.7.2",
"js-cookie": "^2.2.0",
"less-loader": "^4.0.5",
"libphonenumber-js": "^0.4.42",
"lodash": "^4.17.4",
"moment": "^2.19.1",
"prop-types": "^15.6.0",
"query-string": "^5.0.1",
"rc-time-picker": "^3.1.0",
"react": "^16.0.0",
"react-animations": "^1.0.0",
"react-autosuggest": "^9.3.4",
"react-circular-progressbar": "^0.8.0",
"react-datepicker": "^0.59.0",
"react-dom": "^16.0.0",
"react-highcharts": "^15.0.0",
"react-list": "^0.8.8",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.6",
"react-select": "^1.0.0-rc.10",
"react-transition-group": "^1.2.0",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"styled-components": "3.2.3",
"twilio-client": "^1.4.33"
},
"jest": {
"setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js"
}
}
without me having to explicity point to all of the .scss files /
import them.
You can't do that, webpack is not like gulp or other task runner that you can just point patterns and it will apply transformations to them.
Webpack works with dependency graphs, and these graphs are going to start from your entry points. On each entrypoint it reads the dependencies and apply those loaders specified for each file extension. Webpack only knows the existence of that file, if it is imported in any file that is part of the dependency graph.
If you want to transform css the way that you described, i suggest you moving towards a more task runner library such as gulp.
I'm using Webpack in my application, in which I create my entry point as
index.ts and I'm trying to run it using sass css bootstrap typescript as resources in my project webpack, but I am stuck with these errors,(bootstrap-loader) :
ERROR in ./node_modules/bootstrap-loader/no-op.js
(./node_modules/bootstrap-loader/lib/bootstrap.scripts.loader.js?{"bootstrapVersion":3,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style-loader","css-loader","sass-loader"],"styles":["mixins","normalize","print","glyphicons","s
caffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"/projects/bootstrapwebpack/node_modules/bootstrap-loader/.bootstraprc-3-default","bootstrapPath":"/projects/bootstrapwebpack/node_modules/bootstrap-sass","bootstrapRelPath":"../bootstrap-sass"}!./node_modules/bootstrap-loader/no-op.js)
...
In my config.js I have :
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: [ 'bootstrap-loader', './src/index.ts',],
module: {
rules:[
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
],
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
},
},
],
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
exclude: /node_modules/
},
// Boooootstrap
{
test: /bootstrap-sass\/assets\/javascripts\//,
loader: 'imports-loader?jQuery=jquery'
},
{
test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000'
},
{
test: /\.(ttf|eot)$/, loader: 'file-loader'
},
],
},
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
Currently I'm trying to use in my package.json these following lines :
{
"name": "test",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "webpack --mode development --watch ",
"build": "webpack --progress -p --watch "
},
"dependencies": {
"autoprefixer": "^9.0.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"bootstrap": "^4.1.2",
"bootstrap-loader": "^3.0.0",
"bootstrap-sass": "^3.3.7",
"css-loader": "^1.0.0",
"exports-loader": "^0.7.0",
"file-loader": "^1.1.11",
"image-webpack-loader": "^4.3.1",
"jquery": "^3.3.1",
"mini-css-extract-plugin": "^0.4.1",
"node-sass": "^4.9.2",
"popper.js": "^1.14.3",
"postcss-loader": "^2.1.6",
"resolve-url-loader": "^2.3.0",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"ts-loader": "^4.4.2",
"typescript": "^2.9.2",
"url-loader": "^1.0.1",
"webpack": "^4.16.0",
"webpack-cli": "^3.0.8"
}
}
I had the same problem yesterday.
Try adding in ./src/index.ts
require 'bootstrap/dist/css/bootstrap.min.css';
require 'bootstrap/dist/js/bootstrap.min.js';
I have a project that's using webpack and electron. I updated my app to use the latest version of electron as it was using electron-prebuilt. Since updating to the latest version I am now unable to compile my app due to this error. I've tried some suggestions from other SO posts which suggest editing webpack.config and added
node: {
fs: 'empty'
},
I still get the same fs not found error. I also tried to set the target to electron, however when I do that I get a string of errors and none of my modules load, is there a workaround available for this issue? I'm not sure if this is a webpack related issue or an electron issue.
Here's my webpack.config
var webpack = require('webpack');
//Loaders & Webpack config
module.exports = {
entry: {
app: ['webpack/hot/dev-server', './app/app.js'],
},
output: {
path: './app/dist',
filename: 'bundle.js',
publicPath: 'http://localhost:8080/dist/'
},
devServer: {
contentBase: './app',
publicPath: 'http://localhost:8080/dist/'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015']
}
},
{ test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.png$/,
loader: "file-loader"
},
{
test: /\.jpg$/,
loader: "file-loader"
}
]
},
node: {
fs: 'empty'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(new RegExp("^(fs|ipc)$"))
],
}
package.json
{
"name": "factory",
"productName": "Factory",
"description": "",
"author": ,
"version": "0.1.0",
"main": "main.js",
"devDependencies": {
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"bootstrap": "^4.0.0-alpha.4",
"bootstrap-css": "^4.0.0-alpha.5",
"bootstrap-sass": "^3.3.7",
"css-loader": "^0.23.1",
"electron-packager": "^5.2.1",
"electron-rebuild": "^1.1.3",
"exports-loader": "^0.6.4",
"file-loader": "^0.8.5",
"imports-loader": "^0.7.1",
"node-libs-browser": "^1.0.0",
"node-sass": "^4.5.2",
"resolve-url-loader": "^2.0.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.13.2",
"url-loader": "^0.5.8",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.14.1"
},
"scripts": {
"start": "./node_modules/.bin/electron .",
"watch": "./node_modules/.bin/webpack-dev-server",
"build": "electron-packager ./ --platform=darwin,win32 --arch=x64 --prune --overwrite"
},
"dependencies": {
"dragula": "^3.7.2",
"electron-prebuilt": "^0.37.2",
"electron-tabs": "^0.6.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-onclickout": "^2.0.4",
"react-router": "^2.4.0",
"redux": "^3.6.0"
}
}
Set target: 'electron-main' in your Webpack configuration.
I had a similar issue when working on NWjs with webworkers. First, make sure you set the right target option to "node-webkit", "webworker", "node", etc. Then, annotate the module like this:
externals:{
"fs": "commonjs fs"
}
This will tell webpack to load it as a module, as opposed to assuming the dependency is already in the environment.
webpack nwjs
I'm currently working on a webpack2 + react + antd-mobile application, everything's working except styles not loaded(.css/.less). I can't really find the problem, there are no error printed on the console.
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
// antd-mobile SVG配置方式
const svgDirs = [
require.resolve('antd-mobile').replace(/warn\.js$/, ''),
path.resolve(__dirname, 'src/assets/svg'),
];
module.exports = {
devtool: 'source-map',
context: path.join(__dirname, 'src'),
entry: './index',
output: {
filename: '[hash].js',
},
resolve: {
modules: ['node_modules', path.join(__dirname, 'src')],
extensions: ['.web.js', '.js', '.json', '.less', '.css'],
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.(css|less)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader', 'less-loader'],
}),
},
{
test: /\.html$/,
loader: 'html-loader',
},
{
test: /\.(svg)$/i,
use: 'svg-sprite-loader',
include: svgDirs,
},
],
},
plugins: [
new ExtractTextPlugin('main.css'),
new HtmlWebpackPlugin({
template: 'index.html',
hash: true,
}),
new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.NODE_ENV === 'development' || 'true')),
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: () => {
return [
pxtorem({ rootValue: 100, propWhiteList: [] }),
autoprefixer,
];
},
},
}),
],
};
I can import less in but style is not loaded and no error output shown on the console;
import styles from './styles/AssetItem.less';
package.json
{
"private": true,
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --hot --port 8000",
"build": "webpack -p --progress --colors",
"lint": "eslint --ext .js src test"
},
"dependencies": {
"antd-mobile": "^1.1.0",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"react": "15.4.2",
"react-dom": "15.4.2",
"react-native": "0.42.3",
"react-redux": "^5.0.4",
"react-router": "^4.1.1",
"react-router-redux": "^4.0.8",
"redux": "^3.6.0",
"redux-saga": "^0.14.8",
"regenerator-runtime": "^0.10.3"
},
"devDependencies": {
"autoprefixer": "^6.7.7",
"babel-core": "^6.24.1",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.0.0",
"babel-plugin-import": "^1.1.1",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"cross-env": "^4.0.0",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3",
"extract-text-webpack-plugin": "^2.1.0",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"less": "^2.7.2",
"less-loader": "^4.0.3",
"postcss": "^5.2.17",
"postcss-loader": "^1.3.3",
"postcss-pxtorem": "^4.0.0",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.3.6",
"style-loader": "^0.16.1",
"svg-sprite-loader": "^0.3.1",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.5"
}
}
I don't know if it can help you but there my part to resolve css file with webpack2
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: false
}
}
]
},
this should work:
module: {
rules: [
{
test: /.js$/,
use: [
{ loader: 'babel-loader' }
],
},
{
test: /(\.css|\.less)$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: "css-loader!less-loader",
}),
},
],
},
plugins: [
new ExtractTextPlugin('main.css'),
],
I think, the problem is that you forgot about new ExtractTextPlugin syntax, more information you can read here: https://webpack.js.org/guides/migrating/#extracttextplugin-extract
plugins: [
new ExtractTextPlugin({
filename: "main.css"
})
You should add path for output files
output: {
filename: '[hash].js',
path: path.resolve(__dirname, 'public'),
},