以前やったこの記事への追記的な意味で。
webpack-cli
ちゃんと理解するにはgulpから入るよりもまずはwebpack自体をコマンドラインで実行すべきだと思います。
が、コマンドラインでのwebpackをしたいときはwebpackと共にwebpack-cliをnpmでいれないと動きません。
1 2 |
npx webpack --mode development --config ./webpack.config.js (省略してもファイル名がwebpack.config.jsなら自動で探します。) |
設定ファイル書かなくてもresouceとoutputを手動で直接入れることもできます。最初はここからやった方が良さげ。
gulp-webpackは非推奨
gulpでwebpackを使うときはgulp-webpackを使い、コンパイルをしていました。
1 2 3 4 5 6 7 8 |
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を使うのが正しいようで、下記のようなコードに変えたところ、無事動きました。
1 2 3 4 5 6 7 8 9 10 |
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という欄が出てきて、素のソースからデバッグできます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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', } } |
最初に知っておけばよかった・・・