node.js - 如何调试 webpack?

标签 node.js webpack

我在构建项目时遇到问题。我有一个由 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/

相关文章:

javascript - 使用 webpack 编译时来自 Terser 的 main.js 中的错误

reactjs - 导入svg文件时 typescript 找不到模块

node.js - 有没有办法比较两个成员(member)的排名?

node.js - MongoDB 配对和删除顺序数据库条目的最佳方法

node.js - 使用 Nodejs 面对 api

sql - Node.js PostgreSQL

Angular 4,热模块替换附加而不是替换

javascript - 如何使用 webpack-dev-server 代理代理到 ssl 端点

javascript - 创建空字符串数组?

javascript - 找不到模块 'html-webpack-plugin'(初学者)