Issue 1:
Hi,

I configured my webpack files in order to develop a client project. I have some issues when i run the following command yarn develop. I have no issues in the production mode.

Thanks for helping me.

webpack.dev.js

const path = require('path')
const commonConfig = require('./webpack.common.js')
const merge = require('webpack-merge')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

console.log('Development mode')
const devConfig = {
mode: 'development',
entry: './src/main.js',
output: {
filename: 'main.bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist'
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],

module: {
rules: [{
test: /\.(sa|sc|c)ss$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '/dist'
}
},
"css-loader", "sass-loader",
]
}]
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}]
}

}
module.exports = merge(commonConfig, devConfig)

webpack.prod.js

const path = require('path')
const commonConfig = require('./webpack.common.js')
const merge = require('webpack-merge')
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
console.log('Production mode')

const prodConfig = {
mode: 'production',
entry: './src/main.js',
output: {
filename: 'main.bundle.[hash].js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist'
},
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
discardComments: {
removeAll: true
}
},
canPrint: true
})
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[hash].css",
chunkFilename: "[id].[hash].css"
})
],

module: {
rules: [{
test: /\.(sa|sc|c)ss$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '/dist'
}
},
"css-loader", "sass-loader",
]
}]
},
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
},

}
module.exports = merge(commonConfig, prodConfig)

webpack.common.js

module.exports = {
node: {
fs: 'empty'
}
}

Bug report

What is the current behavior?

$ yarn develop
yarn run v1.3.2
$ webpack --mode=development --config webpack.dev.js --watch
Development mode

webpack is watching the files…

Hash: 5323eebb9fe7fcf17ac1
Version: webpack 4.28.2
Time: 2380ms
Built at: 2018-12-27 09:53:49
Asset Size Chunks Chunk Names
main.bundle.js 443 KiB main [emitted] main
Entrypoint main = main.bundle.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 47
2 bytes {main} [built]
[./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harm
ony-module.js 573 bytes {main} [built]
[./src/main.js] 774 bytes {main} [built]
[./src/style.scss] 175 bytes {main} [built] [failed] [1 error]
+ 11 hidden modules

ERROR in ./src/style.scss 1:8
Module parse failed: Unexpected character '#' (1:8)
You may need an appropriate loader to handle this file type.
> $orange:#e75300;
| html,
| a {
@ ./src/main.js 5:10-33

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

No parsing error.

Other relevant information:

webpack version: 4.23.1

Node.js version: 8.11

Operating System: windows 10

Additional tools: VSCode, Expression Engine CMS

Issue 2: