質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

解決済

1回答

1857閲覧

webpackでコンパイルできるのに、gulp-webpackではコンパイルできない

yuvernacrew

総合スコア7

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2017/03/28 16:43

###発生している問題・エラーメッセージ
$ webpackでコンパイルできますが,$ gulp webpackで下記のようなエラーが出ます

ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory'

正直なところwebpackのみを用いてコンパイルを行えばいいとおもいますが、どうしてもgulp-webpackが使ってみたいです。

###ソースコード
webpack.config.js

js

1module.exports = { 2 entry: __dirname + '/src/js/main.js', 3 output: { 4 path: __dirname + '/dist/', 5 filename: 'bundle.js' 6 }, 7 module: { 8 loaders: [ 9 { 10 test: /\.vue$/, 11 loader: 'vue-loader' 12 }, 13 { 14 test: /\.js$/, 15 loader: 'babel-loader', 16 exclude: /node_modules/, 17 query: 18 { 19 presets: ['es2015','stage-0'] 20 } 21 } 22 ] 23 }, 24 resolve: { 25 extensions: ['.js', '.vue', '.json'] 26 } 27};

gulpfile.js

const gulp = require('gulp'); const sass = require('gulp-sass'); const csso = require('gulp-csso'); const autoprefixer = require('gulp-autoprefixer'); const imagemin = require('gulp-imagemin'); const frontNote = require('gulp-frontnote'); const webpack = require('gulp-webpack'); const webpackConfig = require('./webpack.config.js'); gulp.task('watch', function(){ gulp.watch('./src/scss/**/*.scss', ['style']); gulp.watch('./src/**/*.js', ['webpack']); }); gulp.task('webpack', function () { gulp.src(['./src/js/*.js']) .pipe(webpack(webpackConfig)) .pipe(gulp.dest('./dist')); }); gulp.task('style', function(){ gulp.src('./src/scss/**/*.scss') .pipe(sass()) .pipe(autoprefixer({ browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'], cascade: false })) .pipe(csso()) .pipe(gulp.dest('../dist/css')) }); gulp.task('img', function(){ gulp.src('./src/images/*.jpg') .pipe(imagemin()) .pipe(gulp.dest('../dist/images')); gulp.src('./src/images/*.png') .pipe(imagemin()) .pipe(gulp.dest('../dist/images')); }) gulp.task('guide',function(){ gulp.src('./src/scss/**/*.scss') .pipe(frontNote({ out: '../guide' })) }) gulp.task('default', ['webpack','watch','img']);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

package.jsonに書いてあるgulp-webpackwebpack本体のバージョンはいくつでしょうか?
今だとおそらくwebpackは特に指定がなければver.2系がインストールされると思いますので、
gulp-webpackの方がそれに対応していないバージョンを使っている等の原因が考えられます。

投稿2017/03/28 23:28

chieeeeno

総合スコア217

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuvernacrew

2017/03/29 04:25

回答ありがとうございます。 webpackのバージョンを1系に戻し、resolveを消したところ、無事エラーなくタスクを実行することができました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問