I have this code In my webpack.config.prod.js and I was wondering how do I exclude all json except one in a specific path like src/configs/configs
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
}
...
According to the Webpack documentation, you can do something like this.
exclude: {
test: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
exclude: [
'src/configs/configs/your.json'
]
}
To make exclude work I had to escape the dot in the specific file I wanted to exclude. Here's an example of excluding favicon.ico from a general rule and adding a special rule for it:
{
test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
exclude: /favicon\.ico$/,
loader: 'file-loader',
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// A special rule for favicon.ico to place it into build root directory.
{
test: /favicon\.ico$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash:8]',
},
},
For Webpack 5:
{
test: /\.(png|svg|jpg|jpeg|gif)$/,
type: 'asset/resource',
},
{
test: /favicon\.ico$/,
type: 'asset/resource',
generator: {
filename: '[name][ext]',
},
},
Related
I'm using the new version of Ecma Script preset in Webpack 4 but It still throws the error.
(currently, my bundle.js file size is about 5MB and it's so huge. In addition to UglifyJs, please let me know any other advice to decrease bundle size in Webpack 4 and ReactJs if you know)
Here is the error:
ERROR in bundle.js from UglifyJs
Unexpected token: keyword (const) [bundle.js:4981,0]
and here is my Webpack config:
{
...
...
module: {
rules: [
{
query: {
presets: ['react', 'env', 'stage-3'],
compact: false
},
test: /\.js$/,
loader: 'babel-loader',
exclude: /(node_modules|bower_components)/
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.(eot|otf|ttf|woff|woff2)$/,
loader: 'file-loader?name=./fonts/[name].[ext]'
},
{
test: /\.(jpg|jpeg|png|gif|svg)$/,
loader: 'file-loader?name=./images/[name].[ext]'
},
{
test: /\.css$/,
exclude: /node_modules/,
include: [
resolve(__dirname, "not_exist_path")
],
loader: 'style-loader!css-loader'
},
]
},
...
...
optimization: {
minimizer: [new UglifyJsPlugin()]
},
}
What am I doing wrong? where is the problem?
I want to include a file twice through two different loaders. The reasoning is I want to display code snippets in ES6 while allowing them to be run in browsers not supporting the syntax.
Effectively what I would like to achieve is the below but with both loaders results being included in the output -
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.(js|jsx)$/,
include: /app\/examples/,
use: [
{
loader: "file-loader",
options: {
regExp: /app\/examples\/([^\/]+)\/([^\.]+)+\.jsx?$/,
name: 'examples/[1]/[2].example',
}
}
]
}
With the above in my webpack config
import example from '../../examples/simple/ex1'
results in
Module {default: "examples/simple/ex1.example", __esModule: true, Symbol(Symbol.toStringTag): "Module"}
Rather than the code run through babel as I would have hoped for.
const multi = require('multi-loader');
const combineLoaders = require('webpack-combine-loaders');
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
include: /app\/examples/,
loader: multi(combineLoaders([
{ loader: 'file-loader' },
{ loader: 'babel-loader' },
]))
},
]
}
This should do the trick. you have to also use combineLoaders as you have to use options object. inside combine loaders array you can pass loader configuration also.
I couldn't manage to handle this with loaders in the end - although with further reading I don't believe this was the correct approach anyway. Instead i'm now using copy-webpack-plugin to copy the files -
plugins: [
new CopyWebpackPlugin([ {
from: path.join(rootDir, 'app', 'examples'),
to: path.join(outputDir, 'examples')
}])
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
}
I need to add the react-froala-wysiwyg editor to my ReactJs application. I installed the package and I insert this snippet in my component :
// Require Editor JS files.
import 'froala-editor/js/froala_editor.pkgd.min.js';
// Require Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
// Require Font Awesome.
import 'font-awesome/css/font-awesome.css';
import FroalaEditor from 'react-froala-wysiwyg';
<FroalaEditor model={this.state.infos} />
In the webpack.js :
module: {
rules: [
{ test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
{ test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
loader: 'url-loader?limit=1024&name=images/[name].[ext]',
exclude: /node_modules/
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml"
}
]
},
I get this error :
in ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0
in./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0
in ./~/font-awesome/fonts/fontawesome-webfont.eot in
in ./~/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0
in ./~/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0
in ./~/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0
You may need an appropriate loader to handle this file type.
So I need to know how can I edit the webpack coonfig file to fix this issue ?
Thanks,
Looks like you could use file-loader -
Install with npm npm install file-loader
update your loaders:
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
}
What's wrong with my code below? I got error bundling less files, for example
ERROR in ./~/less-loader!./resources/assets/js/bundle/components/widget/clock.less
Below is my webpack.config.js
module: {
loaders: [
{
test: /\.js?$/,
exclude: /node_modules/,
loaders: ["react-hot", "babel-loader","babel?presets[]=react,presets[]=es2015,presets[]=stage-0"],
},
{
test: /\.less$/,
loaders: ['style-loader','less-loader']
}
]
}
I'm trying to implement hot reloading.
If you're using webpack v1:
module: {
loaders: [
{
test: /\.js?$/,
exclude: /node_modules/,
loaders: ["babel-loader","babel?presets[]=react,presets[]=es2015,presets[]=stage-0"],
},
{
test: /\.less$/,
loaders: ['style-loader','css-loader', 'less-loader']
}
]
}
or if you're using webpack v2:
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
use: ["babel-loader","babel?presets[]=react,presets[]=es2015,presets[]=stage-0"],
},
{
test: /\.less$/,
use: ['style-loader','css-loader', 'less-loader']
}
]
}
As your webpack is reaching the less-loader, I don't see any issue in configuration. Otherwise it prompts issue with webpack configuration.
Now you need to check your file here resources/assets/js/bundle/components/widget/clock.less
It is the place which is having issues.
If not please share complete error, this is just the first line of error.
The PNGs files works fine:
.marker {
background: url(../assets/marker.png)
But when I change them to an SVG background:
.marker {
background: url(../assets/marker.svg)
I get this: error on line 1 at column 1: Document is empty. In other words, Webpack can't find the path of the SVG file, generating something like this: data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICIyOWE3OGMyODg0ZWQyNjFhYTFjOWM1MjYxY2I1MTViZi5zdmciOw==
It does work when I use an absolute path:
.marker {
background: url(http://istaging.co/api/marker.svg)
Why is this?
Note: this is now my Webpack file looks like:
var path = require('path')
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: path.resolve(__dirname, '../dist/static'),
publicPath: '/static/',
filename: '[name].js'
},
resolve: {
extensions: ['', '.js', '.vue', 'styl'],
alias: {
'src': path.resolve(__dirname, '../src')
}
},
resolveLoader: {
root: path.join(__dirname, 'node_modules')
},
module: {
preLoaders: [
{
test: /\.vue$/,
loader: 'eslint',
exclude: /node_modules/
},
{
test: /\.js$/,
loader: 'eslint',
exclude: /node_modules/
}
],
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url',
query: {
limit: 10000,
name: '[name].[ext]?[hash:7]'
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader'
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&minetype=application/font-woff'
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
}
]
},
eslint: {
formatter: require('eslint-friendly-formatter')
}
}
(Do I have to change something here to make SVG files work in CSS backgrounds?)
I would suggest using inline-svg-loader instead of file-loader for svg files.