webpack環境設定: JS内にCSSをバンドルしない場合

– 一般的なヘッダ要素

<link rel="stylesheet" href="style.css">
<script src="main.js"></script>

– webpackの “MiniCssExtractPlugin” を使用する
– バンドルしたjsから、stylesheet部分を別ファイルとして出力できる

– webpack, webpack-cli, webpack-dev-server, style-loader, css-loader, sass, sass-loaderインストール済

### モジュールインストール
$ npm i -D postcss-loader autoprefixer

webpack.config.js

module.exports = {

	mode: "development",
	devtool: "source-map",

	entry: `./src/index.js`,

	output: {
		filename: "main.js"
	},

	devServer: {
		host: '192.168.33.10',
		port: '8000',
		contentBase: "dist",
		open: true
	},

	module: {
		rules: [
			{
				test: /\.scss/,
				use: [
					"style-loader",
					{
						loader: "css-loader",
						options: { 
							url: false,
							sourceMap: true,
							importLoaders: 2
						}
					},
					{
						loader: "postcss-loader",
						options: {
							sourceMap: true,
							plugins: [
								require("autoprefixer")({
									grid: true
								})
							]
						}
					},
					{
						loader: "sass-loader",
						options: {
							sourceMap: true
						}
					}
				]
			}
		]
	}
};