docker - 在容器内使用 webpack 构建时缺少加载器

Question

我想构建我的节点 js 应用程序并在容器中运行它。这是我当前的 Dockerfile

FROM node:14

# Create app directory
WORKDIR /usr/src/app

COPY ./package*.json ./

RUN npm install


# Bundle app source
COPY ./app .

RUN npm run build

EXPOSE 3003
CMD [ "npm", "run", "start-aws" ]

在我的package.json文件中，我有：

"scripts": {
....
 "build": "rimraf dist && webpack --mode production",
...
}

在构建期间，我收到此错误：

You may need an appropriate loader to handle this file type, currently no loaders are 

configured to process this file. See https://webpack.js.org/concepts#loaders
|     }
|  
>     initRoutes = ()=>{
|       userRoutes(this.app, this.router);
|       cmsRoutes(this.app, this.router);

所以看起来 babel-loader 不起作用。当我在我的机器上本地运行它时，它工作正常。这是我的 webpack 配置：

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const extract = require("mini-css-extract-plugin");

module.exports = {
  entry: ['babel-polyfill', './app/src/index.js'],
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].js',
    //ecmaVersion: 5
  },
  target: 'node',
  node: {
    /// Need this when working with express, otherwise the build fails
    __dirname: false,   // if you don't put this is, __dirname
    __filename: false,  // and __filename return blank or /
  },
  externals: [nodeExternals()], // Need this to avoid error when working with Express
  module: {
    rules: [
      {
        // Transpiles ES6-8 into ES5
        test: /\.js$|jsx/,
        use: {
          loader: 'babel-loader',
          options: {
            babelrc: false,
            configFile: false,
            presets: [
              ['@babel/preset-env', {
                forceAllTransforms: true,
                modules: false,
                useBuiltIns: false,
                debug: false,
              }]
            ],
            plugins:[
              "@babel/plugin-transform-async-to-generator",
              "@babel/plugin-proposal-class-properties",
              "@babel/plugin-transform-destructuring",
              "@babel/plugin-proposal-object-rest-spread",
              "@babel/plugin-transform-runtime",
            ]
          }
        },
      },
      {
        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: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
      use: [{
          loader: 'url-loader',
          options: {
              limit: 8000, // Convert images < 8kb to base64 strings
              name: 'fonts/[name].[ext]'
          }
      }]
    },
      {
        test:/\.(sa|sc|c)ss$/,
        use: [
            {
                loader: extract.loader
            },
            {
                loader: 'css-loader'
            },
            {
                loader: 'sass-loader',
                options: {
                    implementation: require('sass')
                }
            }
        ]
    }
    ]
  },
  plugins: [
    new extract({
      filename: 'bundle.css'
  })
  ],
  devServer: {
    host: '0.0.0.0',
    disableHostCheck: true,
    watchOptions: {
      poll: true // Or you can set a value in milliseconds.
    }
  }
}

标签： dockerwebpackbabel-loader