Simple conversion from scss to css, without include - sass

Question

New to webpack,and, learning curve is fun. But my need is simply do the following (which I'm doing using bash today)
node-sass ./src/styles/default.scss > ./dist/assets/default.css
I don't need to include it in the html.
I don't want to include the css into javascript file.
Just plain conversion from scss to css.

Answer 1

Nvm, got the following working for me:
webpack.config.js
var path = require('path');
const HtmpWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: { main: './src/index.js' },
output: {
path: path.resolve(__dirname, 'dist/assets'),
filename: 'default.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: { loader: 'babel-loader' }
}, {
test: /\.(png|svg|jpe?g|gif)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
}, {
test: /\.scss$/,
use: [
{ loader: "style-loader" },
{ loader: MiniCssExtractPlugin.loader },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
}
]
},
plugins: [
new HtmpWebPackPlugin({
path: __dirname + '/dist/assets',
filename: 'default.html',
template: 'src/index.html',
inject: false,
hash: false
}),
new MiniCssExtractPlugin({
filename: 'default.css',
outputPath: 'dist/assets'
})
]
}
package.json
"scripts": {
"build": "rm -rf ./dist && webpack --mode production"
},
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.0",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.8.0"
}