I am getting the following message in my browser's console when I change my javascript source:
[HMR] The following modules couldn't be hot updated: (Full reload
needed) This is usually because the modules which have changed (and
their parents) do not know how to hot reload themselves. See
http://webpack.github.io/docs/hot-module-replacement-with-webpack.html
for more details.
My question is how can I tell webpack to just auto reload the page when this happens?
Here is my server set up:
app.use(morgan('dev'));
// Disable views cache
app.set('view cache', false);
var webpack = require('webpack');
var webpackConfig = require('../client/webpack.config');
var compiler = webpack(webpackConfig);
app.use(require("webpack-dev-middleware")(compiler, {
noInfo: true, publicPath: webpackConfig.output.publicPath
}));
app.use(require("webpack-hot-middleware")(compiler));
and my webpack.config:
var path = require('path');
var AureliaWebpackPlugin = require('../node_modules/aurelia-webpack-plugin');
var webpack = require('../node_modules/webpack');
module.exports = {
entry: {
main: [
'webpack-hot-middleware/client',
'./client/src/main'
]
},
resolve: {
alias: {
breeze: 'breeze-client/build/breeze.debug',
resources: path.resolve( __dirname, 'src', 'resources'),
utils: path.resolve( __dirname, 'src', 'resources', 'utils', 'utils'),
tradestudyUtils: path.resolve( __dirname, 'src', 'resources', 'tradestudy-utils', 'tradestudy-utils')
}
},
output: {
path: path.join(__dirname, 'client'),
filename: 'bundle.js',
publicPath: '/'
},
devtool: 'eval',
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new AureliaWebpackPlugin()
],
module: {
//preLoaders: [
// {test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader'}
//],
loaders: [
{ test: /\.scss$/, loaders: ['style', 'css', 'sass'] },
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015-loose', 'stage-1'], plugins: ['transform-decorators-legacy'] } },
{ test: /\.css?$/, loader: 'style!css' },
{ test: /\.html$/, loader: 'raw' },
{ test: /\.(png|gif|jpg)$/, loader: 'url-loader?limit=8192' },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff2' },
{ test: /\.woff(\?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' }
]
}
};
Thanks in advance?
You can pass parameter reload to webpack-hot-middleware/client:
entry: {
main: [
'webpack-hot-middleware/client?reload=true',
'./client/src/main'
]
},
Related
I am trying to use compute machine provided by the cortexjs. https://cortexjs.io/compute-engine
I saved this dependency using
npm i #cortex-js/compute-engine
After I ran npm start, I am getting this error:
ERROR in ./node_modules/#cortex-js/compute-engine/dist/compute-engine.min.js 2:1360
Module parse failed: Unexpected token (2:1360)
You may need an appropriate loader to handle this file type.
Following is my webpack file:
var webpack = require('webpack');
const HtmlWebPackPlugin = require("html-webpack-plugin");
var path = require('path');
module.exports = {
// output: {
// path: path.resolve(__dirname, 'dist'),
// filename: 'main.js',
// publicPath: '/'
// },
mode : 'production',
devServer: {
historyApiFallback: true,
},
devtool: "source-map",
module: {
rules: [
{
test: /\.(png|jpg|woff|woff2|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.css$/,
loader: 'style-loader'
},
{
test: /\.css$/,
loader: 'css-loader',
options: {
import: true,
},
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
Please can someone suggest which loader should I add to webpack.config file to make this work.
I am using Webpack 2 for building my Angular (4) app. I have it working, but I am trying to figure out how to generate sourcemaps for my scss. In my components I load my scss with styleUrls Adding the options: { sourceMap: true } is not working. I do not want to extract the styles for components, because then the ViewEncapsulation is not working anymore. The .global.scss I use are needed everywhere, so I do extract these and this part works fine. Can someone tell me how to generate my sourcemaps (is it even possible with Angular)? Below is my webpack.config.js .
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const path = require('path');
module.exports = {
devtool: 'inline-source-map',
devServer: {
port: 3000,
contentBase: '/www',
inline: true
},
entry: {
polyfills: './src/polyfills.ts',
vendor: './src/vendor.ts',
app: './src/bootstrap.ts'
},
output: {
path: path.join(__dirname, '../www/'),
filename: '[name].bundle.js'
},
resolve: {
modules: [ path.join(__dirname, 'node_modules') ],
extensions: ['.js', '.ts', '.html']
},
module: {
loaders: [{
test: /\.ts$/,
exclude: /node_modules/,
use: ['awesome-typescript-loader', 'angular2-template-loader']
}, {
test: /\.html$/,
use: 'html-loader'
},{
test: /\.global\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use:[{
loader: 'css-loader',
options: {
sourceMap: true
}
}, {
loader: 'postcss-loader'
}, {
loader: 'sass-loader',
options: {
sourceMap: true,
}
}]
}),
}, {
test: /\.scss$/,
use: [ {
loader: "raw-loader"
}, {
loader: 'resolve-url-loader'
}, {
loader: 'postcss-loader'
}, {
loader: "sass-loader", options: {
sourceMap: true
}
}],
exclude: /node_modules/
}, {
test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
use: 'url-loader'
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new ExtractTextPlugin('global-styles.css'),
new webpack.optimize.CommonsChunkPlugin({
name: 'polyfills',
chunks: ['polyfills']
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
chunks: ['vendor']
}),
new webpack.optimize.CommonsChunkPlugin({
name: ['polyfills', 'vendor'].reverse()
})
]
};
I have localhost 8080 running as dev server and its looking alright. I have check the elements the css style, yes there and JavaScript is also there for automatically but the real doc html the one I edit in the file tree the same one i edit does not have the style and JavaScript written automatically what is going on ?
my web pack .config.js is as below
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin=require('extract-text-webpack-plugin');
//var CommonsChunkPlugin=require('webpack/lib/optimize/CommonsChunkPlugin');
module.exports = {
devtool: 'eval',
context: path.join(__dirname, 'src'),
entry: {
app: './app/app.js',
about: './about/about.js',
//vendors:['jquery']
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].bundle.js'
},
module: {
preLoaders: [
{
test: /\.js?$/,
include: path.join(__dirname, 'src'),
loader: 'jshint-loader'
}
],
loaders: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
include: path.join(__dirname, 'src'),
exclude: /node_module/,
query: {
presets: ['es2015', 'react', 'stage-1']
}
},
{
test: /\.css$/,
loader: 'css-loader',
include: path.join(__dirname, 'src', 'css'),
},
{
test: /\.scss$/,
loader:'style-loader!css-loader!sass-loader',
include: path.join(__dirname, 'src')
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192',
include: path.join(__dirname, 'src', 'images')
},{
test:/\.jpg$/,
loader:'file-loader'
},
{
test: /\.(woff2?|svg)$/,
loader: 'url-loader?limit=10000',
include:path.join(__dirname, 'src')
},
{
test: /\.(ttf|eot)$/,
loader: 'file-loader',
include:path.join(__dirname, 'src')
}
]
},
jshint: {
'esnext': true
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
inline: true,
stats: {
colors: true,
reasons: true,
chunks: false
}
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'),
hash: true,
chunks: ['app']
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'),
hash: true,
filename: 'about.html',
chunks: ['about']
})
//new CommonsChunkPlugin({
// name:['commons','vendors','bootstrap']
//})
],
watch: true
};
About Javascript different, I see that you use ecmascript 2015 with transpiler Babel; Babel transpile the your code from ecmascript 2015 to ES5 therefore the script that you see is different
About css, can I see how you use it?
btw what framework do you use ? reactjs ?
I'm using web pack bundle some js & jsx files to load them unto the browser. All runs well but the moment the browser opens them it logs an error ReferenceError: Can't find variable: require.
My current configuration is the following:
var path = require('path');
var fs = require('fs');
var nodeModules = {};
fs.readdirSync('node_modules')
.filter(function (x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function (mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
module.exports = [
{
name: 'server',
target: 'node',
context: path.join(__dirname, 'src', 'cloud'),
entry: ['babel-polyfill', './app.js'],
output: {
path: __dirname,
filename: 'app.bundle.js'
},
module: {
loaders: [
{test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel'}
]
},
externals: nodeModules,
node: {
__dirname: true
}
},
{
name: 'client',
target: 'web',
context: path.join(__dirname, 'src', 'static', 'scripts'),
entry: {
index: ['babel-polyfill', './index.js']
},
output: {
path: path.join(__dirname, 'src', 'public', 'bundles'),
filename: '[name].bundle.js'
},
module: {
loaders: [
{test: /\.html$/, loader: 'raw'},
{test: /\.css$/, loader: 'style'},
{test: /\.css$/, loader: 'css'},
{test: /\.jsx?$/, loader: 'babel'}
]
},
externals: nodeModules
}
];
Any idea as to why could this be happening? Thanks in advance
I'm getting this in my developer tools when I try change my react component and save it to see if hot loader updated my page:
GET http://localhost:3000/public/bundle/76566a1ad7e45b834d4e.hot-update.json 404 (Not Found)hotDownloadManifest # main.js:26hotCheck # main.js:210check # main.js:9288(anonymous function) # main.js:9346
main.js:9303 [HMR] Cannot find update. Need to do a full reload!
main.js:9304 [HMR] (Probably because of restarting the webpack-dev-server)
I'm not sure why this is occurring. I am trying to run django as my backend server (webpack instructions)
Here is my webpack.watch.js:
var path = require('path');
var config = require("./webpack.config.js");
var Webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var port = process.env.WEBPACK_PORT || 3000;
var host = process.env.HOST || 'localhost';
config.entry.unshift(
"webpack-dev-server/client?http://" + host + ":" + port,
"webpack/hot/only-dev-server" // only prevents reload on syntax errors
);
config.plugins = [
new Webpack.HotModuleReplacementPlugin(),
new Webpack.NoErrorsPlugin(), // don't reload if there is an error
new ExtractTextPlugin("style.css", {
allChunks: true
})
];
config.module.loaders = [
{ test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.jsx$/, loaders: ['react-hot', 'babel-loader'], include: path.join(__dirname, 'app') },
{ test: /\.es6$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
{ test: /\.scss$/, exclude: /node_modules/, loaders: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader') }
];
config.devServer = {
publicPath: config.output.publicPath,
filename: 'main.js',
contentBase: './public',
hot: true,
// Make connection between webpack-dev-server and its runtime set inline: true
inline: true,
lazy: false,
quiet: true,
noInfo: true,
headers: {"Access-Control-Allow-Origin": "*"},
stats: {colors: true},
// webpack-dev-server will serve built/bundled static files from host:port
host: "0.0.0.0",
port: port
};
module.exports = config;
Here is my webpack.config.js:
module.exports = {
entry: [
'./app/index.js'
],
output: {
path: './public/bundle',
filename: 'main.js',
publicPath: 'http://localhost:3000/public/bundle/'
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
],
module: {
loaders: [
{ test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.jsx$/, loaders: ['react-hot', 'babel-loader'], include: path.join(__dirname, 'app') },
{ test: /\.es6$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
{ test: /\.scss$/, exclude: /node_modules/, loaders: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader') }
]
},
}
Instead of using
entry: [
'./app/index.js'
],
as your entry
add two additional entries along with it like this:
entry: [
'webpack-dev-server/client?http://localhost:3000', // WebpackDevServer host and port
'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
'./app/index.js' // Your appʼs entry point
]