webpack4でsassからcssとindex.jsからmain.jsにトランスパイル

$ node -v
v12.18.3
$ npm -v
6.14.6
$ npm -y init
$ npm -D install webpack webpack-cli
$ npx webpack -v
4.44.0
$ npm -D i sass-loader node-sass style-loader css-loader
$ npm -D i mini-css-extract-plugin optimize-css-assets-webpack-plugin

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
	entry: {
		anyname: `./src/scss/style.scss`,
	},
	output: {
		path: path.resolve(__dirname, 'dist'),
	},
	// entry: `./src/index.js`,

	// output: {
	// 	filename: "main.js"
	// },
	module: {
		rules: [
			{
				test: /\.scss$/,
				use: [
					{ loader: MiniCssExtractPlugin.loader },
					{ loader: 'css-loader' },
					{ loader: 'sass-loader' },
				],
			}
		],
	},
	plugins: [
		new MiniCssExtractPlugin({ filename: 'css/style.css'}),
	],
	optimization: {
		minimizer: [new OptimizeCSSAssetsPlugin({})],
	},
}

./src/scss/style.scss

body {
	background-color: aqua;
}

### npx実行
$ npx webpack –mode production

./dest/css/style.css

body{background-color:#0ff}

sassからcssには出来た。

### sassはcssに、jsはdist/main.jsにトランスパイル
sassからcssにする場合と、index.jsからmain.jsにする場合に、一々webpack.config.jsのコメントアウトを外すのは面倒。entryを複数に書いてみる。

module.exports = {
	entry: {
		anyname: `./src/scss/style.scss`,
		main: `./src/index.js`,
	},
	output: {
		filename: "[name].js",
		path: path.resolve(__dirname, 'dist'),
	},
	// 省略
}

こうすると、distフォルダにanyname.jsとmain.jsが作られる。

あとはローカルサーバか。