javascript - 单独执行webpack和使用gulp-webpack打包的文件结果不一样。

问题描述

问 题

遇到的问题：
我用gulp-webpack工具来执行webpack任务。发现打包后的文件中的 import $ from 'jquery'都还保留着（css文件已经被编译进去了），文件也很小，只有几百行，然而我单独在终端执行webpack，文件是可以被正确编译的，有上万行。
请问大家，这是怎么回事？怎么解决？谢谢~

下面是我的相关代码：

webpack.config.js

var webpack = require('webpack')
var glob = require('glob');

function getEntry() {
    var entry = {};
    glob.sync(__dirname + "/app/js/*.main.js").forEach(function (file) {
        var name = file.match(/([^/]+?)\.main\.js/)[1];
        entry[name] = __dirname + "/app/js/" + name + ".main.js";
    });
    return entry;
}

module.exports = {
  entry: getEntry(),
  output: {
    path: __dirname + "/build/js",
    filename: '[name].js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader'}
    ]
  }
}

gulpfile.js

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
var webpack = require('gulp-webpack');
var webpackConf = require('./webpack.config.js');

gulp.task('webpack', function () {
    return gulp.src(globs.js)
        .pipe(webpack(webpackConf))
        .pipe(gulp.dest("build/js"));
});

解决方案

ES6语法没有处理。给 webpack 增加 babel-loader。

这篇关于javascript - 单独执行webpack和使用gulp-webpack打包的文件结果不一样。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！