LoginSignup
4
4

More than 5 years have passed since last update.

webpack3でbabelとscssを別々のエントリーポイントからコンパイルする方法

Last updated at Posted at 2018-01-24

こんにちは。初投稿です。
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')
    ]
  }
];
4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4