Question

gulpfile.js

'use strict';

require('./gulp/index');

index.js

global.gulp = require('gulp');
global.path = require('path');
global.plumber = require('gulp-plumber');

require('./config');

var bulk = require('bulk-require');
bulk(__dirname, ['./tasks/*']);

gulp.task('default', ['clean', 'js', 'jscontroller']);

config.js

global.config = {};
config.PROJECT_ROOT = path.join(__dirname, '..');
config.DIST = path.join(config.PROJECT_ROOT, 'public/dist');

config.clean = {
src: config.PROJECT_ROOT + '/public/dist/**/*'
};

config.js = {
src: [config.PROJECT_ROOT + '/app/assets/javascripts/modules/**/*.js'],
dest: config.DIST,
webpackOptions: require(config.PROJECT_ROOT + '/webpack.config.js')
};
config.jscontroller = {
src: [config.PROJECT_ROOT + '/app/assets/javascripts/controllers/**/*.js'],
dest: config.DIST,
webpackOptions: require(config.PROJECT_ROOT + '/webpack.config.js')
};

config.watch = {
js: {
task: 'js',
src: config.PROJECT_ROOT + '/app/assets/javascripts/**/*.js'
}
};

module.exports = config;

使用gulp + webpack浏览（+ babel）

我想根据需要延迟加载“页面控制器”。但是目前我得到了一个大规模编译的main.js文件。我试图保持文件分开。有没有办法做到这一点。我试图在这些模块中使用ES6，所以我显然需要通过babel运行它们，但是然后用webpack作为单独文件加载它们的正确方法是什么？

Answer 1

我可以通过在事件侦听器中处理我的导入并在此处使用此特定语法来对Webpack进行延迟加载：

document.getElementById('loadCat').addEventListener('click', (e) => {
    require.ensure([], () => {
        var Cat = require('./cat').Cat;

        var myCat = new Cat('Bugsy');
        document.getElementById('content').innerHTML += `<br/>${myCat.meow()}`;
    });

}）;

根据我的经验，Webpack很聪明，不能在主要包中包含require.ensure中的任何内容，而是包含在单独的包中。

这对我来说很好，我在这里开源了这个例子：gulp-es6-webpack-example

需要延迟加载ES6模块与吞咽

1 个答案: