为什么安装后我的应用程序找不到“ html-loader”？

时间：2019-04-24 13:33:47

标签： javascript docker webpack

信息

我有一个运行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

我的应用程序中有服务器和客户端部分，有需要的话，我删除了服务器部分，因此我们在服务/ client /中有Dockerfile用于客户端，在主目录中有docker-compose文件项目。

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上工作。

1 个答案:

答案 0 :(得分：2)

您的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（构建映像，而不是通过卷注入代码）用于生产部署。

相关问题
最新问题