如何解决gulp-webpack 的优点不能用 webpack-stream 执行
这是我的开发环境。
package.json
{
"name": "webpack-demo","version": "1.0.0","private": true,"license": "MIT","dependencies": {
"@babel/core": "^7.4.3","@types/glob": "^7.1.3","babel": "^6.23.0","browser-sync": "^2.26.14","gulp": "^4.0.2","gulp-autoprefixer": "^7.0.1","gulp-babel": "^8.0.0","gulp-cli": "^2.3.0","gulp-notify": "^3.2.0","gulp-plumber": "^1.2.1","gulp-pug": "^4.0.1","gulp-sass": "^4.1.0","gulp-uglify-es": "^2.0.0","gulp-webpack": "^1.5.0","pixi-spine": "^2.1.11","pixi.js": "^5.3.7","sass": "^1.32.6","ts-loader": "^8.0.14","typescript": "^4.1.3","uglify": "^0.1.5","webpack": "^5.14.0","webpack-cli": "^4.3.1","webpack-stream": "^6.1.2"
},"scripts": {
"tsc": "tsc","build": "webpack","sass-watch": "sass --watch ./src/css/test.sass ./src/build/main.css"
},"devDependencies": {
"glob": "^7.1.3","lodash": "^4.17.20","webpack-stream": "^6.1.2","ts-loader": "^8.0.14"
}
}
gulpfile.js
'use strict';
const gulp = require('gulp');
const sass = require('gulp-sass');
const pug = require('gulp-pug');
const browserSync = require('browser-sync');
const plumber = require("gulp-plumber");
const autoprefixer = require('gulp-autoprefixer');
const notify = require("gulp-notify");
const gulpWebpack = require("gulp-webpack");
const webpackConfig = require("./webpack.config.js");
const webpack = require("webpack");
const webpackStream = require("webpack-stream");
const paths = {
'cssSrc': './src/css/**/*.sass','pug': './src/pug/*.pug','cssDist': './src/build/css','htmlDist': './src/build/html','webpackSrc': './src/modules/*.ts',}
const {watch,series,task,src,dest,parallel} = require('gulp');
//Webpack
task('webpack',function () {
return src(paths.webpackSrc)
.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
.pipe(webpackStream(webpackConfig,webpack))
.pipe(dest('./dist'));
});
// browser-sync
task('browser-sync',() => {
return browserSync.init({
server: {
baseDir: paths.root
},port: 8080,reloadOnRestart: true
});
});
task('reload',(done) => {
browserSync.reload();
done();
});
task('watch',(done) => {
watch([paths.cssSrc],series('sass','reload'));
watch([paths.pug],series('pug','reload'));
watch([paths.webpackSrc],series('webpack','reload'));
done();
});
task('default',parallel('watch','browser-sync'));
webpack.config.js
"use strict";
exports.__esModule = true;
var path = require("path");
var glob = require("glob");
var entries = glob.sync("./src/modules/*.ts");
var rules = [
{
test: /\.ts$/,use: "ts-loader"
}
];
var module = {
rules: rules
};
var config = {
entry: entries,output: {
filename: "main.js",path: path.resolve(__dirname,'dist')
},module: module,mode: 'development',cache: true
};
exports["default"] = config;
// # sourceMappingURL = webpack.config.js.map
我尝试了 webpack --watch 或
//Webpack
task('webpack',webpack))
.pipe(dest('./dist'));
});
到
//Webpack
task('webpack',function () {
return src(paths.webpackSrc)
.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
.pipe(gulpWebpack(webpackConfig)) // changed.
.pipe(dest('./dist'));
});
是成功的 webpack。
但是case webpack-stream,
错误与 API 架构不匹配。
ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration has an unknown property 'default'. These properties are valid: object { amd?,bail?,cache?,context?,dependencies?,devServer?,devtool?,entry?,experiments?,externals?,externalsPresets?,externalsType?,ignoreWarnings?,infrastructureLogging?,loader?,mode?,module?,name?,node?,optimization?,output?,parallelism?,performance?,plugins?,profile?,recordsInputPath?,recordsOutputPath?,recordsPath?,resolve?,resolveLoader?,snapshot?,stats?,target?,watc h?,watchOptions? } -> Options object as provided by the user. For typos: please correct them. For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration. Loaders should be updated to allow passing options via loader options in module.rules. Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader: plugins: [ new webpack.LoaderOptionsPlugin({ // test: /\.xxx$/,// may apply this only for some modules options: { default: … } }) ]
我找不到不匹配的代码。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。