Webデザイナーの仕事を楽にする! gulpではじめるWeb制作ワークフロー入門 公式サポートサイト

SECTION 34 webpackの基本的な使い方

📖 171ページ

package.json

{
  "description": "...",
  "repository": "...",
  "scripts": {
    "prod": "webpack --mode production",
    "dev": "webpack --mode development -w"
  },
（省略）
}

SECTION 35 webpackを設定する

📖 172ページ

webpack.config.js

module.exports = {
  entry: './src/js/app.js',
}

SECTION 36 プラグインのインストール

📖 176ページ

webpack.config.js

module.exports = {
  entry: './src/js/main.js',
  module: {} // 追記
}

📖 176ページ

webpack.config.js

module.exports = {
  entry: './src/js/main.js',
  module: {
    rules: [] // 追記
  }
}

📖 177ページ

webpack.config.js

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {                     // 追記
        test: /.js$/,       //
        use: 'babel-loader' //
      }                     //
    ]
  }
}

📖 179ページ

webpack.config.js

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: './dist/bundle.js'
  },
  module: {
    rules: [
      {
        test: /.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

📖 180ページ

main.js

const babel = () => {
  console.log('hello world')
}

babel()

SECTION 37 ライブラリの管理

📖 183ページ

main.js

import $ from 'jquery'

$('button').on('click', () => {
  window.alert('hello webpack')
})

📖 186ページ

main.js

import $ from 'jquery'
import 'slick-carousel'
import '../../node_modules/slick-carousel/slick/slick.css'
import '../../node_modules/slick-carousel/slick/slick-theme.css'

📖 187ページ

webpack.config.js

module.exports = {
  entry: './src/js/app.js',
  module: {
    rules: [
      {
        test: /.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /.css$/,
        use: ['css-loader']
      }
    ]
  }
}

📖 189ページ

webpack.config.js

module.exports = {
  entry: './src/js/main.js',
  module: {
    rules: [
      {
        test: /.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /.gif|png|jpg|eot|wof|woff|ttf|svg$/,
        use: ['url-loader']
      }
    ]
  }
}

📖 191ページ

webpack.config.js

module.exports = {
  entry: './src/js/main.js',
  module: {
    rules: [
      {
        test: /.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /.css$/
        use: ['style-loader', 'css-loader']
      },
      {
        test: /.gif|png|jpg|eot|wof|woff|ttf|svg$/,
        use: ['url-loader']
      }
    ]
  }
}