package.json

npmならnpm init -y、yarnならyarn init -yで作成。

webpack、babelを追加。

yarn add --dev webpack webpack-cli babel-loader @babel/core @babel/preset-env
yarn add --dev sass sass-loader css-loader style-loader
yarn add --dev postcss-loader postcss autoprefixer

ブラウザのバージョン指定

JSのトランスパイルやCSSのAutoprefixer（ベンダープレフィックス処理）で参照される。

package.jsonに以下の行を追加する。

{
  // 省略
  // 適宜バージョンを指定する
  "browserslist": "> 0.25%, not dead",
  // 省略
}

last 2 versionsという指定方法もあるが、推奨されない。この指定をすると無視して良いマイナーブラウザも含めた最新2バージョンで実行できるJSにトランスパイルされるため、モダンブラウザで実行できるコードまでトランスパイルされてしまい、効率が悪いものが出力されてしまう。そのため、> 0.25%のようにブラウザシェアで指定するなり、Firefox > 88のようにブラウザを直接指定した方が良い。

参考：“last 2 versions” harmful

package.json以外に指定する方法もあるっぽい。

webpack.config.js

const path = require('path');

module.exports = {
  mode: process.env.NODE_ENV || 'development',
  entry: './src/entry-point.js',
  output: {
    filename: 'output-filename.js',
    path: path.resolve(__dirname, 'output-directory'),
  },
  module: {
    rules: [
      // babel-loaderの実行設定
      {
        use: 'babel-loader',
        test: /\.js$/, // 処理対象のファイル名のパターン
        include: path.resolve(__dirname, '処理対象のディレクトリ'),
      },
      // sass-loaderの実行設定
      {
        test: /\.scss$/, // 処理対象のファイル名のパターン
        include: path.resolve(__dirname, '処理対象のディレクトリ'),
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  }
};

babel.config.js

module.exports = {
  presets: ['@babel/preset-env']
}

postcss.config.js

module.exports = {
  plugins: [require('autoprefixer')]
}