I got the webpack-dev-server hot reloading feature working with the following webpack.config.js file.
mode: 'development',
watch: true,
entry: path.join(__dirname, 'src/app.js'),
devServer: {
contentBase: path.join(__dirname, 'public'),
hot: true,
inline: true,
historyApiFallback: true,
watchContentBase: true,
port: 9001
},
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
},
Index.html serves to
<script src="./bundle.js"></script>
What i am trying to do right now is refactor the directories so that the bundle.js will fall into public/build and index.html will fall into public/dist. So i changed my webpack.config.js as following
mode: 'development',
watch: true,
entry: path.join(__dirname, 'src/app.js'),
devServer: {
contentBase: path.join(__dirname, 'public', 'dist'),
hot: true,
inline: true,
historyApiFallback: true,
watchContentBase: true,
port: 9001
},
output: {
path: path.join(__dirname, 'public','build'),
filename: 'bundle.js',
},
Index.html serves to
<script src="../build/bundle.js"></script>
But the above config does not work and i get bundle.js config not found.
My express server is serving the static path as follows.
const publicPath=path.join(__dirname,'..','public')
console.log('publicpath',publicPath);
app.use(express.static(publicPath))
Any reason why the directory structure fail to work with HMR?
Attached is my directory structure.
Related
This is my current webpack.config.js:
module.exports = {
// ...
mode: 'development',
devtool: 'inline-source-map',
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
},
compress: true,
port: 9000,
historyApiFallback: {
index: 'index.html'
},
},
// ...
};
I can make it work if the index.html file is in the dist folder but I don't want it there because I want that folder to be purely generated files so that I can tell git to ignore it.
How can I make the dev server run from using an index.html in the root folder (or even from ./src for that matter).
React 17 + #reach/router + webpack 4
I have webpack config:
module.exports = {
context: path.resolve(__dirname, 'src'),
entry: [
'react-hot-loader/patch',
path.resolve(__dirname, './src/styles/styles.pcss'),
path.resolve(__dirname, './src/pages'),
],
output: {
publicPath: '/statistic/',
filename: 'bundle.js',
path: path.resolve(__dirname, './statistic'),`enter code here`
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public', 'index.html'),
favicon: 'favicon.png',
}),
],
devServer: {
port: 3000,
hot: true,
historyApiFallback: true,
},
};
Also router settings:
export const AppRouter = () => (
<Router basepath="/statistic" primary={false}>
<CampaignsPage path={CAMPAIGNS_PAGE_URL} />
</Router>
);
But I have script on mypage.com/statistic/
but I don't see it on mypage.com/statistic/campaigns after reload
How to fix that?
I have a react app setup with webpack and babel. I'm trying to enable hmr from webpack which seems to work fine except that it does not recompile when I change any file under /src/ . Changing package.json does seem to be detected and forces a recompile but the changes under /src/ are still not detected even after the recompile. My webpack.config is below:
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
main: './src/index.js',
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: 'bundle.js',
},
devServer: {
hot: true,
contentBase: './public/',
publicPath: '/',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: path.join(__dirname),
use: ['babel-loader'],
},
],
},
plugins: [new webpack.HotModuleReplacementPlugin()],
};
How should one do to remove server folder from react-boilerplate? Question is also asked here by another person https://github.com/react-boilerplate/react-boilerplate/issues/2110.
Removing just server folder will not work because the webpack dev configuration is utilising it for hot reload as well as your npm start command starts express server from this folder.
If you want to remove server folder completely and still want the application to be working as it was like hot reloading etc, follow the below steps. We will require webpack dev server in that case:
Remove ./server folder manually.
Install webpack-dev-server and react-hot-loader as dev dependencies.
In your ./internals/webpack/webpack.dev.babel.js, do the following modifications:
Change entry to this:
entry: [
require.resolve('react-app-polyfill/ie11'),
'react-hot-loader/patch',
`webpack-dev-server/client?http://localhost:3000/`,
'webpack/hot/only-dev-server',
path.join(process.cwd(), 'app/app.js'), // Start with js/app.js
],
Add publicPath in output:
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js',
publicPath: `http://localhost:3000/`,
},
Add webpack dev server config property in the same file:
devServer: {
port: 3000,
publicPath: `http://localhost:3000/`,
compress: true,
noInfo: false,
stats: 'errors-only',
inline: true,
lazy: false,
hot: true,
open: true,
overlay: true,
headers: { 'Access-Control-Allow-Origin': '*' },
contentBase: path.join(__dirname, '..', '..', 'app', 'build'),
watchOptions: {
aggregateTimeout: 300,
ignored: /node_modules/,
poll: 100,
},
historyApiFallback: {
verbose: true,
disableDotRule: false,
},
},
In ./internals/webpack/webpack.base.babel.js, add the line:
devServer: options.devServer,
And finally, modify your start script in package.json as below:
"start": "cross-env NODE_ENV=development node --trace-warnings ./node_modules/webpack-dev-server/bin/webpack-dev-server --color --config internals/webpack/webpack.dev.babel.js",
And you are good to go!!
Just remove with rm -rf ./server if you feel harassed :)
I've got my simple login website fully coded and functional on the webpack dev server. how can i display it with my external IP? I've already port forwarded my router on port 9000 but when i tried www.myIp:portnumber its not working.
Below is my webpack config for the webpack dev server.
//Webpack config
module.exports = {
entry: './app/main.js',
output: {
path: './app',
filename: 'bundle.js'
},
devServer: {
inline: true,
contentBase: './app',
port: 9000
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
}
]
}
}
Set the host property:
devServer: {
inline: true,
contentBase: './app',
port: 9000,
host: '0.0.0.0'
}
https://webpack.js.org/configuration/dev-server/#devserver-host-cli-only