[英]UglifyJs error with Gulp and webpack
我目前正在发现模块捆绑程序“ Webpack”。 我正在尝试做一些很简单的事情:我有一个main.js
条目和一个bundle.js
输出。 我使用babel来翻译ES6。
我的package.json:
{
"name": "me",
"version": "1.0.0",
"description": "Builder",
"main": "index.js",
"scripts": {
...
},
"author": "me",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.5.2",
"babel-preset-es2015": "^6.24.1",
"gulp": "^3.9.1",
"lodash": "^4.17.4",
"webpack": "^3.0.0",
"webpack-stream": "^3.2.0"
},
"dependencies": {
"jquery": "^3.2.1"
}
}
Webpack.config.js:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: path.resolve(__dirname, 'js/main.js'),
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
}
当我在CLI中提示webpack
时,它工作得很好,在dist
文件夹中创建了一个bundle.js
文件。
现在,我想与Gulp结合
这是我的gulpfile.js
:
var gulp = require('gulp');
var webpackS = require('webpack-stream');
gulp.task('default', function() {
return gulp.src('./app/js/main.js')
.pipe(webpackS( require('./app/webpack.config.js') ))
.pipe(gulp.dest('./app/dist/'));
});
在CLI中输入gulp
时,出现以下错误:
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: bundle.js from UglifyJs
Unexpected token: name (_) [bundle.js:47,8]
然而,当我删除行new webpack.optimize.UglifyJsPlugin()
从webpack.config.js和提示gulp
在CLI它完美!
我重新安装了所有npm软件包,但问题仍然存在。
有人有主意吗?
您如何运行Webpack配置? 我假设通过webpack path-to-config/webpack.config.js
?
您的配置中有new webpack.optimize.UglifyJsPlugin()
,因此通过使用执行生产模式的webpack -p
会收到错误,因为UglifyJsPlugin执行了两次。 我想您的Gulp设置也会发生同样的情况。
但是,错误消息指向未定义的“ _”,这可能与lodash有关。 也许Gulp无法解决导入问题?
但是,我不会混合使用Gulp和Webpack。 请参阅此处的讨论: Gulp + Webpack还是Just Webpack? 还有一个从gulp任务中使用Webpack的示例。
我想建议你不要混用webpack
和gulp
,只需创建一个script
你里面package.json#scripts
如果你仍然想的WebPack Exec中一饮而尽任务,你可以做内部的它运行的WebPack然后:
var exec = require('child_process').exec;
gulp.task('runWebpack', function (callback) {
exec('npm run webpack', callback);
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.