Hmm. So, I removed the dependency in the following manner and it got removed from the package.json file as well. I checked it.
C:\jack\myproject>yarn remove extract-text-webpack-plugin
yarn remove v1.15.2
[1/2] Removing module extract-text-webpack-plugin...
[2/2] Regenerating lockfile and installing missing dependencies...
info fsevents@1.2.9: The platform "win32" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
success Uninstalled packages.
Done in 3.65s.
I also updated the webpack.config.js with the new plug-in information as follows commenting out previous ones based on the accepted answer from this post:
const path = require('path');
const glob = require("glob");
//const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ExtractTextPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: "development",
entry: glob.sync('./app.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: [/node_modules/],
options: {
presets: ['@babel/env', '@babel/react'],
plugins: ['transform-class-properties']
}
},
/*{
test: /\.css$/,
use: ExtractTextPlugin.extract(
{
fallback: 'style-loader',
use: ['css-loader']
})
},*/
{
test: /\.css$/,
use: [
ExtractTextPlugin.loader,
"css-loader"
]
},
{
test: /\.(eot|woff|woff2|ttf|svg|gif|png)$/, loader: "file-loader"
}
]
},
/* plugins: [
new ExtractTextPlugin({filename: 'style.css'})
]*/
plugins: [
new ExtractTextPlugin({
filename: 'style.css',
}),
]
};
And I saw the following output:
C:\jack\myproject>yarn run dev
yarn run v1.15.2
$ webpack --mode development ./src/static/app.js --output ./static/built/bundle.js --watch
webpack is watching the files…
Hash: 33288d5482207cdaa1b5
Version: webpack 4.30.0
Time: 3713ms
Built at: 05/01/2019 2:38:41 PM
Asset Size Chunks Chunk Names
bundle.js 3.44 MiB main [emitted] main
style.css 14.5 KiB main [emitted] main
Entrypoint main = style.css bundle.js
[./node_modules/webpack/buildin/amd-define.js] (webpack)/buildin/amd-define.js 85 bytes {main} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main} [built]
[./src/redux/actions.js] 242 bytes {main} [built]
[./src/redux/reducers.js] 338 bytes {main} [built]
[./src/redux/storeConfig.js] 419 bytes {main} [built]
[./src/routers/AppRouter.js] 1.39 KiB {main} [built]
[./src/static/app.js] 583 bytes {main} [built]
[./src/static/colors.js] 875 bytes {main} [built]
+ 593 hidden modules
Child mini-css-extract-plugin node_modules/css-loader/index.js!node_modules/react-sortable-tree/style.css:
Entrypoint mini-css-extract-plugin = *
2 modules
My cursor is blinking below the line where it says 2 modules. Is it something you think is still in progress? It’s been more than 10 minutes and it’s like that only. I don’t see any error above unlike before.
