I am using Webpack to bundle a number of js/css files in a site. I am bundling bootstrap.css and chosen.css as part of my bundles. In order to create the bundles, I have a main.js that I am using as an entry point to import all the other files that I will need. I am using file-loader to process font and image files and move them to the appropriate directories. I am using the ExtractTextPlugin with the css-loader and resolve-url-loader to create a separate css bundle from my js bundle.
My main.js is:
import 'bootstrap/dist/css/bootstrap.css';
import 'chosen-js/chosen.css';
import './datetimehelper.js';
import './deletelink.js';
import './dropdown.js';
My webpack.config.js is:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/js/main.js',
output: {
filename: 'wwwroot/js/bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'images/[name].[ext]',
outputPath: 'wwwroot/'
}
}
]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]',
outputPath: 'wwwroot/'
}
}
]
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: ['css-loader?url=false', 'resolve-url-loader'],
publicPath: '../'
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename: 'wwwroot/css/bundle.css'
})
]
};
With the above configuration, the font references in bootstrap.css are picked up, moved to the appropriate directory and the urls are fixed in the css bundle that is emitted. However, the images that are referenced in chosen.css are not being picked up. Can anyone tell me what I need to do to make the images work correctly? I've tried replacing file-loader with url-loader and no change. I've also tried importing the images in my main.js and they were moved, but the urls in the css bundle were not rewritten correctly.
Having path configured in output makes life a lot easier. That would serve as the base output folder and all other loaders/plugins can work relative to that. May be the files were copied but not to your intended directory. Please do take a look at WebpackBootstrap repo. The config copies as well as converts image paths properly.
I finally figured it out. In the rules, I had:
{
test: /\.css$/,
use: ExtractTextPlugin.extract('css-loader', 'resolve-url-loader')
}
Instead, it should be:
{
test: /\.css$/,
loader: ExtratTextPlugin.extract('css-loader', 'resolve-url-loader')
}
Not sure what the difference is between use and loader because I'm fairly new to Webpack, but in this case it makes all the difference.
Related
I am building a workflow for a react starter and would like to have my browser auto reload when I make a change to my scss files.
Currently, webpack will hot reload when I make a change in my index.js file (set as my entry point). However when I change/add scss code in my scss file, it gets compiled, but the css doesn't get output anywhere and does not trigger a browser reload.
I am new to webpack would really appreciate some insight here.
Here is my webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: ['./src/js/index.js', './src/scss/style.scss'],
output: {
path: path.join(__dirname, 'dist'),
filename: 'js/index_bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].css',
outputPath: 'css/'
}
},
{
loader: 'extract-loader'
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
My index.js entry point file
import React from 'react';
import ReactDOM from 'react-dom';
import App from '../components/App';
ReactDOM.render(
<App/>,
document.getElementById('App')
);
And my App component
import React, {Component} from 'react';
import '../../dist/css/style.css';
class App extends Component {
render() {
return (
<div>
<p>Test</p>
</div>
)
}
}
export default App;
Actually, style-loader is the one that is responsible for CSS HMR.
You should add it at the end of the style pipeline, only for dev.
For production, you can remain your config.
It should look something like that:
const devMode = process.env.NODE_ENV !== 'production'
{
test: /\.scss$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
}
Pay attention, the best practice of extracting css into a separate file is to use MiniCssExtractPlugin if you are using webpack 4, or ExtractTextWebpackPlugin, if you are using webpack < 4.
Try using Parcel instead of Webpack. I used to spend hours configuring Webpack to get things like hot reload working. With Parcel, most things just "work" without a configuration file. For example, I wanted to start using Pug templates. Parcel recognized the .pug extension and automatically downloaded the required NPM dependencies!
In your case, just include the SCSS file in your app like this: import '../scss/style.scss' (notice the path is to the .scss source file relative to index.js). Parcel will automatically do the "sensible" thing.
Here are some references to get started with Parcel + React + SASS:
Build a React web app with Parcel.js lightning fast
Parcel SCSS documentation
Notable advantages and disadvantages of Parcel vs WebPack:
Parcel requires minimal configuration; often no configuration.
Parcel usually builds much faster than WebPack.
The WebPack dev server seems more stable. (The Parcel dev server needs to restarted once in a while and doesn't play nice with Dropbox. Apparently this should be fixed in version 2.0.)
When (an uncommon) configuration is required, it might not be obvious how to do that in Parcel; at least in WebPack, all the configuration is in one place.
Sometimes Parcel's automatic configuration does thing people don't expect, confusing them.
GitHub: https://github.com/Chirag161198/react-boilerplate 1
Here is the react boilerplate I’m trying to make from scratch.
I have bundled html with the react code but I’m not able to add styles (CSS).
I have heard about ExtractTextPlugin but not able to configure it.
Please suggest some way to add styles to it.
Thank you in advance.
You need to use style-loader and css-loader in your webpack.config.js
First, install these two packages via npm:
npm install style-loader, css-loader --dev
Then, create a styles.css in your src folder and append the following styles into the file (just for demo purpose, so you know it's working correctly):
body {
background-color: #ff4444;
}
Don't forget to import the css file in your src/index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.js';
import './styles.css'; // <- import the css file here, so webpack will handle it when bundling
ReactDOM.render(<App />, document.getElementById('app'));
And use style-loader and css-loader in your webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: { loader: 'babel-loader' },
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
};
If you don't see the correct output, you might need to restart the webpack dev server again. I have cloned your repo and made the changes like I mentioned above, it works.
As for ExtractTextPlugin, you will need this when bundling for a production build, you can learn more from their Repo
Hope it helps!
Hi Chirag ExtractTextPlugin works great but when it comes to caching and bundle hashing. Css bundle becomes 0 bytes. So they introduced MiniCssExtractPlugin which has tackled this issue. It is really important to cache static files as your app size increase by time.
import plugin first:
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
add these in your webpack config:
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: [ 'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
}
plugins: [
new MiniCssExtractPlugin({
filename: 'style.css',
}),
new HtmlWebpackPlugin({
template: './src/index.html',
}),
Let me know you the issue still persists.
first you need to load style-loader and css-loader.Then you will add the following code in "rules" in webpack.config.js file.
{ test: /\.css$/,use: ['style-loader', 'css-loader']}
then import the "style.css" file location into the "index.js" file and for example:
import "./style.css";
When you package, "css" codes will be added in "bundle.js".
I am trying to extract all the CSS files found in the node_modules directory into a single file. My Webpack config is as follows:
{ // node_modules css in /node_modules/**/*.css
test: /\.css$/,
include: /node_modules/,
// extract to the node modules css file
use: ExtractTextPluginNodeMods.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: false,
},
},
],
}),
}
Unfortunately, none of the CSS files in the node_modules directory are being bundled into the file specified with ExtractTextPluginNodeMods. I have another ExtractTextPlugin instance that is successfully extracting CSS from my src directory. Any idea why I cannot get extraction of CSS from node_modules?
For reference, my other ExtractTextPlugin/Webpack config (which is bundling all of my CSS is here:
{
// OUR css in /src/
// the css output from sass loader will be caught here
// fonts are imported by css loader
// after transpiling of sass -> css, css-loader in webpack should take care of this
// https://github.com/webpack-contrib/css-loader
test: /\.css$/,
exclude: /node_modules/,
// extract to our css file
use: ExtractTextPluginSrc.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
// create modular css with the '[name]__[local]___[hash:base64:5]'
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]',
},
},
'postcss-loader',
],
}),
}
Webpack won't include the CSS files unless you explicitly import them from your javascript code. So you'll need:
import 'some_package/css/component.css';
in the part of your app that uses the CSS.
Alternatively you could use something like glob-loader to do
import 'glob-loader?node_modules_pattern_file';
and then have your "node_modules_pattern_file" include a glob like
../node_modules/**/*.css
...but I don't recommend this approach because you'll end up pulling in loads of files you don't need and it will be hard to maintain.
I'm trying to create a React application with multiple entries using webpack and extract-text-webpack-plugin.
My config file looks like this,
const commonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const extractTextPlugin = require('extract-text-webpack-plugin');
let config = {
entry: {
app: './client/app.entry.js',
signIn: './client/sign-in.entry.js',
},
output: {
path: './server/public',
filename: '[name].js'
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{
test: /\.css$/,
loader: extractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
}
]
},
resolve: {
modulesDirectories: ['node_modules', 'client'],
extensions: ['', '.js']
},
plugins: [
new commonsChunkPlugin('common', 'common.js'),
new extractTextPlugin('styles.css', { allChunks: true })
]
};
module.exports = config;
My problem is that extract-text-webpack-plugin only includes imported css files from the entry chunks, and not from submodules of the entry chunks.
So if app.entry.js has
import "./app-style.css";
import "./sub-module"; // This module has import "./sub-style.css";
then the styles from app-style.css gets bundled but not the styles from sub-style.css.
I haven't had this issue before when there's only been one entry file, so I'm wondering if having multiple entries requires another setup?
Something to also take into consideration is the use of CSSModules by the way the css-loader is used, which also could be a factor.
Any ideas?
I'm trying to solve similar problem, and i think it will be nice idea to document the solution and thoughts for those who has the same questions.
TextExtract plugin can work with chunks that have to be configured with commonchunks plugin, enable chunks support:
// Configuration of the extract plugin with chunks and naming
new ExtractTextPlugin("[name].css", { allChunks: true })
It's all ) Next thing is just configuration of the chunks (webpack is very flexible tool, everyone configure it for own needs. For an instance i'll show how i configure "vendour.css" and "application.css" build configuration based on "imports")
// Vendour chunks definition for vendor css
entry: {
vendor : ['./css/vendour.sass']
Example of entrypoint file.js
import "./css/vendor.sass"
import "./css/application.sass"
After build, webpack will create vendor.css (where you export vendour things with #import "~vendormodules/sass/alla") and application.css files.
Thanks,
I just installed font-awesome-webpack. I import it using: require("font-awesome-webpack");
My webpack config includes the following in my module loaders array:
{ 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" }
Problem is I am getting this error in developer console:
localhost/:1 GET http://localhost/mysite/app/db812d8a70a4e88e888744c1c9a27e89.woff2
localhost/:1 GET http://localhost/mysite/app/a35720c2fed2c7f043bc7e4ffb45e073.woff
localhost/:1 GET http://localhost/mysite/app/a3de2170e4e9df77161ea5d3f31b2668.ttf 404 (Not Found)
The problem is, those files are created at the root (within the mysite directory). How do I configure such that those woffs and ttf are output within the mysite/app directory?
I've recently wanted to use font awesome with webpack v1, I've installed the npm module font-awesome not font-awesome-webpack
You must install few loaders before :
npm i css-loader file-loader style-loader url-loader
and add use them in your webpack.config.js :
module: {
loaders: [{
test: /\.css$/,
loader: 'style!css?sourceMap'
}, {
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"
}]
}
Now if you include in your entry.js :
require('font-awesome/css/font-awesome.css');
You normally be able to use font-awesome in your template :
<i class="fa fa-times"></i>
This gist helped me : https://gist.github.com/Turbo87/e8e941e68308d3b40ef6
As of Feb. 2016 this seems to be a common question with webpack, so I hope this provides some help. If you add this to the loader: '&name=./path/[hash].[ext]', that specifies where to look for those files. For example:
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff&name=./[hash].[ext]'
}
This places the correct URL to the fonts within the generated CSS file.
I recommend this method when dealing with anything other than css/scss. Hope this helps.
In addition to the above answers, I
I had to specify a path in output to get it working like so to specify the hosted location and not write the assets to the root path:
output: {
filename: "./bundle.js",
path: “./client”
},
module: {
loaders[
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff&name=./webpack-assets/[name]/[hash].[ext]"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff&name=./webpack-assets/[name]/[hash].[ext]"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream&name=./webpack-assets/[name]/[hash].[ext]"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file?&name=./webpack-assets/[name]/[hash].[ext]"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml&name=./webpack-assets/[name]/[hash].[ext]"
}
] // loaders
} // module
{
test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=100000'
}
This schema helped me
This is my case, because of my script path is like below:
script(src='/javascripts/app.js')
So, I have to add '&name./javascripts/[hash].[ext]' to all font files like:
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff&name=./javascripts/[hash].[ext]"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff&name=./javascripts/[hash].[ext]"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream&name=./javascripts/[hash].[ext]"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file?name=./javascripts/[hash].[ext]"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml&name=./javascripts/[hash].[ext]"
}
Just as a note, I came across a similar fault using the font-awesome-loader.
Where the directory would not be set correct, regardless of any of the changes above.
To correct this, the option publicPath can be added to output:
output: { path: config.outputPath, filename: '[name].js', publicPath: '/assets/' },
The folder /assets/ will be changed to wherever you actually store your fonts.
Hopefully this helps.
I had font-awesome-webpack working on my PC, but it wouldn't work on my Mac. I think my PC was still throwing the 404s for the .woff2, .woff, and .tiff, but the icons displayed properly, so I ignored the problem.
My Mac, however, would not display the icons. While reading this Q&A, I tried a bunch of things. Here's what lead to my solution:
On my http://localhost:8080/View/ page, I was getting 404s that looked like the link below:
I entered http://localhost:8080/View/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2 into the browser, and confirmed the 404.
I tried going to http://localhost:8080/e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2 (removing the extra path before the font file), and was able to access the file.
I modified Paul's answer to remove the . that made the file request relative.
For example, Paul suggested:
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&minetype=application/font-woff&name=./[hash].[ext]'
}
Take note of the &name parameter, that uses ./[hash].[ext]. I dropped the leading . and now there are no 404s (the browser correctly requests the files from the root of the site):
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&minetype=application/font-woff&name=/[hash].[ext]'
}
Conclusion: If your entry point is NOT at your web root, and you're able to access the font files at the web root, you probably just need to use this name configuration to fix the path.
Same issue faced.
Fixed it using the below syntax,
loader: "file?name=./fonts/[hash].[ext]"
fonts is the directory name, replace it with your own directory name.
Example:
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url?name=/build/[hash].[ext]&limit=8192&mimetype=application/font-woff"
}