javascript - 为什么我的应用在安装后没有找到“html-loader”?
问题描述
信息
我有一个运行的应用程序(reactjs)docker
,它使用 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
包.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'
}
};
码头工人
我在我的应用程序中有服务器和客户端部分,出于需要,我删除了服务器部分,因此我们Dockerfile
在 services/client/ 中有客户端,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 上,它也不起作用。
解决方案
您的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
了这样的外壳并在目录中手动编辑某些node_modules
内容,因为您已要求将该目录与图像分开保存,那么它将比临时容器寿命更长这会启动。)
通常对我有用的工作流程是直接在主机上使用 Node 进行主动开发(以及实时重新加载和良好的 IDE 支持等等),并使用 Docker(构建映像,而不是通过卷注入代码)进行生产部署.
推荐阅读
- angular - 在另一个 angular-cli(7)(库)项目中覆盖自定义 scss 变量
- plot - 如何在自相关图中扩展 y 轴范围?
- javascript - 如何在依赖外部依赖的 vue.js 中对组件进行单元测试?
- javascript - 无法正确填充 state 中的属性以在 FlatList 的 renderItem 中使用它
- python - Python 在列表上使用 len 时,如何解决 < 的 TypeError?
- javascript - 如何删除 youtube 视频的名称?
- django - 在 django SignupForm 注册方法没有被覆盖
- python - 单击页面按钮后如何防止 Django 表单被重置
- javascript - 使用反应实现页脚不停留在底部
- python - 尝试使用条目小部件启用按钮