Question

我在构建项目时遇到了麻烦。我有一个html模板，由html-webpack-template处理。有时它工作，我得到输出文件。其他时候它失败了，我一无所获。我不能去制作，因为每次npm run prod我都无法知道我的构建是否会失败或成功。我需要调试webpack，互联网上的每个人都声称这很容易。但我迷路了。

npm run dev别名为npm run cross-env NODE_ENV=development gulp。所以我想这是一个吞噬的脚本。但我不知道在哪里寻找这个脚本。我从来没用过gulp。我想我应该在寻找webpack的入口点，但我不确定。

我尝试安装node-nightly并检查webpack.js文件。但说实话，我不知道我正在做什么或正在看什么。我刚刚在线阅读了多个教程。

我只需要弄清楚为什么构建会随机成功或失败。

Answer 1

您运行的那些命令位于根目录中的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，在继续进行webpack开发之前让它工作100％。

我如何调试webpack？

1 个答案: