text 一饮而尽で的WebPackを使用する

Posted 2021-05-03

■必要なモジュール
npm i -D gulp webpack webpack-stream

■webpack.config.jsの作成

module.exports = {
  // メインのJSファイル
  entry: "./src/main.js",
  output: {
    filename: "bundle.js"
  }
}

■gulpfile.jsの設定例

// 必要プラグインの読み込み (var gulp = ~ でも可)
const gulp = require("gulp");
const webpackStream = require("webpack-stream");
const webpack = require("webpack");

// webpackの設定ファイルの読み込み
const webpackConfig = require("./webpack.config");

// タスクの定義。 ()=> の部分はfunction() でも可
gulp.task("default", () => {
  // ☆ webpackStreamの第2引数にwebpackを渡す☆
  return webpackStream(webpackConfig, webpack)
    .pipe(gulp.dest("js"));
});