Webpack 4 compatibility #701
Comments
|
Yep |
|
Is there any update and/or planning going on? |
|
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. |
|
@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. |
|
@errorx666 please use opencollective for this (https://opencollective.com/webpack) |
|
@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. |
|
I am working on it, @sokra changed how it works internally (webpack/webpack@18ae73d#diff-1064caa9219b7da75fbad061b1a25ec5), breaking/big change. This will take time |
|
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 |
|
@montogeek no promises, but you can have a look at faceyspacey/extract-css-chunks-webpack-plugin@4b3b0a5. It seems to work for me. |
|
@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. |
|
@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. 🚀 |
|
I'm sorry, maybe I don't get it: is the |
|
Webpack 4.0.0 absolutely broke my bundle, because using 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? |
|
@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.) |
|
@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, so now, at least I can work. |
|
@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. |
|
So, did webpack now have built in of something like |
|
@adityapurwa afaik, we're just waiting on the plugin to be updated to support v4. |
|
CMIIW
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)? |
|
yes ^^ I went through this again and received the same prompt. |
|
|
|
@Eddybag That's not a valid If you use
Otherwise use this for
|
|
npm i -D extract-text-webpack-plugin@next worked. Able to bundle now without any errors. Thanks @jfsiii |
|
I've done this Edit: I found out that it was the |
|
extract-text-webpack-plugin |
|
Still getting infinite compilation with beta.0. |
|
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!!! |
|
|
|
already run npm install --save-dev extract-text-webpack-plugin@next,but it didn't work,how to deal with it? |
|
@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 |
|
If it helps anyone the jump from extract-text-webpack-plugin to mini-css-extract-plugin was fairly painless. |
|
If you're following the great advice of @drdanmorris don't forget to require the MiniCssExtractPlugin at the top of your config file:
|
|
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 Configurationconst 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 Configurationconst 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: '/',
},
}; |
If you are using Thank you❣️@drdanmorris and @chuckbergeron |
and others
I'm trying to use this plugin with webpack 4 alpha 5 and getting the following error:
The text was updated successfully, but these errors were encountered: