こんにちは。初投稿です。
gulpを卒業し、webpackオンリーの開発環境を作りたいと思っている見習いフロントエンドエンジニアです。
本題
babelとscssは別エントリーポイントで、
babelはbabel、scssはscssのファイルのままコンパイルし、
それぞれをjs, cssファイルに書き出すような最低限の設定内容です。
色々調査しても、エントリーポイント1つで、jsオンリーでやっていたり、
webpack2以下の記事しか発見できなかったりだったので書いてみました。
エントリーポイントは1つの方がきれいなんだろうなと思いつつ・・・
需要があれば、幸いですm(-ω-)m
入門的な内容だと思いますので、ツッコミどころあればバシバシお願いします。
パッケージインストール
npm i -D webpack babel-core babel-loader babel-preset-env css-loader csscomb csscomb-loader node-sass sass-loader style-loader stylelint-webpack-plugin extract-text-webpack-plugin
webpack.config.json
(ディレクトリ位置は適宜工夫ください。)
webpack.congfig.js
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = [
// js
{
watch: true,
entry: {
js: ['babel-polyfill', './src/babel/entry.js']
},
output: {
path: `${__dirname}/public/js/`,
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
['env', {'modules': false}]
]
}
}
],
exclude: /node_modules/,
}
]
},
devtool: 'source-map'
},
// scss
{
entry: {
'main': './src/scss/main.scss',
// ここにscssを定義していく感じです。
},
output: {
path: `${__dirname}/public/css/`,
filename: '[name].css'
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: { sourceMap: true }
},
{
loader: 'sass-loader',
options: { sourceMap: true }
}
]
}
)
}
]
},
plugins: [
new ExtractTextPlugin('[name].css')
]
}
];