[英]UglifyJs error with Gulp and webpack
I am currently discovering the module bundler "Webpack". 我目前正在发现模块捆绑程序“ Webpack”。 I am trying to do something quite easy : I have a
main.js
entry and a bundle.js
output. 我正在尝试做一些很简单的事情:我有一个
main.js
条目和一个bundle.js
输出。 I use babel in order to translate in ES6. 我使用babel来翻译ES6。
My package.json : 我的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 : 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()
]
}
When I prompt webpack
in the CLI, it works pretty well, a bundle.js
file which is minified is created in the dist
folder. 当我在CLI中提示
webpack
时,它工作得很好,在dist
文件夹中创建了一个bundle.js
文件。
Now, I want to combine with Gulp 现在,我想与Gulp结合
Here is my gulpfile.js
: 这是我的
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/'));
});
When I enter gulp
in the CLI, I have this error : 在CLI中输入
gulp
时,出现以下错误:
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: bundle.js from UglifyJs
Unexpected token: name (_) [bundle.js:47,8]
However, when I remove the line new webpack.optimize.UglifyJsPlugin()
from webpack.config.js and prompt gulp
in the CLI it works perfectly ! 然而,当我删除行
new webpack.optimize.UglifyJsPlugin()
从webpack.config.js和提示gulp
在CLI它完美!
I reinstalled all the npm packages but the problem is still here. 我重新安装了所有npm软件包,但问题仍然存在。
Does anybody have an idea ? 有人有主意吗?
How do you run the Webpack config? 您如何运行Webpack配置? I assume by
webpack path-to-config/webpack.config.js
? 我假设通过
webpack path-to-config/webpack.config.js
?
You have new webpack.optimize.UglifyJsPlugin()
in your config, so by using webpack -p
which executes the production mode, you get an error because UglifyJsPlugin is executed twice. 您的配置中有
new webpack.optimize.UglifyJsPlugin()
,因此通过使用执行生产模式的webpack -p
会收到错误,因为UglifyJsPlugin执行了两次。 I guess the same happens with your Gulp setup. 我想您的Gulp设置也会发生同样的情况。
However, the error message points to "_" not defined, which could be related to lodash . 但是,错误消息指向未定义的“ _”,这可能与lodash有关。 Maybe the import can't be resolved by Gulp?
也许Gulp无法解决导入问题?
However, I would not mix Gulp and Webpack. 但是,我不会混合使用Gulp和Webpack。 See the discussion here: Gulp + Webpack or JUST Webpack?
请参阅此处的讨论: Gulp + Webpack还是Just Webpack? There is also an example using Webpack from within a gulp task.
还有一个从gulp任务中使用Webpack的示例。
I would like to suggest you to don't mix webpack
and gulp
, just create a script
inside your package.json#scripts
which runs webpack and then if you still want to exec webpack inside a gulp task you can do: 我想建议你不要混用
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.