[英]webpack config not found when running docker
I'm using webpack and docker to run my web app.我正在使用 webpack 和 docker 运行我的 web 应用程序。 It's working fine when I run "npm start" but not when I run with docker.
当我运行“npm start”时它工作正常,但当我使用 docker 运行时却不行。
Below are the error that I received以下是我收到的错误
> webpack-dev-server --open --progress --config webpack.dev.js && npm run build:css -- -w
[webpack-cli] Failed to load '/usr/src/webpack.dev.js' config
[webpack-cli] Error: Cannot find module '/usr/src/webpack.dev.js'
Require stack:
- /usr/src/node_modules/webpack-cli/lib/webpack-cli.js
- /usr/src/node_modules/webpack-cli/lib/bootstrap.js
- /usr/src/node_modules/webpack-cli/bin/cli.js
- /usr/src/node_modules/webpack-dev-server/bin/webpack-dev-server.js
at Module._resolveFilename (node:internal/modules/cjs/loader:955:15)
at Module._load (node:internal/modules/cjs/loader:803:27)
at Module.require (node:internal/modules/cjs/loader:1021:19)
at require (node:internal/modules/cjs/helpers:103:18)
at WebpackCLI.tryRequireThenImport (/usr/src/node_modules/webpack-cli/lib/webpack-cli.js:204:22)
at loadConfigByPath (/usr/src/node_modules/webpack-cli/lib/webpack-cli.js:1404:38)
at /usr/src/node_modules/webpack-cli/lib/webpack-cli.js:1454:88
at Array.map (<anonymous>)
at WebpackCLI.loadConfig (/usr/src/node_modules/webpack-cli/lib/webpack-cli.js:1454:68)
at WebpackCLI.createCompiler (/usr/src/node_modules/webpack-cli/lib/webpack-cli.js:1785:33) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/usr/src/node_modules/webpack-cli/lib/webpack-cli.js',
'/usr/src/node_modules/webpack-cli/lib/bootstrap.js',
'/usr/src/node_modules/webpack-cli/bin/cli.js',
'/usr/src/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
]
}
For the webpack, I split the webpack config into 3 files and the code like below.对于 webpack,我将 webpack 配置拆分为 3 个文件,代码如下所示。
1. webpack.common.js 1. webpack.common.js
const path = require('path');
const webpack = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const pkg = require('./package.json');
const name = pkg.name;
module.exports = {
entry: './src',
output: {
filename: `./dist/${name}.min.js`,
library: name,
libraryTarget: 'umd',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.(png|jp(e*)g|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8000, // Convert images < 8kb to base64 strings
name: 'images/[hash]-[name].[ext]'
}
}]
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
},
devServer: {
host: '0.0.0.0'
},
externals: { 'grapesjs': 'grapesjs' },
plugins: [
new CopyWebpackPlugin({
patterns: [
{ from: './src/assets', to: 'assets' }
]
}),
new HTMLWebpackPlugin({
template: path.resolve(__dirname, 'index.html')
}),
new webpack.HotModuleReplacementPlugin(),
]
};
2. webpack.dev.js 2. webpack.dev.js
const path = require("path");
const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
module.exports = merge(common, {
mode: "development",
devtool: "cheap-source-map",
devServer: {
static: {
directory: path.join(__dirname, "public"),
},
historyApiFallback: true,
},
});
3. webpack.prod.js 3. webpack.prod.js
const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
module.exports = merge(common, {
mode: "production",
});
For my package.json and dockerfile, code are like below对于我的 package.json 和 dockerfile,代码如下
package.json package.json
{
"name": "berry",
"version": "1.0.0",
"description": "maxis ecom web builder",
"scripts": {
"build": "webpack --config webpack.prod.js && npm run build:css",
"start": "webpack-dev-server --open --progress --config webpack.dev.js && npm run build:css -- -w",
"build:css": "node-sass src/style/main.scss dist/styles.min.css --output-style compressed",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.2.5",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"node-sass": "^7.0.1",
"sass-loader": "^13.0.2",
"style-loader": "^3.3.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.10.0",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"grapesjs-aviary": "^0.1.2",
"grapesjs-blocks-basic": "^0.1.8",
"grapesjs-component-countdown": "^0.1.3",
"grapesjs-navbar": "^0.1.5",
"grapesjs-plugin-export": "^1.0.11",
"grapesjs-plugin-filestack": "^0.1.1",
"grapesjs-plugin-forms": "^2.0.1",
"grapesjs-preset-webpage": "^0.1.11"
},
"peerDependencies": {
"grapesjs": "0.x"
}
}
Dockerfile Dockerfile
FROM node:latest
# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src
# add `/usr/src/node_modules/.bin` to $PATH
ENV PATH /usr/src/node_modules/.bin:$PATH
# install and cache app dependencies
ADD package.json /usr/src/package.json
RUN npm install
# start app
CMD ["npm", "start"]
Need help and assistance to fix this.需要帮助和帮助来解决这个问题。 I even add COPY.
我什至添加了COPY。 .
. in Dockerfile and still not working
在 Dockerfile 中仍然无法正常工作
My mistake.我的错。 I should put COPY.
我应该把COPY。 .
. instead of COPY..
而不是复制..
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.