A very simple React.js app gives this warning:
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) <div data-reactid="
(server) <div data-reactid="
The problem is that I don't use any server rendering, what I'm aware of. Here is my package.json file:
{
"name": "mprea",
"version": "0.0.1",
"description": "",
"main": "index.js",
"scripts": {
"start": "NODE_ENV=development webpack-dev-server",
"build": "webpack --progress --colors",
"deploy": "NODE_ENV=production webpack -p"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.4.5",
"babel-loader": "^6.2.1",
"babel-plugin-react-transform": "^2.0.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"css-loader": "~0.23.0",
"exports-loader": "^0.6.2",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.4",
"fs": "0.0.2",
"html-webpack-plugin": "^2.7.1",
"imports-loader": "^0.6.5",
"less": "^2.5.3",
"less-loader": "^2.2.1",
"react-bootstrap": "^0.28.1",
"react-router": "^1.0.3",
"react-transform-hmr": "~1.0.1",
"style-loader": "~0.13.0",
"url-loader": "^0.5.6",
"webpack": "~1.12.12",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^0.7.3"
},
"dependencies": {
"react-dom": "~0.14.6",
"react": "~0.14.6",
"bootstrap": "^3.3.5",
"history": "^1.17.0",
"jquery": "^2.2.0",
"bootstrap-webpack": "0.0.5"
}
}
Here is my webpack file:
var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var merge = require('webpack-merge');
var TARGET = process.env.npm_lifecycle_event;
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
process.env.BABEL_ENV = TARGET;
var output_path = ROOT_PATH.concat(process.env.NODE_ENV === 'production' ? '/dist' : '/build');
var common = {
entry: APP_PATH,
resolve: {
extensions: ['', '.js', '.jsx']
},
output: {
path: output_path,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.css$/,
loaders: ['style', 'css'],
include: APP_PATH
},
{
test: /\.jsx?$/,
loaders: ['babel'],
include: APP_PATH
},
{
test: /\.json?$/,
loaders: ['file'],
include: APP_PATH
},
{ test: /\.(woff|woff2)$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf$/, loader: "file-loader" },
{ test: /\.eot$/, loader: "file-loader" },
{ test: /\.svg$/, loader: "file-loader" }
]
},
plugins: [
new HtmlwebpackPlugin({
title: 'test.se',
template: './app/app.html',
output: {path: ROOT_PATH + '/build',
filename: 'app.html'}
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};
if(TARGET === 'start' || !TARGET) {
module.exports = merge(common, {
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
host: process.env.HOST,
port: process.env.PORT
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
});
}
else {
module.exports = common;
}
The warning is displayed even if I build the production variant and with different web servers.
Here is the html-file:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
</head>
<body><div id="app">
</div>
<script src="bundle.js"></script>
</body>
</html>
And finally, the index.jsx file:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<div>Testing!</div>
, document.getElementById('app'));
What am I doing wrong?
Thanks
Check your HTML file that is output by the HTMLwebpackPlugin, the plugin automatically includes the script tag requiring your bundle, if you have this in your source HTML template as you show above it will be in the outputted HTML file twice causing the error you are getting.
You can disable the atomactic injection of your bundle by setting "inject" to false as below:
new HtmlwebpackPlugin({
title: 'test.se',
template: './app/app.html',
inject: false,
output: {path: ROOT_PATH + '/build',
filename: 'app.html'}
}),
You can read more at: https://github.com/ampedandwired/html-webpack-plugin#configuration
Related
My React app throws 404 errors in production when accessing static files (stylesheets, utilities, and more). The development environment works fine. After debugging for several days and further research I believe it's a webpack pathing issue as my understanding of build path and webpack.output is still lacking despite my research on webpack.js.org. After referencing other posts, I still can't grasp this final concept for bundling applications. All help is appreciated. See below for Things tried, and Posts referenced, and Notes for my process. Thank you.
Things tried:
Added "homepage" property in package.json pointing to "https://my_ghub_username.github.io/project_repo/"
Changed "homepage" property to "."
Changing React router to <HashRouter/> ensuring it imported correctly.
Pushed my latest changes to main before deploying my app to GH pages again
Added package.json scripts to pre-deploy, deploy, && build
Posts/Guides Referenced
How to deploy a React app to GitHub Pages
https://create-react-app.dev/docs/deployment/#github-pages-https-pagesgithubcom
Can't deploy webpack to gh-pages (react app)
I attached snippets of relevant code package.json(I), webpack.dev/prod/common.js(II), index.html(III), file tree(IV), and errors(V) in chrome tools.
(I)
{
"name": "digital-nomad",
"version": "1.2.2",
"description": "An immersive experience to experience life in major cities!",
"main": "index.jsx",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"predeploy": "npm run build",
"deploy": "gh-pages -d dist",
"build": "webpack --config webpack.prod.js",
"start": "webpack serve --config webpack.dev.js"
},
"homepage": ".",
"dependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.1",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"gh-pages": "^3.1.0",
"googleapis": "^64.0.0",
"inline-source-map": "^0.6.2",
"mini-css-extract-plugin": "^1.3.2",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"webpack-cli": "^4.1.0",
"webpack-merge": "^5.4.1"
},
"devDependencies": {
"css-loader": "^5.0.0",
"eslint-plugin-react-hooks": "^4.2.0",
"html-webpack-plugin": "^4.5.0",
"style-loader": "^2.0.0",
"webpack": "^5.2.0",
"webpack-dev-server": "^3.11.0"
}
}
(IIA)
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: './',
compress: true,
open: true,
port: 8080,
watchContentBase: true,
historyApiFallback: true,
}
})
(IIB)
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
module.exports = merge(common, {
mode: "production",
devtool: "source-map",
})
(IIC)
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
title: 'Production',
template: __dirname + '/index.html',
filename: 'index.html',
inject: 'body',
favicon: "favicon.png"
})
module.exports = {
entry: path.resolve(__dirname, "src", "index.jsx" ),
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
publicPath: './'
},
module: {
rules: [
{ test: /\.jsx?$/, exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: { presets: ['#babel/env', '#babel/react'] }
},
},
{ test: /\.css$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: { publicPath: '../' }
},
'css-loader'
],
}
]
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin(),
HTMLWebpackPluginConfig
],
resolve: {
extensions: [".js", ".jsx", ".css", "*"]
},
performance: {
hints: false
},
stats: {
errorDetails: true,
warnings: true,
colors: true,
},
};
(III)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="favicon.png">
<!-- youtube video API -->
<script rel='preload' src="https://www.youtube.com/iframe_api"></script>
<!-- youtube data API -->
<script rel='preload' src="https://apis.google.com/js/api.js"></script>
<script defer src="./src/utils/YTVideoAPI.js"></script>
<script defer src="./src/utils/YTDataAPI.js"></script>
<script src="/dist/bundle.js"></script>
<link rel="stylesheet" type="text/css" href="./src/stylesheets/player.css">
<link rel="stylesheet" type="text/css" href="./src/stylesheets/root.css">
<link rel="stylesheet" type="text/css" href="./src/stylesheets/controls.css">
<title>Digital Nomad</title>
</head>
<body>.
<div id="root"></div>
</body>
</html>
(IV)
FileTree
(V)
GET https://username.github.io/project_name/src/stylesheets/player.css net::ERR_ABORTED 404
Note
I tried my hand over the past couple of days with alternative solutions like utilizing a 404 page to redirect to my app while still using Browser router as a potential solution but not understanding this last aspect of webpack is killing me since I know I can use webpack to my advantage. ( I really want to better conceptualize webpack pathing to improve existing apps ).
Lastly, any feedback on code quality, convention, and implementation is extremely welcome.
After setting up of my reactjs environment, my first hello world does not display the proper output.
This is the output after successfully compiled
output after successfully compiled
//This is my package.json file
{
"name": "reactjs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot",
"build": "webpack -d && cp src/index.html dist/index.html"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"lodash": "^4.17.5",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3"
},
"dependencies": {
"lodash": "^4.17.5",
"react": "^16.3.1",
"react-dom": "^16.3.1"
}
}
//This is my webpack.config.js file
var path = require("path");
var webpack = require('webpack');
var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");
var config = {
mode: 'development',
entry: SRC_DIR + "/app/index.js",
output: {
path: DIST_DIR + "/app",
filename: "bundle.js",
publicPath: "/app/"
},
performance: {
hints: false
},
module: {
rules: [
{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query: {
presets: ["react", "es2015"]
}
}
]
}
};
module.exports = config;
// this is my index.js file
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<p>hello, my name is Oldrick</p>,
document.getElementById('firstapp')
);
//this is my index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div id="firstapp"></div>
<script type="/app/bundle.js"></script>
</body>
</html>
I am getting an error every time I run npm start, here is my error....
ERROR in ./app/App.js
Module build failed: SyntaxError: Unexpected token (8:3)
6 | render() {
7 | return (
> 8 | <div>
| ^
9 | Testing this
10 | </div>
11 | )
This is inside a simple react component. For some reason html tags are causing errors in my build. Below is my webpack.config.js and package json file.
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: [
'./app/App.js'
],
output: {
path: __dirname + '/public',
filename: "bundle.js"
},
plugins: [HTMLWebpackPluginConfig],
devServer: {
inline:true,
contentBase: './public',
port: 3333
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.scss$/,
loader: 'style!css!sass'
}]
}
};
the package json
{
"name": "lr",
"version": "1.0.0",
"description": "",
"main": "App.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "sam",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.26.1",
"html-webpack-plugin": "^2.25.0",
"sass": "^0.5.0",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"
},
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-hot-loader": "^1.3.1",
"react-router": "^3.0.0"
}
}
No clue why html tags are throwing errors.
You'll need to inform webpack that you also want it to consume .jsx extensions. Try updating your test pattern:
{
test : /\.(js|jsx)$/,
loaders: ['babel'],
include: path.join(__dirname, 'src')
}
You also need a .babelrc file to then inform babel how you'd like it to perform the compilation:
{
"presets": ["es2015", "react"]
}
Have a peek here for a working implementation: https://github.com/mikechabot/react-boilerplate
I have a bootstrap theme that came with JS and CSS files that I'd like to integrate into my react app. I'm running into issues requiring the JS files because they don't export modules appropriately or properly define variables (using babel loader). I'd like to be able to require the JS in my app but not run them through babel. I'd also like to be able to use webpack's chunking and minification on these files if possible.
How do I go about setting this up?
Edit
I'm pretty sure what I need in reference to babel is the exclude config parameter. Unfortunately no matter what I try the exclude config isn't honored.
{
test: /\.js/,
loaders: [ 'react-hot', 'babel' ],
include: [
path.join(__dirname, 'src', 'app')
],
exclude: [
path.join(__dirname, 'src', 'semantic-v1.1.2')
]
},
Here's the error I receive:
ERROR in ./src/semantic-v1.1.2/assets/js/imagesloaded.pkgd.js
Module not found: Error: Cannot resolve module 'eventEmitter' in /Users/bradr/Dropbox (Personal)/Development/ritasfoods-com/src/semantic-v1.1.2/assets/js
# ./src/semantic-v1.1.2/assets/js/imagesloaded.pkgd.js 731:2-735:24
I'm sure I'm missing something simple.
Full webpack.config.js:
var webpack = require('webpack');
var path = require('path');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/app/index'
],
output: {
path: path.join(__dirname, 'static'),
filename: 'bundle.js',
publicPath: '/static/'
},
module: {
noParse: [
/aws\-sdk/, // Hack to be able to import aws sdk.
],
loaders: [
{
test: /\.js/,
loaders: [ 'react-hot', 'babel' ],
include: path.join(__dirname, 'src/app'),
exclude: path.resolve('src', 'semantic-v1.1.2')
},
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.md$/, loader: "html!markdown?gfm=false" },
{ test: /\.html/, loader: 'html' },
{ test: /\.yaml/, loader: 'json!yaml' },
{ test: /\.(woff|woff2)$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf$/, loader: "file-loader" },
{ test: /\.eot$/, loader: "file-loader" },
{ test: /\.svg$/, loader: "file-loader" },
{ test: /\.(jpg|png)$/, loader: 'url' }
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
resolve: {
// Removes the need to specify file type in imports.
extensions: ['', '.js', '.json'],
alias:{
theme: path.resolve( __dirname, 'src', 'semantic-v1.1.2', 'assets')
}
}
};
.babelrc
{
"presets": ["es2015", "stage-0", "react"],
}
package.json
{
"name": "ritasfoods-com",
"version": "1.0.0",
"description": "",
"main": "index.js",
"private": true,
"scripts": {
"start": "node server.js",
"build-prod": "./node_modules/webpack/bin/webpack.js -p --config webpack.config.prod.js --progress --colors",
"deploy-prod": "ops/deploy-prod"
},
"repository": {
"type": "git",
"url": "..."
},
"author": "Brad Reynolds",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.6.0",
"babel-loader": "^6.2.4",
"babel-plugin-transform-class-properties": "^6.6.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.23.1",
"html-loader": "^0.4.3",
"node-sass": "^3.4.2",
"react-hot-loader": "^1.3.0",
"redux-devtools": "^3.2.0",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.0.11",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.1",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"aws-sdk": "^2.2.40",
"babel-polyfill": "^6.8.0",
"babel-preset-stage-0": "^6.5.0",
"es6-promise": "^3.1.2",
"events": "^1.1.0",
"exports-loader": "^0.6.3",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"imports-loader": "^0.6.5",
"invariant": "^2.2.1",
"jquery": "^2.2.1",
"less": "^2.6.1",
"less-loader": "^2.2.3",
"markdown-loader": "^0.1.7",
"mustache": "^2.2.1",
"numeral": "^1.5.3",
"pluralize": "^1.2.1",
"react": "15.0.1",
"react-dom": "15.0.1",
"react-redux": "^4.4.5",
"react-router": "^2.0.0",
"redux": "^3.5.2",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.0.1",
"url-loader": "^0.5.7"
}
}
server.js
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.js');
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true
}).listen(8080, 'localhost', function (err, result) {
if (err) {
return console.log(err);
}
console.log('Listening at http://localhost:8080/');
});
I bit the bullet and installed every JS file from the bootstrap theme via npm. It was a PITA as I had to configure a few via webpack. But it's done so I can move on.
I do this for image assets for a chrome extension. The app itself doesn't use them, but Chrome does, so I need them copied into the build folder.
Create an extra entry for static files. Your entry is a js file that just requires all the static files. You will end up with a useless extra bundle as a byproduct, but all your files will be copied over to your build folder.
I'll show you the example of images first because I have working code to pull that from.
webpackconfig.js
// ...
entry: {
// ...
'img': './img/index.js'
},
output: {
// dynamic bundle name for multiple outputs
filename: '[name].js'
// ...
},
rules: {
// ...
{
test: /\.png|svg|jpg|gif$/,
use: [
{
// copy loaded files to
// output_base_path/input_relative_path/filename.extension
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
useRelative: true
}
},
{
loader: 'image-webpack-loader',
options: { /* ... */ }
}
]
}
}
src/img/index.js
// This is the only line in this file.
// Recursively require all png or jpg from current folder
require.context('./', true, /\.(png|jpg)$/)
So now I'll get speculative and try to translate it to your use-case as best I can without being able to test it:
webpackconfig.js
// ...
entry: {
// ...
'static': './static/index.js'
},
output: {
filename: '[name].js'
// ...
},
rules: {
// ...
{
// I'm guessing the string being tested here is a relative path.
// If I'm wrong, this regex will need some tweaking.
// Matches everything in assets folder
test: /^assets\/.+/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
useRelative: true
}
},
{
// Not sure if you actually need this loader, but it's something I
// would try if file loader is choking on your files, especially
// if you are processing multiple filetypes.
loader: 'raw-loader'
}
]
}
}
src/assets/index.js
// Let's just match everything. Putting images in this folder will
// probably give you headaches. Limit it to text files and handle images
// separately.
require.context('./', true, /.+/)
Here's some info on require.context and file-loader
I have no problem whatsoever working on the dev env, hot reloading and everything works fine. Trying to make a production build its proving to be quite challenging, getting nothing but a blank page. There seems to be similar questions on here but I'm not using any html as an entry point. Thanks in advance.
package.json
{
"name": "dc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server -d --content-base public --inline --hot --host 0.0.0.0",
"prod": "webpack -p --progress --config prod.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"axios": "^0.9.1",
"babel-core": "^6.7.2",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.7.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"history": "^2.0.1",
"isomorphic-fetch": "^2.2.1",
"node-sass": "^3.4.2",
"react": "^0.14.7",
"react-css-transition-replace": "^1.1.0",
"react-dom": "^0.14.7",
"react-hot-loader": "^1.3.0",
"react-redux": "^4.4.1",
"react-router": "^2.0.1",
"redux": "^3.3.1",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.0.1",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"webpack": "^1.12.14"
},
"dependencies": {
"axios": "^0.9.1",
"history": "^2.0.1",
"isomorphic-fetch": "^2.2.1",
"react": "^0.14.7",
"react-redux": "^4.4.1",
"react-router": "^2.0.1",
"redux": "^3.3.1"
}
}
production config
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry : ["./app/App.js"],
output : {
filename: "bundle.js",
publicPath: 'dist/',
path : path.resolve(__dirname, 'dist/')
},
devtool: 'source-map',
devServer: {
contentBase: 'dist/'
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"',
},
__DEVELOPMENT__: false,
}),
new webpack.optimize.OccurenceOrderPlugin(),
new ExtractTextPlugin("styles.css"),
new webpack.NoErrorsPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: true,
},
}),
],
module : {
loaders : [
{ test : /\.jsx?$/, loader : 'babel-loader',
query : {
presets : ['react', 'es2015', 'react-hmre']
}
},
{ test: /\.(jpg|png)$/, exclude: /node_modules/, loader: "file?name=images/[name].[ext]"},
{ test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") },
{ test: /\.scss$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader") }
]
}
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lol</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
I have been working with a bit different solution. What I have been doing is bundling the files through webpack then use a koa server to serve a static file and then have a npm start script which sets NODE_ENV to production. Take a look:
package.json:
{
"name": "react",
"version": "1.0.0",
"description": "some description",
"main": "index.js",
"scripts": {
"test": "test",
"start": "NODE_ENV=production webpack --progress && NODE_ENV=production node server.js",
"dev": "webpack-dev-server --progress --colors --watch",
"build": "webpack --progress --watch"
},
"author": "your_name",
"license": "ISC",
"dependencies":{
"babel-core": "^6.7.2",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"copy-webpack-plugin": "^1.1.1",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"image-webpack-loader": "^1.6.3",
"json-loader": "^0.5.4",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.0",
"koa": "2.0.0-alpha.3",
"koa-convert": "1.2.0",
"koa-static": "2.0.0",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
}
server.js:
'use strict';
const port = process.env.PORT || 3000;
const Koa = require('koa');
const serve = require('koa-static');
const convert = require('koa-convert');
const app = new Koa();
const _use = app.use;
app.use = (x) => _use.call(app, convert(x));
app.use(serve('./build'));
const server = app.listen(port, function () {
let host = server.address().address;
let port = server.address().port;
console.log('listening at http://%s:%s', host, port);
});
and finaly webpack.config.js:
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: './main.js',
output: { path: __dirname + "/build/", filename: 'bundle.js' },
module: {
loaders: [
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style", "css!sass?")
},
{
test: /\.json$/,
loader: "json"
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
]
},
plugins: [
new ExtractTextPlugin("main.css"),
new CopyWebpackPlugin([
{
from: __dirname + '/index.html',
to: __dirname + '/index.html'
},
])
]
};
If you will run those with an index.html file and an main.js file rendering some react to it it will run on production :) I recently wrote an article about how exactly my solution looks like. Feel free to take a look: https://medium.com/#TheBannik/get-ready-to-deploy-a-react-js-app-8f62c8e08282#.9gcd329h6