I'm developing a react UI component and it depends on another UI component (react-widgets/lib/DropDownlist). This javascript module has resources that end with these file extensions: *.gif, *.eot, *.svg, *.woff, *.ttf.
Webpack4 is complaining that it doesn't know how to process these file types and that I might need a loader to handle these file type. One error is:
Error in .../react-widgets/dist/fonts/rw-widgets.svg?v=4.1.0
Module parse failed: ...
**You may need an appropriate loader to handle this file type.**
So I need to update my webpack.config.js file with the appropriate loaders for those file types. My config is based off of this. Side Note: A
shout out goes to Mark England who wrote this article which does a fantastic job for how to create a reusable component.
The relevant snippet is:
// Snippet from Mark's code webpack.config.js
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: "babel-loader",
exclude: /node_modules/
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
I know what the syntax for webpack is to define the loaders but I don't know what loaders to use. But this sample webpack config file didn't include support for these other file types.
What have I done to try and solve the problem
I generally use create-react-app so I avoid this problem altogether. :-) It, however, doesn't allow me to create react libraries for distribution (AFAIK).
First I searched on the net webpack *.gif loader. Nothing useful.
Next I searched for webpack loaders based on file type. This gave some good results that describe the loader syntax, pointed me to some loaders file-loader and how to use them, and this question on SO that helps me realize the *.svg loader might be what I need to load svg files.
{test: /\.svg$/, use: "svg-inline-loader"},
So I might be able to use svg-inline-loader for the *.svg files.
I can repeat this approach for all of the file types.
The next approach is to examine Create React App (CRA)
I primarily develop in react, and look at the CRA webpack config files (because the create-react-app appears to stay leading edge on these topic). So I can see the url-loader is used for images (based on what the node_modules/react-scripts/config/webpack.config.dev.js file is using).
Another one down...
My question
Does webpack (or another website) have a table that lists the loaders available for given file types?
For example,
know good image loaders for the following file types are:
Webpack 4
*.gif, *.jpg => url-loader
*.svg => svg-inline-loader
*.eot => ???
I realize that because webpack is more of a plugin/loader architecture that it might not be webpacks place to have this list so another website might need to have it.
When you need a loader what do you do?
If there is no central place to look for this answer, then please share how you find loaders that are needed to solve your webpack file loading problem.
It all depends on your workflow, how u want to load assets at run-time.
For eg, if u have lot of images, it might be a good idea to use a file-loader and place them directly inside the build directory.
The above approach will increase the GET calls and the bundled js file size will not be affeted
If u have less images/small size images then you can use url-loader which converts them into data-URL and put them inside your bundled js files.
The above approach will reduce the GET calls and will slightly increase the bundled js size.
If u want combination of both, then u can set a size limit and fallback loader(file-loader) on url-loader. What this will do is, the size of the dataURL will be calculated.If the size is grater than the limit, the file-loader will be used, which will place it in the build directory.
How I use them
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'images/',
name: '[name][hash].[ext]',
},
},
],
},
{
test: /\.(svg)$/,
exclude: /fonts/, /* dont want svg fonts from fonts folder to be included */
use: [
{
loader: 'svg-url-loader',
options: {
noquotes: true,
},
},
],
},
{
test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
exclude: /images/, /* dont want svg images from image folder to be included */
use: [
{
loader: 'file-loader',
options: {
outputPath: 'fonts/',
name: '[name][hash].[ext]',
},
},
],
}
Related
I'm converting normal react app to next js,
previously I just imported scss file using
import from '.componentName.scss'
But now I have to import using
import style from 'componentName.module.scss
therefore I have to change lot of code since this is previously completed project,
is there any way to configure nexjs that allow to import scss as before
I have no idea if it'll work but you can use https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config to create a custom webpack config in nextjs. Along with that you can define a rule for styles.
...
rules: [
{
test: /\.s?css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true
}
},
'sass-loader',
],
include: /\.s?css$/
},
],
Using that I'm pretty sure you should be able to override the way it's searching for *.module files and including them in the css bundle.
Note don't just copy that code directly, make sure it'll actually work and configure it to your needs, it's just for frame of reference.
I am building something like a static website generator that uses webpack to build the project and create a bundle with it.
In this project, a user is able to specify custom css files. I want those css files to be bundled with the final result. The issue is, that I do not have the paths to those css files available during development, so I can't do import 'some-asset-file-provided-by-the-user.css' in the javascript code that is going to be bundled. But I have them available when calling webpack.compile(config).
I am looking for a way to inject those css files into the bundle. So far I tried various ways, such as:
const stylesheet = 'some-asset-file-provided-by-the-user.css'
require(stylesheet)
Which did not work, probably because webpack is not able to deal with this "dynamic" require. Then I used the webpack define plugin for this
/* webpack.config.js */
new webpack.DefinePlugin({
stylesheet: 'some-asset-file-provided-by-the-user.css'
}),
/* app.js */
require(stylesheet) // should be replaced by the webpack define plugin with 'some-asset-file-provided-by-the-user.css'
which also did not work. I also tried to find a way to do something like this:
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(Object.assign({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
useFiles: ['file-a.css', 'file-b.css']
}
}
]
}, extractTextPluginOptions))
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
which also failed because apparently neither style-loader nor css-loader support this type of interaction.
How can I solve this? I am open to writing a plugin for this, but I'd rather use something existing.
The simplest way to include the CSS is by adding it to your entry point. To make this easier, you should use an array as entry point even if it's just a single file, so you can simply push the CSS.
For example:
entry: {
app: ['./src/index.js'],
// Other entries
},
In your compile script you add it to entry.app before passing it to webpack.
config.entry.app.push('./user.css');
const compiler = webpack(config);
I have an npm package with this structure:
--src
--styles
-image.png
-style.scss
The style.scss file is referencing the image like this:
.test {
background-image: url(./image.png);
}
The problem is when I consume the package, CSS is looking the image from the root and not relative to my package, how we can solve this issue?
This is how I'm importing the package:
#import "mypackage/src/styles/style";
I have this issue too and I do not find a elegant way to this issue. Finally I copied the referenced files to the build directory to solve this issue. The "copy-webpack-plugn" plugin was used(https://github.com/kevlened/copy-webpack-plugin)
You may refer to the following issue too(
Include assets from webpack bundled npm package)
All you need just install file loader like this.
npm install file-loader --save-dev
and then add this line to module part in your config :
module: {
rules: [{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
}]
}
I have had this issue recently and the information on StackOverflow was outdated (as expected, this is a question that relates to NPM & Web Development and everything moves fast in this space).
Fundamentally, this problem is solved entirely by Webpack 5 as it comes out of the box. Only the webpack.config.js file needs to be updated.
The part of webpack's documentation that relates to this is here: https://webpack.js.org/guides/asset-modules/
What you want to do is Base64 encode your static assets and inline them to your CSS/JavaScript.
Essentially, when you are packing up your source code to distribute it on NPM, and you have some CSS file which refers to static images as such: background-image: url(./image.png) what you need to do is inline your assets to your style file, and then process your style file with the style-loader and css-loader packages.
In short, making my webpack.config.js contain the lines below solved my issue and allowed me to export one single index.js file with my package, which I imported into my other projects.
What really matters here is the type: asset/inline line, when we are testing for images.
webpack.config.js
...
...
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|jpg|gif)$/i,
type: "asset/inline",
},
],
},
...
...
I want to generate a bundle.js from this pre-esxisting bootstrap template (it uses less) https://github.com/BlackrockDigital/startbootstrap-sb-admin-2
I tried to generate it but I failed since the styles are never generated and the bundle.js is empty as you can see in the "dist" folder(This was expected since the index.js which is the entry point is empty as well. https://github.com/juanlet/webpack . What should I do in order for webpack2 to include all the js,css and less files that came with the template and put it in a bundle.js?. Should I include every file on the index.js entry file?. I'm running out of ideas. Any article, documentation or instruction will be very welcomed. Thank you very much.
If you want to build this out with webpack, your first step is actually using whatever your entry point is to import or require other libs/files.
So, for example, if your entry point in your wepback.config.js is
entry: {
bundle: './src/js/api/index.js',
vendor: VENDOR_LIBS
},
Then that file needs to contain imports that you wish to include in that file. And then those files include other files and so on, until you have all your files bundled up through the root of your tree (index). In a very simple way, this is what webapack does: it imports/requires your files, bundles them, and loads them depending on your configuration.
In order to load/compile your LESS, you will either have to include it as an import in your JS files, or you could also use extract-text-webpack-plugin to generate a separate CSS bundle.
This is the best overview I can give to this question since I don't know the exact way your want to take your code and bundle it. Feel free to ask questions if you have them, and I will edit my answer to try and help answer them.
EDIT: This is an example of an older config I have extracting SASS into it's own file. It's using v1, but it more or less works the same for webpack 2. I just don't have an example with me right now: (Here is the documentation for using extract in v2. A little different, but not too much).
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'babel-polyfill',
'./app/index',
],
resolve: {
extensions: ['', '.js']
},
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/public/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new ExtractTextPlugin('public/app.css'),
new DashboardPlugin(dashboard.setData)
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, '..', 'app')
},
// JSON
{
test: /\.json$/,
loaders: ['json-loader']
},
// Img
{
test : /\.(png|jpg|svg|eot|ttf|woff|raw)$/,
loader: 'url-loader?limit=4096'
},
// Sass
{
test: /\.scss$/,
loaders: [ 'style', 'css?sourceMap', 'postcss', 'sass?sourceMap' ]
}]
},
postcss: [autoprefixer({ browsers: ['last 2 versions'] })],
}
MAJOR EDIT:
An example repo exists here: https://github.com/thesublimeobject/webpack2example
Running webpack will bundle up your files, imported from an index.js file I created. This bundles all the external libraries which I installed via npm and removed them from the index.html file. I did not test any of the code that was generated since that's way beyond an answer to this question. Your LESS will also be bundled into the dist folder as a separate file you will need to provide a link to in the HTML (that's one thing I forgot to do is add links to the /dist, but I'm sure you can do that.
I have a TypeScript project which I am bundling with Webpack. It is a demo/docs app for an open source lib I am writing, so I want to show some of the source code as part of the docs.
In my webpack config I have:
loaders: [
{ test: /\.ts$/, loader: 'ts'},
{ test: /\.css$/, loader: 'style!raw' },
{ test: /\.html/, loader: 'html' }
]
which works fine for transpiling and bundling my TypeScript files. In one of my app components I do this:
basicCodeT: string = require('./basic-example-cmp.html');
basicCodeC: string = require('!raw!./basic-example-cmp.ts');
to load the source code into a string which I then want to display in the docs.
As you can see, there is a leading ! in the second line which I discovered seems to "bypass" the default loaders from the config and loads the raw TypeScript as a string.
In my dev build this works, but when I do a "production" build with the UglifyJsPlugin and OccurrenceOrderPlugin, I get the following output:
ERROR in ./demo/src/basic-example-cmp.html
Module build failed:
# ./demo/src/demo-app.ts 24:26-61
which corresponds to the line in the source where I try to require the raw TypeScript.
So, I want to pass basic-example-cmp.ts through the TS compiler as part of the app build, but also want to require it as raw text in the app.
My question then is: Is there a proper way to tell webpack to "ignore" loaders in specific require cases?
Is my way of prepending a ! correct? Is it a hack?
Update
Turns out my problem is simply due to the way Webpack handles HTML templates - it does not like the Angular 2 template syntax, see: https://github.com/webpack/webpack/issues/992
You can add two exclamation to ignore loaders in the webpack config file
!!raw!file.ts
one exclamation will only disable preloaders!
https://webpack.js.org/concepts/loaders/#inline
As far as I know that is the only way you are going to be able to load a file in two different ways. I expect the issue is that your paths are different in your production build.
I would suggest running webpack with the --display-error-details flag to get more info on why it fails.
Is there a proper way to tell webpack to "ignore" loaders in specific require cases?
Yes. Update your test in { test: /\.ts$/, loader: 'ts'}, as desired.