webpack 4

[coreui]

webpack 4

[ekeuus]

This is the config file I got it to work with

// @flow

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const preCSS = require('precss');
const autoPrefixer = require('autoprefixer');

const extractCSS = new ExtractTextPlugin({
	filename: '[name].fonts.css',
	allChunks: true,
});
const extractSCSS = new ExtractTextPlugin({
	filename: '[name].styles.css',
	allChunks: true,
});

const BUILD_DIR = path.resolve(__dirname, 'build');
const SRC_DIR = path.resolve(__dirname, 'src');

const prodPlugins = [
	new webpack.DefinePlugin({ // <-- key to reducing React's size
		'process.env': {
			NODE_ENV: JSON.stringify('production'),
		},
	}),
	new webpack.optimize.AggressiveMergingPlugin(), // Merge chunks
	new webpack.HotModuleReplacementPlugin(),
	new webpack.NamedModulesPlugin(),
	new HardSourceWebpackPlugin(),
	extractCSS,
	extractSCSS,
	new HtmlWebpackPlugin({
		inject: true,
		template: './public/index.html',
	}),
	new CopyWebpackPlugin(
		[
			{ from: './public/img', to: 'img' },
		],
		{ copyUnmodified: false },
	),
	new CompressionPlugin({
		asset: '[path].gz[query]',
		algorithm: 'gzip',
		test: /\.js$|\.css$|\.html$/,
		threshold: 10240,
		minRatio: 0.8,
	}),
];
const devPlugins = [
	new webpack.HotModuleReplacementPlugin(),
	new webpack.NamedModulesPlugin(),
	new HardSourceWebpackPlugin(),
	extractCSS,
	extractSCSS,
	new HtmlWebpackPlugin({
		inject: true,
		template: './public/index.html',
	}),
	new CopyWebpackPlugin(
		[
			{ from: './public/img', to: 'img' },
		],
		{ copyUnmodified: false },
	),
	new CompressionPlugin({
		asset: '[path].gz[query]',
		algorithm: 'gzip',
		test: /\.js$|\.css$|\.html$/,
		threshold: 10240,
		minRatio: 0.8,
	}),
];

module.exports = (env = {}) => ({
	mode: env.prod ? 'production' : 'development',
	entry: {
		index: ['babel-polyfill', `${SRC_DIR}/index.js`],
	},
	output: {
		path: BUILD_DIR,
		filename: '[name].bundle.js',
	},
	// watch: true,
	devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
	devServer: {
		contentBase: BUILD_DIR,
		//   port: 9001,
		compress: true,
		hot: true,
		open: true,
	},
	module: {
		rules: [
			{
				test: /\.(js|jsx)$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
					options: {
						cacheDirectory: true,
						presets: ['es2015', 'react', 'env'],
						plugins: ['transform-es2015-destructuring', 'transform-object-rest-spread', 'transform-class-properties'],
					},
				},
			},
			{
				test: /\.html$/,
				loader: 'html-loader',
			},
			{
				test: /\.(scss)$/,
				use: [{
					loader: 'style-loader', // inject CSS to page
				}, {
					loader: 'css-loader',
					options: { alias: { '../img': '../public/img' } },
				}, {
					loader: 'postcss-loader', // Run post css actions
					options: {
						plugins() { // post css plugins, can be exported to postcss.config.js
							return [
								preCSS,
								autoPrefixer,
							];
						},
					},
				}, {
					loader: 'sass-loader', // compiles Sass to CSS
				}],
			},
			{
				test: /\.css$/,
				use: extractCSS.extract({
					fallback: 'style-loader',
					use: 'css-loader',
				}),
			},
			{
				test: /\.(png|jpg|jpeg|gif|ico)$/,
				use: [
					{
						// loader: 'url-loader'
						loader: 'file-loader',
						options: {
							name: './img/[name].[hash].[ext]',
						},
					},
				],
			},
			{
				test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
				loader: 'file-loader',
				options: {
					name: './fonts/[name].[hash].[ext]',
				},
			}],
	},
	plugins: env.prod ? prodPlugins : devPlugins,
});

[johnantoni]

@cvhong i recently ported a webpack 3 app to webpack 4. i'll push the config to github and post the link here. it's got similar things so should be a good basis to work from.

UPDATE

Here's the setup:

https://github.com/johnantoni/webpack4

[veyhong]

@ekeuus Can u share your package.json for coreui-free-react-admin-template ?

[johnantoni]

awesome! thanks @ekeuus

[veyhong]

Hi, @johnantoni how to setup the command in script ? in package.json. I try many way but still got freeze at build.

[johnantoni]

haven't tried the webpack 4 config @ekeuus posted should work by saving his config to webpack.config.js

then adding this start section to your package.json

"scripts": {
    "start": "webpack-dev-server --open --config webpack.config.js",
    "build": "NODE_ENV=production && webpack --config webpack.config.js"
},

and adding any missing packages to it via...

 yarn add [missing package name] --dev

[veyhong]

Thank you for ur response @johnantoni I follow ur instruction but I use npm to install missing packages, but it return this error:

[Error] Error: Cannot find module 'react'
	webpackMissingModule (bootstrap-table.js:9:88)
	Eval Code (bootstrap-table.js:9:159)
	eval
	../../node_modules/react-bootstrap-table-next/lib/src/bootstrap-table.js (index.bundle.js:848)

[Error] Error: only one instance of babel-polyfill is allowed
	(anonymous function) (index.js:10)
	Eval Code (index.js:29)
	eval
	./node_modules/babel-polyfill/lib/index.js (index.bundle.js:1422)
	__webpack_require__ (index.bundle.js:722)
	fn (index.bundle.js:99)
	(anonymous function) (index.bundle.js:11429)
	__webpack_require__ (index.bundle.js:722)
	(anonymous function) (index.bundle.js:789)
	Global Code (index.bundle.js:790)

[veyhong]

Hi @johnantoni , I got problems solved, it was caused by I reinstall some of babel-... package.

[aap82]

You can also use Webpack 4 without ejecting by upgrading to react-scripts@next, which uses webpack 4.8.3 and babel7.

And if you're ejecting just for HMR, use react-app-rewired instead.

[veyhong]

Hey @johnantoni , It seems there is another issue with this config, when I modify ./src/scss/_custom.scss , it is not regenerate new style.css again using this webpack config, any solution ?