我在构建项目时遇到问题。我有一个由 html-webpack-template 处理的 html 模板。有时它有效并且我得到输出文件。其他时候它会失败,我什么也得不到。我无法投入生产,因为每次我 npm run prod
我无法知道我的构建是否会失败或成功。我需要调试 webpack,互联网上的每个人都声称这很容易。但我迷路了。
npm run dev
别名为 npm run cross-env NODE_ENV=development gulp
。所以我认为这是一个 gulp 脚本。但我不知道在哪里可以找到这个脚本。我从来没有用过gulp。我想我应该寻找 webpack 的入口点,但我不确定。
我尝试安装 node-nightly
并检查 webpack.js 文件。但说实话,我不知道我在做什么或在看什么。我只是按照网上的多个教程进行操作。
我只需要弄清楚为什么构建会随机成功或失败。
最佳答案
您正在运行的这些命令位于根目录中的 package.json 脚本内。它们是由最初构建包的人定制的,值得查看每个命令及其实际作用(接下来的行),例如这里是我的 webpack。注意脚本区域
{
"name": "project_phase_2",
"version": "1.0.0",
"description": "Udacity project phase 2",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/levyadams/restaurantReviewApp.git"
},
"author": " <letitslide87@gmail.com>",
"license": "MIT",
"scripts": {
"gulp": "gulp",
"build-files": "webpack --config webpack.config.js",
"dev-server": "webpack-dashboard -- webpack-dev-server build/bundle.js --open",
"watch": "webpack --watch",
"build": "npm run build-files && npm run watch && npm run dev-server",
"start": "npm run watch && npm run dev-server"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
..等等等等。 文件“gulp”命令引用 gulpfile.js,它也位于您的根目录中。例如,这是我的 gulpfile.js 的一部分
var gulp = require('gulp');
//webp images for optimization on some browsers
const webp = require('gulp-webp');
//responsive images!
var responsive = require('gulp-responsive-images');
//gulp delete for cleaning
var del = require('del');
//run sequence to make sure each gulp command completes in the right order.
var runSequence = require('run-sequence');
// =======================================================================//
// ! Default and bulk tasks //
// =======================================================================//
//default runs when the user types 'gulp' into CLI
gulp.task('default',function(callback){
runSequence('clean','webp',['responsive-jpg','responsive-webp','copy-data','copy-sw']),callback
});
// =======================================================================//
// Images and fonts //
// =======================================================================//
gulp.task('responsive-jpg',function(){
gulp.src('src/images/*')
.pipe(responsive({
'*.jpg':[
{width:1600, suffix: '_large_1x', quality:40},
{width:800, suffix: '_medium_1x', quality:70},
{width:550, suffix: '_small_1x', quality:100}
]
}))
.pipe(gulp.dest('build/images'));
});
gulp.task('responsive-webp',function(){
gulp.src('src/images/*')
.pipe(responsive({
'*.webp':[
{width:1600, suffix: '_large_1x', quality:40},
{width:800, suffix: '_medium_1x', quality:70},
{width:550, suffix: '_small_1x', quality:80}
]
}))
.pipe(gulp.dest('build/images'));
});
我建议从一开始就使用 gulp,让它 100% 正常工作,然后再进行 webpack 开发。
关于node.js - 如何调试 webpack?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50607041/