javascript - 为什么我的应用程序在安装后找不到 "html-loader"？

Question

信息

我有一个使用 docker 运行的应用程序 (reactjs)，它使用 webpack，但在开始时崩溃，提示 html-loader 无法解析。我安装了它，但是当我重新运行 docker 时，它继续这样说。

错误信息

Html Webpack Plugin:
  Error: Child compilation failed:
  Entry module not found: Error: Can't resolve 'html-loader' in '/usr/src/app/client':
  Error: Can't resolve 'html-loader' in '/usr/src/app/client'

  - compiler.js:153 childCompiler.runAsChild
    [client]/[html-webpack-plugin]/lib/compiler.js:153:18

  - Compiler.js:306 compile
    [client]/[webpack]/lib/Compiler.js:306:11

  - Compiler.js:631 hooks.afterCompile.callAsync.err
    [client]/[webpack]/lib/Compiler.js:631:15


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [client]/[tapable]/lib/Hook.js:154:20

  - Compiler.js:628 compilation.seal.err
    [client]/[webpack]/lib/Compiler.js:628:31


  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [client]/[tapable]/lib/Hook.js:154:20

  - Compilation.js:1329 hooks.optimizeAssets.callAsync.err
    [client]/[webpack]/lib/Compilation.js:1329:35

package.json

{
  "name": "client",
  "version": "1.1.0",
  "private": true,
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "autosuggest-highlight": "^3.1.1",
    "axios": "^0.18.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "body-parser": "^1.18.3",
    "css-loader": "^2.1.0",
    "d3": "^5.5.0",
    "email-validator": "^2.0.4",
    "file-loader": "^3.0.1",
    "history": "^4.7.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "js-file-download": "^0.4.4",
    "path": "^0.12.7",
    "react": "^16.4.1",
    "react-autosuggest": "^9.4.0",
    "react-cookie": "^3.0.4",
    "react-dnd": "^5.0.0",
    "react-dnd-html5-backend": "^5.0.1",
    "react-dom": "^16.4.1",
    "react-dropdown": "^1.6.2",
    "react-phone-number-input": "^2.2.15",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^3.0.0",
    "reactstrap": "^6.3.1",
    "save-svg-as-png": "^1.4.7",
    "style-loader": "^0.23.1",
    "text-loader": "0.0.1",
    "topojson-client": "^3.0.0",
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-transform-runtime",
      "@babel/plugin-proposal-class-properties"
    ]
  },
  "scripts": {
    "start": "npm run client",
    "client": "webpack-dev-server --config ./webpack.config.js --mode development --host 0.0.0.0",
    "build": "webpack --mode production",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "webpack-dev-server": "^3.2.1"
  }
}

webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(png|jpg)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]'
          }
        }
      },
        {
        // Transform our own .css files with PostCSS and CSS-modules
        test: /\.css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader'],
      }, {
        // Do not transform vendor's CSS with CSS-modules
        // The point is that they remain in global scope.
        // Since we require these CSS files in our JS or CSS files,
        // they will be a part of our compilation either way.
        // So, no need for ExtractTextPlugin here.
        test: /\.css$/,
        include: /node_modules/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.html$/,
        use: ["html-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./public/index.html",
      filename: "./index.html"
    }),
    new webpack.DefinePlugin({
      'process.env': {
        SERVER_URL: JSON.stringify(process.env.SERVER_URL)
      },
    })
  ],
  externals: ["fs"],
  "output": {
    filename: '[name].[hash].js'
  }
};

docker

我在我的应用程序中有服务器和客户端部分，为了需要，我删除了服务器部分，所以我们在 services/client/中有用于客户端的 Dockerfile 和 docker-在主项目中编写文件。

Dockerfile - 客户端

# base image
FROM node:11.6.0-alpine

# set working directory
WORKDIR /usr/src/app/client

# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/client/app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /usr/src/app/client/package.json
RUN npm install --silent && \
npm install --silent webpack-dev-server

# start app
CMD ["npm", "start"]

docker-compose.yml - 主项目

version: '3.7'

services:

  client:
    container_name: client
    build:
      context: ./services/client
      dockerfile: Dockerfile
    volumes:
      - ./services/client:/usr/src/app/client
      - /usr/src/app/client/node_modules
    ports:
      - 8080:8080
    environment:
      - SERVER_URL=http://localhost:5001
    depends_on:
      - server

  nginx:
    container_name: nginx
    build:
      context: ./services/nginx
      dockerfile: Dockerfile
    restart: unless-stopped
    ports:
      - "80:80"
    depends_on:
      - client

我没有找到这么多东西，首先我认为我忘记了一些东西，比如一个模块，但它似乎不是那个。我需要帮助。

更新

实际上我正在尝试在本地进行测试，但我遇到了一个问题，也许它可以提供帮助。

在本地启动时出错(npm start)

internal/modules/cjs/loader.js:596
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
    at Function.Module._load (internal/modules/cjs/loader.js:520:25)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> ($path-to-project/services/client/node_modules/webpack-dev-server/bin/webpack-dev-server.js:77:1)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client@1.1.0 client: `webpack-dev-server --config ./webpack.config.js --mode development --host 0.0.0.0`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the client@1.1.0 client script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2019-04-24T14_05_19_879Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client@1.1.0 start: `npm run client`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the client@1.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2019-04-24T14_05_19_917Z-debug.log

更新2

我成功地在本地启动应用程序并且似乎可以正常工作。我已经删除了 node_modules/ 文件夹和 package-lock.json 并且我首先安装了 webpack 然后安装了 package.json.
即使它在本地工作，在 docker 上，它也不起作用。

Answer 1

您的 volumes: 声明导致了这一点。

如果您遇到这种情况，您可以运行:

docker-compose stop client
docker-compose rm client
docker-compose up --build

...但请注意，如果您没有有问题的 volumes: 声明，这正是您需要运行的命令集。

您的 docker-compose.yml 文件告诉 Docker:

volumes:
  # This directory contains data that needs to be injected from
  # and/or persisted to the host.  Hide anything that's in the
  # image and use this host directory instead.
  - ./services/client:/usr/src/app/client

  # This directory also contains data that needs to be persisted
  # across container runs.  Hide anything that's in the volume or
  # the previous bind mount and use data in this volume instead.
  # ONLY THE FIRST TIME this container gets run, copy data from
  # the image into this volume.
  - /usr/src/app/client/node_modules

您应该能够创建例程 Dockerfile 和 docker-compose.yml 文件来说明这一点。 npm init 一个简单的程序并运行它。例如，如果您运行 docker-compose run client sh，您将能够看到 node_modules 目录与当前构建环境中的内容相匹配。但是，如果您随后 yarn add 任何内容，即使您重建镜像，node_modules 卷也不会更新:您已经告诉 Docker 它包含持久数据，并且它只有在它为空时才会被填充。

(与此相反的推论是，如果您确实使用 docker-compose run 获得这样的 shell 并手动编辑 node_modules 目录中的内容，因为您已要求将该目录与图像分开保存，所以它将比此启动的临时容器更长寿。)

通常对我有用的工作流程是直接在主机上使用 Node 进行主动开发(以及实时重新加载和良好的 IDE 支持等等)，并使用 Docker(构建图像，而不是通过卷注入(inject)代码)用于生产部署。