Related
After migrating my CSS files to SCSS, I can see FOUC for my layout elements at the first load (After each reloads of page).
I guess it has something to do with my webpack config so I tried to fix the problem by using mini-css-extract-plugin, but I can still see the problem.
Here is the content of my webpack.config.js file:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,{
loader: "css-loader"
}, {
loader: "sass-loader",
}
]
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /(\.(?:le|c)ss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: false,
},
},
{
loader: 'less-loader',
options: {
sourceMap: false,
javascriptEnabled: true,
},
}
]
},
{
test: /\.(png|jpe?g|gif)$/,
use: [
{
loader: 'file-loader',
},
]
}
]
},
output: {
publicPath: "/"
},
devServer: {
historyApiFallback: true,
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin(),
new MomentLocalesPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.AggressiveMergingPlugin()
],
resolve: {
alias: {
"#ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
}
}
};
The problem wasn't because of Webpack. It was because of me being stupid :)
I imported the CSS file inside of a child component, so when I reload the page, it first shows the layout without any styles and then loads the child component and gives the layout a proper style. So basically, the only thing I did to fix the problem was to import the style in the layout component.
import '../style.scsc'
I can't make my webpack to emit css sourcemap. I've put sourcemap: true everywhere where possible, and no effect, and all the solutions online suggest either this or some other plugin configuration, but I don't have any other plugin, it's super simple webpack.config.js
This is my webpack.config.js:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var path = require("path");
module.exports = {
entry: "./main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
publicPath: "/",
sourceMapFilename: '[file].map'
},
devtool: 'source-map',
module: {
rules: [{
test: /\.js$/,
use: {
loader: "babel-loader",
options: {
presets: ["es2015"],
sourceMap: true
}
}
},
{
test: /\.scss$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '/',
sourceMap: true,
hmr: process.env.NODE_ENV === 'development',
},
},
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "sass-loader",
options: {
sourceMap: true
},
}
]
},
{
test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/,
use: [{
loader: 'url-loader',
options: {
name: 'images/[hash]-[name].[ext]'
}
}]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
ignoreOrder: false, // Enable to remove warnings about conflicting order
sourceMap: true
}),
],
};
I need this source map in dev mode, but only two files get emited main.css and bundle.js.
For those who also struggle with this, the below webpack.config.js is a proper configuration for having style's sourcemap in dev mode. Bundle.js needs to be included when in dev mode, and custom.min.css needs to be added to the HTML document in production mode.
Edit: Unfortunately this can be also wrong. Right now without any change to webpack or node, the sourcemap is not generating :/ sometimes it works, and sometimes it doesn't. There is some bug in webpack, or in some plugins, either way it's a serious bug, but it's webpack so I am not surprised...
Edit 2: Now I see that the problem is only in Firefox, Chrome and Opera have the correct map.
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var path = require("path");
module.exports = {
entry: "./main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
publicPath: "/"
},
module: {
rules: [{
test: /\.js$/,
use: {
loader: "babel-loader",
options: { presets: ["es2015"] }
}
},
{
test: /\.scss$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" ,
options: {
sourceMap: true
}// translates CSS into CommonJS
},
{
loader: "sass-loader",
options: {
sourceMap: true
} // compiles Sass to CSS
}
]
},
{ test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/,
use: [{
loader: 'url-loader',
options: {
name: 'images/[hash]-[name].[ext]'
}
}] }
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '../css/custom.min.css'
})
]
};
I have migrated our AngularJS application to use webpack - before it used gulp. in the gulp version I have used rev plugin to rev all the files (css,js and html) however in the webpack mode , I cannot find a way to add hash to the html templates - which cause issues as the browser serve old html files. How can it be fixed? below is by webpack conf file
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RemoteServer = process.env.REMOTE_SERVER;
const appEnv = process.env.NODE_ENV || 'development';
const isProduction = appEnv === 'production';
const patterns = require('../server/src/main/resources/regex.json');
const appPath = path.join(__dirname, 'app');
const buildPath = path.join(__dirname, 'artifacts');
const config = {
entry: [path.join(appPath, 'index.js')],
output: {
path: buildPath,
filename: '[name].[hash].js',
chunkFilename: '[name].[hash].js'
},
resolve: {
modules: ['node_modules', appPath],
alias: {
'ui-select-css': path.resolve('./node_modules/ui-select/dist/select.css'),
fonts: path.resolve(__dirname, 'assets/fonts')
}
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
emitWarning: true,
quiet: true
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'resolve-url-loader'
]
},
{
test: /\.less$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader', options: {
url: false,
sourceMap: true
}
}, {
loader: 'less-loader', options: {
relativeUrls: false,
sourceMap: true
}
}]
},
{
test: /\.(jpe?g|png|gif)(\?.*)?$/i,
use: [{
loader: 'file-loader',
options: {name: '[path][name].[hash].[ext]'}
}]
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options: {limit: 10000, mimetype: 'application/octet-stream'}
}
]
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader'
}
]
},
{
test: /\.svg$/i,
loader: 'raw-loader'
},
{
test: require.resolve('angular'),
use: [
{loader: 'expose-loader', options: 'angular'},
]
},
{
test: require.resolve('jquery'),
use: [
{loader: 'expose-loader', options: '$'},
{loader: 'expose-loader', options: 'jQuery'},
]
},
{
test: require.resolve('lodash'),
use: [
{loader: 'expose-loader', options: '_'},
]
},
{
test: require.resolve('moment'),
use: [
{loader: 'expose-loader', options: 'moment'},
]
},
{
test: /\.html$/,
use: [{
loader: 'raw-loader',
options: {name: '[path][name].[hash].[ext]'}
}]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(appPath, 'index.html')
}),
new webpack.DefinePlugin({
INJECT_REGEX_HERE: JSON.stringify(patterns)
}),
new CopyWebpackPlugin([
{from: 'app/images', to: 'assets/images'},
{from: 'app/fonts', to: 'assets/fonts'},
{from: 'app/templates', to: 'assets/templates'},
{from: 'app/silent-callback.html', to: 'silent-callback.html'},
{from: 'node_modules/font-awesome/css', to: 'assets/font-awesome/css'},
{from: 'node_modules/font-awesome/fonts', to: 'assets/font-awesome/fonts'},
{from: 'node_modules/angular-ui-grid/fonts', to: 'assets/fonts'},
{from: 'node_modules/d3/d3.min.js', to: 'assets/d3'}
]),
new MiniCssExtractPlugin({
filename: '[name].[hash].css',
chunkFilename: '[id].[hash].css'
}),
new OpenBrowserPlugin({url: 'http://localhost:1337'})
],
devtool: isProduction ? 'source-map' : 'inline-source-map',
devServer: {
port: 1337
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
}
};
if (RemoteServer) {
console.log('running with remote server', RemoteServer);
config.devServer.proxy = {
'/occm/*': 'http://' + RemoteServer
};
}
if (isProduction) {
config.plugins.push(
new CleanWebpackPlugin(buildPath)
);
}
module.exports = config;
One of the main benefits of using Webpack is reducing the number of requests a browser has to perform for rendering your application and making your app start faster.
To achieve this, it groups related resources together in "chunks", that get loaded together in one request. Separate loading of required single files like HTML-templates (without a specific reason) could be considered an anti-pattern here.
Best practice is grouping all related JS, HTML and CSS code together in one big bundle that gets loaded once, sometimes (for bigger apps) having a second 'vendor' bundle for the code from node_modules, speeding up development, because this chunk won't change as often.
Alternative solution:
So in your case, if there is no specific reason for keeping things separate (which you didn't write about), I would rather recommend serving HTML together with the controlling code in one chunk instead of loading the HTML files separately.
A good and simple starting point would be to build just two chunks. Replace your whole optimization block by the following code:
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
}
},
That will build two chunks: One main chunk for all of your JS and HTML files and another one, explicitly for everything from the node_modules folder.
That way you won't have to worry about browser caches for HTML files anymore, because they are built in your main chunk, and, as a benefit, your app will start faster.
I did a similar migration a couple of year and I didn't need that type of solution. My goal was encapsulate each component as a module and then lazy load as much as possible.
// webpack config
{
test: /\.html$/,
use: ['html-loader'],
},
Then in each component I just require styles and template like:
require('./_proposal-page.scss');
(function() {
'use strict';
angular.module('component.myComponent', []).component('myComponent', {
template: require('./proposal-page.html'),
controller: MyController,
});
/** #ngInject */
function MyController($log) {
const $ctrl = this;
$ctrl.$onInit = function() {
$log.log('$onInit myComponent');
}
}
})();
if (typeof module !== 'undefined' && typeof exports !== 'undefined' && module.exports === exports) {
module.exports = 'component.myComponent';
}
Webpack detect the requires and export each .html file as a module, it works smoothly.
I'm trying to introduce Sass-loader to an existing project so as to be able to use Sass in my React components. I've set this up successfully before in my own boiler plates and had no issues but for some reason with the current configuration it doesn't seem to play. It doesn't give any errors but rather doesn't do anything with my .scss file i'm trying to import.
I can see that there is some loaders in the cssLoaders config for Webpack which could be the culprit but I am only targeting .scss/ .sass files with the rule
test: /\.s(a|c)ss$/
so I wouldn't have thought this would affect it at all.
I have webpack setup with a common file and one for development. Here are both those files:
webpack.common.js
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
require('babel-polyfill');
const Dotenv = require('dotenv-webpack');
module.exports = {
entry: {
main: ['babel-polyfill', './src/index.js']
},
output: {
filename: '[name].[hash].js',
path: path.resolve('./dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: ['node_modules'],
use: [{ loader: 'babel-loader' }]
},
{
test: /\.s(a|c)ss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
outputPath: 'images/'
}
}
]
},
{
test: /\.(woff(2)?|ttf|eot|otf)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
]
}
]
},
plugins: [
new ErrorOverlayPlugin(),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebPackPlugin({
template: 'index.html'
}),
new Dotenv(),
new CleanWebpackPlugin(['dist'])
]
};
And here is webpack.dev.js
const path = require('path');
const webpack = require('webpack');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const paths = require('../paths');
module.exports = require('./webpack.config.base')({
bail: false,
devtool: 'cheap-module-eval-source-map',
stats: 'errors-only',
performance: {
hints: false
},
entry: {
main: [
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appPolyfillsJs,
require.resolve('react-error-overlay'),
paths.appIndexJs
]
},
output: {
pathinfo: true,
filename: 'static/js/[name].js',
chunkFilename: 'static/js/[name].chunk.js',
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath)
},
// Load the CSS in a style tag in development
cssLoaders: [
{
loader: require.resolve('style-loader'),
options: {
sourceMap: true
}
},
{
loader: require.resolve('css-loader'),
options: {
modules: false,
sourceMap: true,
importLoaders: 1
}
},
{
loader: require.resolve('postcss-loader'),
options: { sourceMap: true }
}
],
babelQuery: {
cacheDirectory: true
},
plugins: [].concat([
new ProgressBarPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new CircularDependencyPlugin({
exclude: /a\.js|node_modules/,
failOnError: true
})
])
});
The part that I have added to the configuration is in webpack.common:
{
test: /\.s(a|c)ss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
},
I then just import it in the module like so:
import React, { PureComponent } from 'react';
import './test.scss';
...
Can anyone spot why the configuration is wrong?
The sass-loader requires node-sass and webpack as peerDependency.
Make sure node-sass is installed and edit the loader webpack.dev.js like so:
{
loader: "sass-loader",
options: {
includePaths: ["absolute/path/a", "absolute/path/b"]
}
}
I'm trying to enable sourcemaps for my SCSS in my app and have a really puzzling situation on my hands. Here's my config file:
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssets = require('optimize-css-assets-webpack-plugin');
let config = {
entry: './src/index.ts',
devtool: 'eval-source-map', // for choosing a style of source map
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist')
},
devServer: {
contentBase: path.resolve(__dirname, './dist'), // A directory or URL to serve HTML content from
historyApiFallback: true, // fallback to /index.html for SPA
inline: true,
open: false // open default browser on launch
},
module: {
rules: [
{
test: /\.ts$/, // files ending with .ts
exclude: /node_modules/, // exclude the node modules directory
use: 'ts-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["env"]
}
}
},
{
test: /\.scss$/, // files ending with .scss
use: ['css-hot-loader'].concat(
ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
// { loader: 'style-loader', options: { sourceMap: true } },
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'postcss-loader', options: { sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true } },
],
})
)
},
{
test: /\.(png|svg|jpg|gif)$/, // for other file types
use: ['file-loader?name=[name].[ext]&outputPath=img/']
}
]
},
resolve: {
extensions: ['.ts', '.js']
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new ExtractTextPlugin('styles.css') // call the ExtractTextPlugin and name our CSS file
]
};
module.exports = config;
if (process.env.NODE_ENV === 'production') {
module.exports.plugins.push(
new webpack.optimize.UglifyJsPlugin(), // call the uglify plugin
new OptimizeCSSAssets() // call the CSS optimizer (for minification)
);
}
What's really strange is that here, everything in the terminal compiles fine but when I inspect an element, there's no sourcemap:
HOWEVER, if uncomment this line in my webpack.config file:
// { loader: 'style-loader', options: { sourceMap: true } },
and run npm start again, the sourcemaps work correctly!...
...but now the terminal throws an error, which apparently is because you aren't supposed to use style-loader inside of the ExtractTextPlugin, but rather only as a fallback. My app still works in this case, but I don't want that error! How can I enable the SCSS sourcemaps without including style-loader in my SCSS rules?