信息
我有一个使用 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 上，它也不起作用。
最佳答案
您的 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)代码)用于生产部署。
关于javascript - 为什么我的应用程序在安装后找不到 "html-loader"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55831353/