I'm using webpack and docker to run my web app. It's working fine when I run "npm start" but not when I run with 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.

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

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

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

{
  "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

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 . . in Dockerfile and still not working

CodePudding user response：

My mistake. I should put COPY . . instead of COPY ..