New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack 4 compatibility #701

Closed
errorx666 opened this Issue Jan 23, 2018 · 92 comments

Comments

Projects
None yet
@errorx666

errorx666 commented Jan 23, 2018

I'm trying to use this plugin with webpack 4 alpha 5 and getting the following error:

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (C:\Users\errorx666\Documents\src\node_modules\webpack\lib\Chunk.js:463:9)
    at C:\Users\errorx666\Documents\src\node_modules\extract-text-webpack-plugin\dist\index.js:176:48
    at Array.forEach (<anonymous>)
    at C:\Users\errorx666\Documents\src\node_modules\extract-text-webpack-plugin\dist\index.js:171:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\errorx666\Documents\src\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Users\errorx666\Documents\src\node_modules\webpack\node_modules\tapable\lib\Hook.js:35:21)
    at Compilation.seal (C:\Users\errorx666\Documents\src\node_modules\webpack\lib\Compilation.js:787:27)
    at hooks.make.callAsync.err (C:\Users\errorx666\Documents\src\node_modules\webpack\lib\Compiler.js:460:17)
    at _err0 (eval at create (C:\Users\errorx666\Documents\src\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:11:1)
    at _addModuleChain (C:\Users\errorx666\Documents\src\node_modules\webpack\lib\Compilation.js:672:11)
    at processModuleDependencies.err (C:\Users\errorx666\Documents\src\node_modules\webpack\lib\Compilation.js:614:8)
    at process._tickCallback (internal/process/next_tick.js:150:11)
@michael-ciniawsky

This comment has been minimized.

Member

michael-ciniawsky commented Jan 24, 2018

Yep extract-text-webpack-plugin isn't updated for webpack >= v4.0.0 yet and is completely broken since webpack@4.0.0-alpha.5. It may be superseded by another plugin/solution or will get an update before the final webpack v4.0.0 release

@michael-ciniawsky michael-ciniawsky added this to the 4.0.0 milestone Jan 24, 2018

@Kocal Kocal referenced this issue Jan 28, 2018

Merged

Upgrade webpack to version 4 #80

5 of 5 tasks complete

@insin insin referenced this issue Jan 30, 2018

Closed

Webpack 4 #409

6 of 7 tasks complete

@clydin clydin referenced this issue Jan 31, 2018

Merged

feat: update to webpack 4 #9459

3 of 3 tasks complete
@apfelbox

This comment has been minimized.

apfelbox commented Feb 2, 2018

Is there any update and/or planning going on?
I am still wondering what the recommended way for compiling (S)CSS is. I previously used this plugin and would like to switch to webpack 4, but without compilation of CSS this isn't possible.

@karmajunkie

This comment has been minimized.

karmajunkie commented Feb 4, 2018

Yes, could we have an update on this? I'm excited about the v4 improvements, but honestly, this is a pretty fundamental plugin for a lot of people, I don't see how you go into beta before this one is ready. Please advise.

@montogeek

This comment has been minimized.

montogeek commented Feb 5, 2018

@karmajunkie This is not webpack library, it is supported by contributors. If you want it to be ready for webpack 4 beta, please contribute to it.

@evilebottnawi

This comment has been minimized.

Member

evilebottnawi commented Feb 5, 2018

@errorx666 please use opencollective for this (https://opencollective.com/webpack)

@karmajunkie

This comment has been minimized.

karmajunkie commented Feb 5, 2018

@montogeek that's fair, i was under the impression that being under webpack-contrib meant that it was an officially supported project by the webpack team. Given its important position with the webpack ecosystem it really should be. It boggles mind that they would put version 4 into beta without these kinds of "tier 1" plugins being updated, much less announce a 1 month beta period before labeling it production ready.

I would love to help but I'm not familiar enough with webpack internals or plugin API to do so. From the comment above it sounds like there is more clarity needed from either this project's maintainers or that of the webpack team on how best to move forward which makes it doubly difficult for new contributors to jump into an update.

@montogeek

This comment has been minimized.

montogeek commented Feb 5, 2018

I am working on it, @sokra changed how it works internally (webpack/webpack@18ae73d#diff-1064caa9219b7da75fbad061b1a25ec5), breaking/big change. This will take time

@GuillaumeCisco

This comment has been minimized.

GuillaumeCisco commented Feb 5, 2018

Hey @montogeek thanks for taking a look on this issue. I'd like to warn you the diff you mentioned is not similar to the last version of Chunk.js : https://github.com/webpack/webpack/blob/next/lib/Chunk.js
Hope it will help solving this issue ;)

@izaakschroeder

This comment has been minimized.

Contributor

izaakschroeder commented Feb 7, 2018

@montogeek no promises, but you can have a look at faceyspacey/extract-css-chunks-webpack-plugin@4b3b0a5. It seems to work for me.

@montogeek

This comment has been minimized.

montogeek commented Feb 7, 2018

@michael-ciniawsky told me that there is another plugin that is going to replace this one eventually, also this is could be support natively by webpack (webpack/webpack#6448)

@izaakschroeder Does it pass the tests? This week prove to be very busy, couldn't continue working on it.

@izaakschroeder

This comment has been minimized.

Contributor

izaakschroeder commented Feb 7, 2018

@montogeek I haven't tested it on this plugin, only the other one. Native CSS modules seem great though didn't realize they were landing in 4.x. 🚀

@ZauberNerd ZauberNerd referenced this issue Feb 12, 2018

Closed

WIP: Webpack v4 #354

7 of 7 tasks complete

@d3viant0ne d3viant0ne referenced this issue Feb 14, 2018

Closed

refactor(plugin): v4.0.0 #685

0 of 1 task complete
@qkdreyer

This comment has been minimized.

qkdreyer commented Feb 25, 2018

It's out now: https://github.com/webpack/webpack/releases/tag/v4.0.0

@karolyi

This comment has been minimized.

karolyi commented Feb 25, 2018

I'm sorry, maybe I don't get it: is the extract-text-webpack-plugin absolutely unnecessary in webpack v4, or what's the situation here ?

@koddr

This comment has been minimized.

koddr commented Feb 25, 2018

Webpack 4.0.0 absolutely broke my bundle, because using extract-text-webpack-plugin:

Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
    at Object.pitch (/Users/user/my_project/node_modules/extract-text-webpack-plugin/dist/loader.js:57:11)

Any ideas how to solve this?

@cklmercer

This comment has been minimized.

cklmercer commented Feb 25, 2018

@koddr looks like you removed the plugin but didn't remove loaders that reference the plugin.

I'm also trying to work around this broken plugin, but I don't think I'm going to be able to given the scale of my project. (millions of users, hundreds of entries, etc.)

@karolyi

This comment has been minimized.

karolyi commented Feb 25, 2018

@cklmercer same here. a lot of other plugins are using this plugin.

also, I've spent 2 hrs to figure out how I can update my now completely broken frontend tooling, before I gave up and decided to rollback and lay low until the other extra modules (I'm looking at you, stylus-loader and postcss-loader) are working.

so now, at least I can work.

@cklmercer

This comment has been minimized.

cklmercer commented Feb 25, 2018

@karolyi yup.. same here. We're going to be waiting things out. Still super excited though. Love the "sensible defaults". I've actually been working on a webpack overhaul for my company for the past week or two that's about to go live, so I figured I'd at least test out webpack4 beforehand. Despite the fact that we're going to have to wait and double back, I'm not even remotely mad.

@adityapurwa

This comment has been minimized.

adityapurwa commented Feb 25, 2018

So, did webpack now have built in of something like extract-text-webpack-plugin, or its just that the plugin doesn't work with webpack@4?

@cklmercer

This comment has been minimized.

cklmercer commented Feb 25, 2018

@adityapurwa afaik, we're just waiting on the plugin to be updated to support v4.

@adityapurwa

This comment has been minimized.

adityapurwa commented Feb 25, 2018

CMIIW

Historically, JavaScript has been the only first-class module type in webpack. This caused a lot of awkward pains for users where they would not be able to effectively have CSS/HTML Bundles, etc. We have completely abstracted the JavaScript specificity from our code base to allow for this new API.

Taken from https://medium.com/webpack/webpack-4-released-today-6cdb994702d4

Does this mean now that webpack can accept CSS file and output it (i mean as a .css file, not as .js that loads the css)?

@bradleyayers

This comment has been minimized.

bradleyayers commented Jun 7, 2018

@josephecombs do you mean ^4.0.0-pre.2?

@josephecombs

This comment has been minimized.

josephecombs commented Jun 7, 2018

I do not - that is is the exact name of the rails gem, and corresponds to how package.json looks after you run rails webpacker:install. It also will ultimately resolve to ^4.0.0-pre.2 in yarn.lock so this is a moot point. Both will work :)

@bradleyayers

This comment has been minimized.

bradleyayers commented Jun 7, 2018

Gotcha! Interestingly when I ran yarn add @rails/webpacker@^4.0.0.pre.pre.2 it prompted me to select a version that exists (apparently 4.0.0.pre.pre.2) did not exist, and the first option was 4.0.0-pre.2.

@josephecombs

This comment has been minimized.

josephecombs commented Jun 7, 2018

yes ^^ I went through this again and received the same prompt.

@evelaguti

This comment has been minimized.

evelaguti commented Jun 18, 2018

"extract-text-webpack-plugin": "next", did work for me :D

@jfsiii

This comment has been minimized.

jfsiii commented Jun 18, 2018

@Eddybag That's not a valid package.json entry.

If you use yarn, type/paste this on the command line:

yarn add --dev extract-text-webpack-plugin@next (see #701 (comment))

Otherwise use this for npm:

npm i -D extract-text-webpack-plugin@next (see #701 (comment))

@satyaprakash-k

This comment has been minimized.

satyaprakash-k commented Jun 20, 2018

npm i -D extract-text-webpack-plugin@next worked. Able to bundle now without any errors. Thanks @jfsiii

@edwinharly

This comment has been minimized.

edwinharly commented Jun 21, 2018

I've done this npm i -D extract-text-webpack-plugin@next still didn't work out for me.
Here's the log

npm run development


> @ development D:\RDPropertyManager\propertymanager
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 77% module and chunk tree optimization unnamed compat pluginD:\RDPropertyManager\propertymanager\node_modules\webpack\lib\Chunk.js:750
                throw new Error(
                ^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (D:\RDPropertyManager\propertymanager\node_modules\webpack\lib\Chunk.js:750:9)
    at D:\RDPropertyManager\propertymanager\node_modules\laravel-mix\node_modules\extract-text-webpack-plugin\dist\index.js:176:48
    at Array.forEach (<anonymous>)
    at D:\RDPropertyManager\propertymanager\node_modules\laravel-mix\node_modules\extract-text-webpack-plugin\dist\index.js:171:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\RDPropertyManager\propertymanager\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:12:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (D:\RDPropertyManager\propertymanager\node_modules\tapable\lib\Hook.js:35:21)
    at Compilation.seal (D:\RDPropertyManager\propertymanager\node_modules\webpack\lib\Compilation.js:905:27)
    at hooks.make.callAsync.err (D:\RDPropertyManager\propertymanager\node_modules\webpack\lib\Compiler.js:494:17)
    at _err0 (eval at create (D:\RDPropertyManager\propertymanager\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:11:1)
    at _addModuleChain (D:\RDPropertyManager\propertymanager\node_modules\webpack\lib\Compilation.js:771:12)
    at processModuleDependencies.err (D:\RDPropertyManager\propertymanager\node_modules\webpack\lib\Compilation.js:710:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Edwin\AppData\Roaming\npm-cache\_logs\2018-06-21T05_49_49_534Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Edit: I found out that it was the laravel-mix dependencies of extract-text-webpack-plugin which is still at version 3, is it possible if I upgrade it manually to the latest version ?

@iamzee

This comment has been minimized.

iamzee commented Jun 21, 2018

extract-text-webpack-plugin
version 4.0.0-beta.0 worked for me...

@mnpenner

This comment has been minimized.

mnpenner commented Jun 26, 2018

Still getting infinite compilation with beta.0.

@PocketNinjaDesign

This comment has been minimized.

PocketNinjaDesign commented Jul 6, 2018

It seems it may be time to move away from extract-text-webpack-plugin

https://github.com/webpack-contrib/mini-css-extract-plugin

haven't used it yet but I'm going to change my project with it!!!

@tmutizwa

This comment has been minimized.

tmutizwa commented Jul 18, 2018

extract-text-webpack-plugin@next worked for me but it now only bundles the last entry point styles if i specify the name filename:style.bundle.css else it gives multiple bundle files if i use filename:[name].css

@seniorYsir

This comment has been minimized.

seniorYsir commented Aug 29, 2018

already run npm install --save-dev extract-text-webpack-plugin@next,but it didn't work,how to deal with it?

@jackwilsdon

This comment has been minimized.

jackwilsdon commented Aug 29, 2018

@seniorYsir This plugin is deprecated since Webpack 4 (and it looks like it's not going to be updated for Webpack 4), you should switch to mini-css-extract-plugin instead.

@drdanmorris

This comment has been minimized.

drdanmorris commented Sep 3, 2018

If it helps anyone the jump from extract-text-webpack-plugin to mini-css-extract-plugin was fairly painless.


  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
            {
              loader: MiniCssExtractPlugin.loader
            },

            {
              loader: "css-loader",
              options: {
                sourceMap: true,
                modules: true,
                localIdentName: "[local]___[hash:base64:5]"
              }
            },

            {
              loader: 'postcss-loader'
            }
          ]
      }

    ]
  },

  plugins: [
    new MiniCssExtractPlugin()
  ],

@chuckbergeron

This comment has been minimized.

chuckbergeron commented Sep 20, 2018

If you're following the great advice of @drdanmorris don't forget to require the MiniCssExtractPlugin at the top of your config file:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
...
plugins: [
new MiniCssExtractPlugin()
],

@alexkyse1

This comment has been minimized.

alexkyse1 commented Oct 28, 2018

I've migrated webpack 2 to 4, I needed to migrate from ExtractTextPlugin to MiniCssExtractPlugin I'm struggling to implement multiple css files, I've reached a point where the console doesn't throw errors but my ReactJS webpage does not load at all, blank.

Does extract-css-chunks-webpack-plugin have a differnet approach for this concrete case, if so could someone bear a hand to me please?

WebPack 2 Configuration

const webpack = require('webpack');

const resolve = require('path').resolve;

const ExtractTextPlugin = require('extract-text-webpack-plugin');

const HTMLWebpackPlugin = require('html-webpack-plugin');

const CopyWebpackPlugin = require('copy-webpack-plugin');

const extractAppStyles = new ExtractTextPlugin('css/app.[contenthash].css');

const extractVendorStyles = new ExtractTextPlugin('css/vendor.[contenthash].css');

// This contains shared configuration for dev and prod builds
module.exports = {

	entry: {

		// All App source files will be compiled into main
		app: './src/index.js',

		// All vendor files will be compiled into vendor.
		// You should add new packages you install here. 
		vendor: [
			'babel-polyfill',
			'react',
			'react-dom',
			'react-router-dom',
			'semantic-ui-react',
			'dateformat',
			'axios',
			'react-waypoint',
			//'@babel/preset-react'
		]
	},
	devServer: {
		historyApiFallback: true,
		noInfo: true,
		contentBase: './dist',
		host: '0.0.0.0',
		hot: true,
		open: true,
		historyApiFallback: true,
		inline: true
	},
	module: {
		rules: [
			// Transpile all .js and .jsx files
			{
				test: /\.(js|jsx)?$/,
				exclude: /(node_modules)/,
				use: [
					{
						loader: 'babel-loader',
						options: {
							presets: [
								'@babel/react', 
								'@babel/env', 
							],
							plugins: [
								"@babel/plugin-proposal-class-properties", 
								[
									"@babel/plugin-proposal-decorators", { "legacy": true }
								],
								'@babel/plugin-proposal-object-rest-spread', 
								'@babel/plugin-syntax-dynamic-import', 
							],
						}
					},
				],
			},
			// Compile CSS files
			{ test: /\.css$/, loader: "style-loader!css-loader" },
			// Compile SCSS files
			{
				test: /\.scss$/,
				// This compiles styles specific to this app
				include: resolve(__dirname, './src/app/styles'),
				use: extractAppStyles.extract({
					fallback: 'style-loader',
					use: [
						{ loader: 'css-loader', options: { minimize: true, sourceMap: true } },
						{ loader: 'sass-loader', options: { sourceMap: true } },
					]
				}),
			},
			{
				test: /\.scss$/,
				// This compiles styles from Semantic-UI
				include: resolve(__dirname, './src/assets'),
				use: extractVendorStyles.extract({
					fallback: 'style-loader',
					use: [
						{ loader: 'css-loader', options: { minimize: true, sourceMap: true } },
						{ loader: 'sass-loader', options: { sourceMap: true } },
					]
				}),
			},

			// Copy static assets over with file-loader
			{
				test: /\.(ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
				loader: 'file-loader', options: {name: '[name].[ext]'},
			},
			{
				test: /\.(woff|woff2|eot|ttf|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
				loader: 'file-loader', options: {name: 'fonts/[name].[ext]'},
			},
			{
				test: /\.(jpg|gif|png|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
				loader: 'file-loader', options: {name: 'images/[name].[ext]'},
			}
		]
	},
	resolve: {
		extensions: ['*', '.js', '.jsx'],
	},
	plugins: [
		// This pulls out webpack module IDs that changes every build to help with caching
		new webpack.HashedModuleIdsPlugin(),
		
		// This separates vendor-provided code into a separate chunk
		new webpack.optimize.CommonsChunkPlugin({
			name: 'vendor'
		}),
		
		// This pulls out webpack boilerplate code that changes every build to help with caching
		new webpack.optimize.CommonsChunkPlugin({
			name: 'runtime'
		}),

		// Extract styles into a separate css files
		extractAppStyles,
		extractVendorStyles,

		// Inject the build date as an environment variable 
		new webpack.DefinePlugin({
			'process.env':{
				'BUILD_DATE': JSON.stringify(new Date())
			}
		}),
		
		// Inject the required assets into the template index file
		new HTMLWebpackPlugin({
			filename: 'index.html',
			template: 'src/assets/index.html',
		}),

		// Copy public files into the dist folder
		new CopyWebpackPlugin([
			{ from: 'src/public' }
		]),
	],
	output: {
		path: __dirname + '/dist',
		filename: 'js/[name].[chunkhash].js',
		chunkFilename: 'js/[name].[chunkhash].js',
		publicPath: '/',
	},
};

WebPack 4 Configuration

const webpack = require('webpack');
const resolve = require('path').resolve;
//const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production'

//const extractAppStyles = new ExtractTextPlugin('css/app.[contenthash].css');
//const extractVendorStyles = new ExtractTextPlugin('css/vendor.[contenthash].css');


// This contains shared configuration for dev and prod builds
module.exports = {
	entry: {
		// All App source files will be compiled into main
		app: './src/index.js',

		// All vendor files will be compiled into vendor.
		// You should add new packages you install here. 
		vendor: [
			'babel-polyfill',
			'react',
			'react-dom',
			'react-router-dom',
			'semantic-ui-react',
			'dateformat',
			'axios',
			'react-waypoint',
		]
	},
	devServer: {
		historyApiFallback: true,
		noInfo: true,
		contentBase: './dist',
		host: '0.0.0.0',
		hot: true,
		open: true,
		historyApiFallback: true,
		inline: true
	},
	module: {
		rules: [
			// Transpile all .js and .jsx files
			{
				test: /\.(js|jsx)?$/,
				exclude: /(node_modules)/,
				use: [
					{
						loader: 'babel-loader',
						options: {
							presets: [
								'@babel/react', 
								'@babel/env', 
							],
							plugins: [
								"@babel/plugin-proposal-class-properties", 
								[
									"@babel/plugin-proposal-decorators", { "legacy": true }
								],
								'@babel/plugin-proposal-object-rest-spread', 
								'@babel/plugin-syntax-dynamic-import', 
							],
						}
					},
				],
			},
			// Compile CSS files
			{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] },
			// Compile SCSS files
			{
				test: /\.scss$/,
				// This compiles styles specific to this app
				include: resolve(__dirname, './src/app/styles'),
				use: [
					devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
					{ loader: 'css-loader', options: { minimize: true, sourceMap: true } },
					{ loader: 'sass-loader', options: { 
						sourceMap: true,
						includePaths: [resolve(__dirname, "css/app.css")]
					 } }
				],
			},
			{
				test: /\.scss$/,
				// This compiles styles from Semantic-UI
				include: resolve(__dirname, './src/assets'),
				use: [
					devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
					{ loader: 'css-loader', options: { minimize: true, sourceMap: true } },
					{ loader: 'sass-loader', options: { 
						sourceMap: true,
						includePaths: [resolve(__dirname, "css/vendor.css")]
					 } }
				]
			},

			// Copy static assets over with file-loader
			{
				test: /\.(ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
				loader: 'file-loader', options: {name: '[name].[ext]'},
			},
			{
				test: /\.(woff|woff2|eot|ttf|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
				loader: 'file-loader', options: {name: 'fonts/[name].[ext]'},
			},
			{
				test: /\.(jpg|gif|png|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
				loader: 'file-loader', options: {name: 'images/[name].[ext]'},
			}
		]
	},
	resolve: {
		extensions: ['*', '.js', '.jsx'],
	},
	plugins: [
		// This pulls out webpack module IDs that changes every build to help with caching
		new webpack.HashedModuleIdsPlugin(),
		
		// This separates vendor-provided code into a separate chunk
		// new webpack.optimize.CommonsChunkPlugin({
		// 	name: 'vendor'
		// }),
		
		// // This pulls out webpack boilerplate code that changes every build to help with caching
		// new webpack.optimize.CommonsChunkPlugin({
		// 	name: 'runtime'
		// }),

		// Extract styles into a separate css files
		//extractAppStyles,
		//extractVendorStyles,

		// Inject the build date as an environment variable 
		new webpack.DefinePlugin({
			'process.env':{
				'BUILD_DATE': JSON.stringify(new Date())
			}
		}),
		
		// Inject the required assets into the template index file
		new HTMLWebpackPlugin({
			filename: 'index.html',
			template: 'src/assets/index.html',
		}),

		// Copy public files into the dist folder
		new CopyWebpackPlugin([
			{ from: 'src/public' }
		]),
		new MiniCssExtractPlugin({
			// Options similar to the same options in webpackOptions.output
			// both options are optional
			filename: devMode ? '[name].css' : '[name].[hash].css',
			chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
		}),
		new MiniCssExtractPlugin({
			filename: devMode ? 'app.css' : 'app.[hash].css',
        }),
        new MiniCssExtractPlugin({
            filename: devMode ? 'vendor.css' : 'vendor.[hash].css',
		})
	],
	optimization: {
		splitChunks: {
			chunks: 'all',
		},
		runtimeChunk: true,
	},
	output: {
		path: __dirname + '/dist',
		filename: 'js/[name].[chunkhash].js',
		chunkFilename: 'js/[name].[chunkhash].js',
		publicPath: '/',
	},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment