I'm working on setting up a React application that uses Webpack2, webpack-dev-middleware and HMR for development. Whenever I make a change on a React component, it updates in the browser as intended. The issue I am running into is that when I modify my .scss files, the browser does not update. What happens instead, is that in the console it gives me the following:
[HMR] bundle rebuilding
client.js:207 [HMR] bundle rebuilt in 1567ms
process-update.js:27 [HMR] Checking for updates on the server...
process-update.js:98 [HMR] Nothing hot updated.
process-update.js:107 [HMR] App is up to date.
After this, when I refresh the page, my style changes appear. I'm not entirely sure what's going on or where the issue stems from but would like some help and clarification.Below is my setup:
Webpack.config.js
var webpack = require('webpack');
var path = require('path');
var autoprefixer = require('autoprefixer');
var DashboardPlugin = require('webpack-dashboard/plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var argv = require('yargs').argv;
const config = {};
// This configured production
if (argv.p) {
config.entry = [
'./src/client/scripts/index',
'./src/client/scripts/utils/index',
'./src/client/styles/index.scss'
]
config.plugins = [
new DashboardPlugin(),
new ExtractTextPlugin({
filename: 'bundle.css',
allChunks: true
}),
]
}
else {
config.entry = [
'react-hot-loader/patch',
'webpack-hot-middleware/client',
'./src/client/scripts/index',
'./src/client/scripts/utils/index',
'./src/client/styles/index.scss'
]
config.plugins = [
new DashboardPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.NamedModulesPlugin(),
new ExtractTextPlugin({
filename: 'bundle.css',
allChunks: true
})
]
}
module.exports = {
entry: config.entry,
output: {
path: path.join(__dirname, 'src', 'client', 'static'),
filename: 'bundle.js',
publicPath: '/static/'
},
devtool: 'inline-source-map',
devServer: {
hot: true,
contentBase: path.resolve(__dirname, 'src', 'client', 'static'),
publicPath: (__dirname, 'src', 'client', 'static')
},
plugins: config.plugins,
module: {
rules: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
include: path.join(__dirname, 'src'),
use: [
{
loader: 'babel-loader',
query: {
presets: ['react', ['es2015', { 'modules': false }], 'stage-0'],
plugins: ['react-hot-loader/babel', 'react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
}
]
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
use: [
{
loader: 'url-loader?limit=100000'
}
],
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
]
}
};
Server.js using webpack-dev-middleware
const router = Router();
const clientDir = resolve(`${__dirname}/../../client`);
if (isDev()) {
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpack = require('webpack')
const webpackConfig = require('../../../webpack.config')
const webpackHotMiddleware = require('webpack-hot-middleware')
const compiler = webpack(webpackConfig)
// This compiles our app using webpack
router.use(webpackDevMiddleware(compiler, {
publicPath: webpackConfig.output.publicPath,
noInfo: true
}))
// This connects our app to HMR using the middleware
router.use(webpackHotMiddleware(compiler))
}
router.use(express.static(clientDir));
export default router
index.js on client side
import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from './App'
const root = document.querySelector('.root');
// Wraps our App in AppContainer
const render = (Component) => {
ReactDOM.render(
<AppContainer>
<Component/>
</AppContainer>,
root
);
};
// Renders our application
render(App);
// This checks if a component has been updated
// It then accepts the changes and replaced the module.
// It's only checking if JS has been changed...
// #TODO - it only works for JS not CSS.
// I think this is an issue with webpack not
// recognizing bundle.css as a dependency?
if (module.hot) {
module.hot.accept();
}
You're using extract-text-webpack-plugin and after webpack rebuilds the bundle the webpack-dev-middleware thinks that nothing changed, because the corresponding module in your bundle representing the CSS is empty as its content has been extracted.
You need to disable extract-text-webpack-plugin in development to get HMR. You can use the disable option and it will fallback to the style-loader, which injects the <style> tags.
new ExtractTextPlugin({
filename: 'bundle.css',
allChunks: true,
disable: true
})
Instead of having to define two versions of the plugin you can use environment variables like NODE_ENV=production and use it in the plugin:
new ExtractTextPlugin({
filename: 'bundle.css',
allChunks: true,
disable: process.env.NODE_ENV !== 'production'
})
Related
I have an Express app with pug and stylus. I've configured the HMR middleware and it reloads on stylus changes but not for pug changes.
I'm wondering if I'm missing a specific configuration. I also tried adding the pug-html-loader but that didn't work either.
// server.js
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
const webpackDevMiddleware = require('./hmr').dev;
const webpackHotMiddleware = require('./hmr').hot;
app.use(webpackDevMiddleware);
app.use(webpackHotMiddleware);
// hmr.js
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');
const compiler = webpack(webpackConfig);
exports.dev = webpackDevMiddleware(compiler, {
noInfo: true,
filename: webpackConfig.output.filename,
publicPath: webpackConfig.output.publicPath,
stats: {
colors: true
}
});
exports.hot = webpackHotMiddleware(compiler, {
log: console.log,
path: '/__webpack_hmr',
heartbeat: 10000
});
// webpack.config.js
const javascriptRule = {
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['env']
}
}
]
};
const stylesRule = {
test: /\.styl$/,
use: ['style-loader', 'css-loader', 'stylus-loader']
};
module.exports = {
context: path.join(__dirname, 'javascripts'),
entry: [
'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
'./index.js'
],
devtool: 'source-map',
output: {
path: path.join(__dirname, 'public', 'dist'),
filename: 'bundle.js',
publicPath: '/dist/',
library: 'aux'
},
module: {
rules: [javascriptRule, stylesRule]
},
plugins: [new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin()]
}
You need install raw-loader: https://webpack.js.org/loaders/raw-loader/
Webpack 3 config:
module: {
rules: [
{
test: /\.pug$/,
use: [
{loader: 'raw-loader'},
{loader: 'pug-html-loader'}
]
}
]
},
plugins: [
// Templates HTML
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/templates/index.pug'
}),
new HtmlWebpackPlugin({
filename: 'contact.html',
template: './src/templates/contact.pug'
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
app.js
// import all template pug
import 'raw-loader!./templates/index.pug'
import 'raw-loader!./templates/contact.pug'
...
That makes webpack listen the changes in the pug files, but it also adds this js code to the bundle.js, then you need to process app.js to clean the bundle.js.
I got my webpack Hot Module Replacement working. I was told that once it is working, I would no longer have to do a full refresh for my code. This is not the case! I still require a refresh when I make changes to my code! (App.js).
How can I properly enable webpack HMR?
Link to the project on github
This is my entry point
import './styles/index.css';
import App from './components/App';
import React from 'react';
import { render } from 'react-dom';
const rootDOMNode = document.getElementById('app');
function renderRoot() {
render(<App/>, rootDOMNode);
}
renderRoot();
if (module.hot) {
module.hot.accept('./components/App', () => {
console.log('Accepting the updated module');
renderRoot();
});
}
webpack.config.js:
const webpack = require("webpack");
const path = require("path");
const CleanWebpackPlugin = require( "clean-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: [
"./app/index"
],
devtool: "inline-source-map",
output: {
path: path.resolve(__dirname, "dist"), // Note: Physical files are only output by the production build task `npm run build`.
publicPath: "/",
filename: "bundle.js"
},
devServer: {
contentBase: path.resolve(__dirname, "dist"),
hot: true,
port: 3000,
open: true,
compress: true
},
plugins: [
new ExtractTextPlugin({
disable: false,
filename: "css/style.css",
allChunks: true
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
],
module: {
rules: [
{ test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react']
}
} },
// { test: /(\.css)$/, use: ["style-loader", "css-loader"] },
{ test: /(\.css)$/, use: ExtractTextPlugin.extract(["css-loader"]) },
{ test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] },
// for fonts
{ test: /\.(woff|woff2|eot|ttf|otf)$/, use: ["file-loader"] }
]
}
};
The reason it is not working is because you have to re-require your app once you get the hot update, otherwise you are just re-rendering your original app.
the following code should work:
import './styles/index.css';
//import App from './components/App';
import React from 'react';
import { render } from 'react-dom';
const rootDOMNode = document.getElementById('app');
let App;
function renderRoot() {
App = require('./components/App').default; // we have to re-require this every time it changes otherwise we are rendering the same old app.
render(<App/>, rootDOMNode);
}
renderRoot();
if (module.hot) {
module.hot.accept('./components/App', () => {
console.log('Accepting the updated module');
renderRoot();
});
}
I use hot reloading with webpack-dev-server by adding a script in package.json.
webpack-dev-server --output-public-path=/dist/ --inline --hot
Actually, I wrote webpack for my website which was using the reactjs. In that I have lot of images and scss files so, that it is taking more amount of time to create bundle.js file upto that the website was in loading state. So, how I can increase the execution speed.
webpack.config.js
const path = require("path");
const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
let config = {
entry: ["babel-polyfill", "./app/js/index.js"],
output: {
path: path.resolve(__dirname, "public"),
filename: "./build.js",
//publicPath: "/"
},
resolve: {
alias: {
"js": path.resolve(__dirname, "app/js"),
"css": path.resolve(__dirname, "app/css")
},
extensions: [".js", ".jsx"]
},
module: {
rules: [
{test: /\.(js|jsx)$/, loader: "babel-loader"},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'url-loader'
},
{test: /\.scss$/, loader: ExtractTextPlugin.extract(["css-loader", "sass-loader"])},
{test: /\.(jpg|gif|png)$/, loader: "file-loader", options: {name: "./images/[name].[ext]"}},
]
},
devServer: {
historyApiFallback: true
},
plugins: [
new HtmlWebpackPlugin({
template: "./app/index.html"
}),
new webpack.LoaderOptionsPlugin({
options: {
sassLoader: {
includePaths: ["app/css"]
}
}
}),
new ExtractTextPlugin({
filename: "style.css",
allChunks: true
})
]
};
if (process.env.NODE_ENV === "production") {
config.plugins.push(
new webpack.DefinePlugin({
"process.env": {
"NODE_ENV": JSON.stringify(process.env.NODE_ENV)
}
}),
new webpack.optimize.UglifyJsPlugin()
);
}
module.exports = config;
Besides tweaking your configuration, you could use webpack --watch to have webpack watch your source files and recompile whenever you change something. The first compilation will still be a full one, but after that only the necessary parts will be recompiled each time, which can cut down compilation time from 30 seconds to 1 or 2 seconds.
Even better is to set up webpack's devserver with hot reloading, which also watches and incrementally compiles, but in addition will update your app in the browser, so you won't need to reload the page and lose react state. It can be a bit finicky to set up, but it's well worth the trouble.
Angular v.4 and webpack
i am looking for answer of very simple question.
How can i bundle node_module folder as vendor.js but not your application code. on page load seems like there are more then 300 requests from angular code to load internal files.
if i am able to merge all node_modules libraries i will save lot of browser requests.
I followed this example was able to get it run but it bundles libraries and your application code as well. i was able to successfully generate the vendor.js only but i am not sure after i add vendor.js in index.html how my application code will recognize #angular lib references. currently it is being resolved using systemjs.config.js some thing like this
#angular/code : 'npm:#angular/code/bundle/core.umd.js'
..
..
and exactly thats what happen as i thought application crashed it can't find references to #angular from my application code.
is it possible to just bundle node_module folder into vendor.js and still able to use in my application code without bundling app code ?
adding webpack config
webpack.config.js
module.exports = require('./config/webpack.prod.js');
webpack.common.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
loaders: [
{
loader: 'awesome-typescript-loader',
options: { configFileName: helpers.root('src', 'tsconfig.json') }
} , 'angular2-template-loader'
]
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
{
test: /\.css$/,
exclude: helpers.root('src', 'app'),
loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
},
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw-loader'
}
]
},
plugins: [
// Workaround for angular/angular#11580
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
helpers.root('./src'), // location of your src
{} // a map of your routes
),
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
};
webpack.prod.js
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
module.exports = webpackMerge(commonConfig, {
devtool: 'source-map',
output: {
path: helpers.root('dist'),
publicPath: '/',
filename: '[name].[hash].js',
chunkFilename: '[id].[hash].chunk.js'
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
mangle: {
keep_fnames: true
}
}),
new ExtractTextPlugin('[name].[hash].css'),
new webpack.DefinePlugin({
'process.env': {
'ENV': JSON.stringify(ENV)
}
}),
new webpack.LoaderOptionsPlugin({
htmlLoader: {
minimize: false // workaround for ng2
}
})
]
});
Is there a way to prevent in React.js, raw HTML display before the CSS stylesheets are completely loaded. I'm using Webpack, Semantic-UI (react version) and React.js.
Is there an equivalent of ng-cloak (angular) in React ?
Here's the content of my webpack config file :
const webpack = require('webpack')
const ManifestPlugin = require('webpack-manifest-plugin')
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const DEBUG = process.env.NODE_ENV !== 'production'
const plugins = [
new webpack.DefinePlugin({
'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`
})
]
const assetsDir = process.env.ASSETS_DIR
const assetMapFile = process.env.ASSETS_MAP_FILE
const outputFile = DEBUG ? '[name].js' : '[name].[chunkhash].js'
if (!DEBUG) {
plugins.push(new ManifestPlugin({
fileName: assetMapFile
}))
plugins.push(new webpack.optimize.UglifyJsPlugin({ minimize: true }))
}
const config = {
entry: {
bundle: ['babel-polyfill', './src/client/index.jsx']
},
module: {
noParse: [],
loaders: [
{ test: /\.json$/, loader: 'json' },
{ test: /\.css$/, loader: 'style!css' },
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /(node_modules|bower_components)/,
query: {
cacheDirectory: DEBUG
}
},
{test:/.svg$/,loader:'url-loader',query:{mimetype:'image/svg+xml',
name:'/semantic/themes/default/assets/fonts/icons.svg'}},
{test:/.woff$/,loader:'url-loader',query:{mimetype:'application/font-woff',
name:'/semantic/themes/default/assets/fonts/icons.woff'}},
{test:/.woff2$/,loader:'url-loader',query:{mimetype:'application/font-woff2',
name:'/semantic/themes/default/assets/fonts/icons.woff2'}},
{test:/.[ot]tf$/,loader:'url-loader',query:{mimetype:'application/octet-stream',
name:'/semantic/themes/default/assets/fonts/icons.ttf'}},
{test:/.eot$/,loader:'url-loader',query:{mimetype:'application/vnd.ms-fontobject',
name:'/semantic/themes/default/assets/fonts/icons.eot'}},
{ test: /\.png/, loader: "url-loader?limit=100000&minetype=image/png" },
{ test: /\.jpg/, loader: "file-loader" }
]
},
node: {
fs: "empty"
},
resolve: {
alias: {
"semantic-ui" : path.resolve( __dirname, "../semantic/dist/semantic.min.css")
},
extensions: ['', '.js', '.jsx', ".css"]
},
plugins,
output: {
filename: outputFile,
path: DEBUG ? '/' : assetsDir,
publicPath: '/assets/'
}
}
if (DEBUG) {
config.devtool = '#inline-source-map'
} else if (process.env.NODE_ENV === 'production') {
config.devtool = 'source-map'
}
module.exports = config
I got this error when I try to load my css from my component :
Cannot find module '/semantic/dist/semantic.min.css'
and the module exists.
I tried the exact same configuration without Webpack and import from component worked.
This is not the correct setup for a production deploy.
By default, Webpack turns your CSS into Javascript code that injects CSS tags in the page. This allows for hot CSS reloading. It's only appropriate for the development environment, obviously. You should be using this default behavior in dev, and should not be using it in production.
In production, you need to build a separate CSS file and load it normally with a <style> tag in your production HTML code. To tell Webpack to pull that out into a file, use the ExtractTextPlugin, which your code requires but never uses.
You should maintain two Webpack config files, one for development which doesn't extract text (and doesn't minify/uglify, etc), and one for production, which correctly minifies, hashes names, extracts text, etc.