webpackについて再履修2

投稿日：2019年2月10日

以前やったこの記事への追記的な意味で。

webpackについて再履修

Contents

1 webpack-cli
2 gulp-webpackは非推奨
3 devtoolでデバッグ可能

webpack-cli

ちゃんと理解するにはgulpから入るよりもまずはwebpack自体をコマンドラインで実行すべきだと思います。

が、コマンドラインでのwebpackをしたいときはwebpackと共にwebpack-cliをnpmでいれないと動きません。

npx webpack  --mode development --config ./webpack.config.js
(省略してもファイル名がwebpack.config.jsなら自動で探します。)

1 2	npx webpack --mode development --config ./webpack.config.js (省略してもファイル名がwebpack.config.jsなら自動で探します。)

設定ファイル書かなくてもresouceとoutputを手動で直接入れることもできます。最初はここからやった方が良さげ。

gulp-webpackは非推奨

gulpでwebpackを使うときはgulp-webpackを使い、コンパイルをしていました。

const gulp = require('gulp');	
const webpack = require('gulp-webpack');

gulp.task('webpack',() => {	
    return gulp.src(config.webpack.entry)
        .pipe(webpack(config.webpack))
        .pipe(gulp.dest(config.js.dest));
});

const gulp = require('gulp');

const webpack = require('gulp-webpack');

gulp.task('webpack',() => {

return gulp.src(config.webpack.entry)

.pipe(webpack(config.webpack))

.pipe(gulp.dest(config.js.dest));

});

上記のようなコードですが、

コンパイル元のソースでimportが使えない(コンパイル自体はできるが出来上がったソースでJavaScriptのシンタックスエラー発生)
Babelのモジュールが機能しない、トランスパイルされない

などの問題が発生。ずっと設定ファイル(config.js)に問題があるのかなと思っていましたが、コマンドラインでのwebpackを同一の設定ファイルで行ったところ上記の問題は発生しないので、ひょっとしてライブラリの設定かな？と思ったところ、gulp-webpack自体非推奨になっていました。

https://www.npmjs.com/package/gulp-webpack

2019/2月現在、下記のようなメッセージが出力されています。

This package has been deprecated
Author message:
Has been renamed to https://www.npmjs.com/package/webpack-stream

正しくは素のwebpackとwebpack-streamを使うのが正しいようで、下記のようなコードに変えたところ、無事動きました。

const gulp = require('gulp');
const webpack = require('webpack');
const webpackStream = require('webpack-stream');
const config = require('./config.js');

//js コンパイル
gulp.task('webpack',() => {
    return webpackStream(config.webpack, webpack)
      .pipe(gulp.dest(config.js.dest));
 });

const gulp = require('gulp');

const webpack = require('webpack');

const webpackStream = require('webpack-stream');

const config = require('./config.js');

//js コンパイル

gulp.task('webpack',() => {

return webpackStream(config.webpack, webpack)

.pipe(gulp.dest(config.js.dest));

});

devtoolでデバッグ可能

ずっとデバッグの方法がないかなーと思っていたんですが、module.exportを書く際に下記のように、書いておけばブラウザのconsole画面で、webpackという欄が出てきて、素のソースからデバッグできます。

module.exports = {
  // 出力先の指定
  dest: dest,
  // jsのビルド設定
  js: {
    src: src + '/**',
    dest: dest + '/',
    uglify: true
  },
  // webpackの設定
  webpack: {
    mode: 'development',
    entry: src + '/sample_rs.js',
    output: {
      filename: 'build.js'
    },
   //ここに書いておく！
    devtool: 'init-source-map',
  }
}

module.exports = {

// 出力先の指定

dest: dest,

// jsのビルド設定

js: {

src: src + '/**',

dest: dest + '/',

uglify: true

// webpackの設定

webpack: {

mode: 'development',

entry: src + '/sample_rs.js',

output: {

filename: 'build.js'

//ここに書いておく！

devtool: 'init-source-map',

}

最初に知っておけばよかった・・・