akkey247
4/2/2017 - 3:27 PM

【webpack,gulp】自動ビルド

【webpack,gulp】自動ビルド

module.exports = function(str) {
  console.log(str)
}
var sub = require('./sub')
sub('Hello World!!')
{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-webpack": "^1.5.0",
    "webpack": "^2.2.1"
  }
}
var gulp = require('gulp')
var webpack = require('gulp-webpack')

gulp.task('webpack',function(){
  gulp.src([
    'src/index.js'
  ])
  .pipe(webpack({
    output: {
      filename: 'bundle.js'
    }
  }))
  .pipe(gulp.dest('dist/'))
})

gulp.task('default',function(){
  gulp.watch([
    'src/*.js'
  ],['webpack'])
})

使い方

  1. パッケージインストール
$ npm i
  1. gulp 実行
$ gulp
  1. index.js , sub.js を更新

ファイルを更新後に dist/bundle.js が生成されれば成功。

  1. jsファイルの実行
$ node .

実行後に Hello World!! と表示されれば成功。