如何使用Webpack和Gulp多个入口点来传输应用程序和testing目录？
我正在构build一个基本的博客项目来练习使用React，ES6和Mochatesting框架。 我在我的default Gulp任务中遇到了麻烦，我的ES6testing和应用程序代码。
运行default任务时出现此错误，并更改./test/posts.js的内容以使watch生效：
[11:17:29] Using gulpfile ~/WebstormProjects/blog/gulpfile.js [11:17:29] Starting 'default'... [11:17:29] Finished 'default' after 8.54 ms stream.js:75 throw er; // Unhandled stream error in pipe. ^ Error: invalid argument at pathToArray (/Users/christian/WebstormProjects/blog/node_modules/memory-fs/lib/MemoryFileSystem.js:44:10) at MemoryFileSystem.mkdirpSync (/Users/christian/WebstormProjects/blog/node_modules/memory-fs/lib/MemoryFileSystem.js:139:13) at MemoryFileSystem.(anonymous function) [as mkdirp] (/Users/christian/WebstormProjects/blog/node_modules/memory-fs/lib/MemoryFileSystem.js:279:34) at Compiler.<anonymous> (/Users/christian/WebstormProjects/blog/node_modules/webpack/lib/Compiler.js:229:25) at Compiler.applyPluginsAsync (/Users/christian/WebstormProjects/blog/node_modules/tapable/lib/Tapable.js:60:69) at Compiler.emitAssets (/Users/christian/WebstormProjects/blog/node_modules/webpack/lib/Compiler.js:226:7) at Watching.<anonymous> (/Users/christian/WebstormProjects/blog/node_modules/webpack/lib/Compiler.js:54:18) at /Users/christian/WebstormProjects/blog/node_modules/webpack/lib/Compiler.js:403:12 at Compiler.next (/Users/christian/WebstormProjects/blog/node_modules/tapable/lib/Tapable.js:67:11) at Compiler.<anonymous> (/Users/christian/WebstormProjects/blog/node_modules/webpack/lib/CachePlugin.js:40:4) Process finished with exit code 1
webpack.config.js
var path = require('path'); var babel = require('babel-loader'); module.exports = { entry: { app: './app/js/blog.js', test: './test/posts.js' }, output: { filename: '[name].bundle.js', path: './build', sourceMapFilename: '[name].bundle.map' }, watch: true, devtool: '#sourcemap', module: { loaders: [ { loader: 'babel', test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, query: { presets: ['react', 'es2015'] } } ], resolve: { root: path.resolve('./app'), extensions: ['', '.js'] } } };
gulpfile.js
var gulp = require('gulp'); var webpack = require('webpack-stream'); var watch = require('gulp-watch'); var babel = require('babel-loader'); var named = require('vinyl-named'); gulp.task('default', function() { watch(['./app/**/*.js', './test/*.js'], function() { return gulp.src(['./app/js/blog.js', './test/posts.js']) .pipe(named()) .pipe(webpack(require('./webpack.config.js'))) .pipe(gulp.dest('./build')); }); }); gulp.task('testBundle', function() { gulp.src('./test/posts.js') .pipe(webpack(require('./webpack.config.js'))) .pipe(gulp.dest('./build')); });
posts.js
import expect from 'expect' import { post, posts, addPost } from '../app/js/blog' import { createStore } from 'redux' describe('Blog', () => { describe('posts', () => { it('should be able to create a post', () => { let store = createStore(posts); store.dispatch(addPost('First Post', 'Blah blah blah')) let blah = { id: 'First Post', content: 'Blah blah blah'} expect(store.getState()).toEqual(blah) }); it('should be able to create multiple posts', () => { let store2 = createStore(posts); store2.dispatch(addPost('Second Post', 'Shh')) let expectedState1 = { id: 'Second Post', content: 'Shh' } expect(store2.getState()).toEqual(expectedState1) store2.dispatch(addPost('Third Post', 'Whatever')) let expectedState2 = { id: 'Third Post', content: 'Whatever'} expect(store2.getState()).toEqual(expectedState2) }) }); });
最终，我想要在./build/blog.bundle.js和./build/posts.bundle.jsfind./build/blog.bundle.js和./build/posts.bundle.js的./app/js/blog.js ./test/posts.js ， 分别。
我的webpack.config.js和gulpfile.js有一些问题。 显然， webpack.config.js中output对象的path属性与gulp.dest('./build')冲突。 我也在configuration文件中重新格式化了一些东西来镜像工作。 以下是应该工作的代码。 希望这可以帮助其他人试图完成同样的事情。
我已经开始使用webpack来为app和testing入口点生成单独的bundle文件。 我也为每个创build的软件包获取源代码。 现在我可以在ES6中编写testing和应用程序代码，并在WebStorm中使用Mocha运行它们！
gulpfile.js
var gulp = require('gulp'); var webpack = require('webpack-stream'); var watch = require('gulp-watch'); var named = require('vinyl-named'); gulp.task('default', function() { watch(['./app/**/*.js', './test/*.js'], function() { return gulp.src(['./app/js/blog.js', './test/posts.js']) .pipe(named()) .pipe(webpack(require('./webpack.config.js'))) .pipe(gulp.dest('./build')); }); }); gulp.task('webpack', function() { return gulp.src(['./app/js/blog.js', './test/posts.js']) .pipe(named()) .pipe(webpack(require('./webpack.config.js'))) .pipe(gulp.dest('./build')); });
webpack.config.js
var path = require('path'); var babel = require('babel-loader'); module.exports = { entry: { app: './app/js/entry.js', test: './test/posts.js' }, output: { filename: '[name].bundle.js', sourceMapFilename: '[name].bundle.map' }, devtool: '#source-map', module: { loaders: [ { loader: 'babel', test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, query: { presets: ['react', 'es2015'] } } ] }, resolve: { root: path.resolve('./app'), extensions: ['', '.js'] } };
entry.js
import { posts } from './blog' import { createStore } from 'redux' createStore(posts)
blog.js
const posts = (state = [], action) => { switch (action.type) { case 'ADD_POST': return post(undefined, action) default: return state } } const post = (state = {}, action) => { switch (action.type) { case 'ADD_POST': return { id: action.name, content: action.content } } } // action creator const addPost = (name, content) => { return { type: 'ADD_POST', name, content } } export { posts, post, addPost }