如何在容器内运行时修复 Webpack 'You may need an appropriate loader to handle this file type'？

Question

问题：

问题是当我们在 docker 容器中启动 Webpack 时，它无法找到“babel-loader”来解析 jsx，即使我们在容器中安装了节点模块。

上下文：

我有一个 docker-compose 设置，其中我有一组容器，包括一个网站，我在其中运行 Express 呈现一个 React 网站。

在目前的情况下，我们在本地开发机器上运行 de docker-compose 和运行 Webpack 并且 build.js 文件被映射到容器和 nodemon重新启动服务器。 这有效。

因为有时 freelancers/new 团队成员加入这个项目，他们的本地 node/npm 版本可能会导致在本地机器上运行ning 时出现错误。

这就是为什么我们要启动一个开发容器，在其中我们运行 Webpack 并将构建文件映射回本地计算机和网站容器。

请注意，我并不是在尝试使用 webpack-dev-server 运行ning，它应该只是监听 src 文件中的更改并输出构建文件。

尝试次数：

更改容器的节点版本
已将节点模块更新到最新版本
在容器中全局安装webpack/babel

Dockerfile-dev

###############################################################################
# Step 1 : Create a base image
#
FROM node:12.6 as base
WORKDIR /var/www

###############################################################################
# Step 2 : Create all files needed to run the app
#
FROM base as builder
ARG SSH_KEY

COPY ./ /var/www

RUN mkdir /root/.ssh/
RUN echo "$SSH_KEY" > /root/.ssh/id_rsa
RUN chmod 600 /root/.ssh/id_rsa

RUN ssh-keyscan gitlab.com > /root/.ssh/known_hosts

# configure the npm env
RUN npm set progress=false
RUN npm i --no-optional

###############################################################################
# Step 3 : Final image to export
#
FROM base

# Copy files from the build step
COPY --from=builder /var/www/ /var/www

CMD [ "npm", "run", "dev" ]

Docker-撰写条目

  develop:
    build:
      context: './site'
      dockerfile: Dockerfile-dev
    image: 'boilerplate-develop'
    container_name: 'boilerplate-develop'
    env_file:
      - ./config/local/.env
    restart: 'unless-stopped'
    volumes:
      - ./site/src:/var/www/src

webpack.config.js

const path = require('path')
const nodeExternals = require('webpack-node-externals')
const {resolve, loaders, plugins,} = require('./webpack/common.config')

const PROD = process.argv.indexOf(`-p`) > 0

const getModule = type => ({
    rules: [
        {
            test: /\.js|jsx?$/,
            exclude: /(node_modules|bower_components|www\/)/,
            use: {
                loader: `babel-loader`,
                options: {
                    babelrc: false,
                    configFile: false,
                    presets: [
                        [
                          '@babel/preset-env',
                          {
                            forceAllTransforms: PROD,
                            modules: false,
                            useBuiltIns: false,
                            debug: false,
                          },
                        ],
                        ['@babel/preset-react', { development: !PROD }],
                    ],
                    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",
                        ...(!PROD ? [] : ['@babel/transform-react-inline-elements']),
                        ...(!PROD ? [] : ['transform-react-remove-prop-types']),
                        [
                            "module-resolver",
                            {
                                "alias": {
                                    "_scrollPercentage": [
                                        "./src/components/vendor/react-scroll-percentage/react-scroll-percentage.esm.js"
                                    ],
                                    "_components": ["./src/components/components.js"],
                                    "_actionTypes": ["./src/redux/actionTypes.js"],
                                    "_routes": ["./src/components/views/routes.js"],
                                    "_utils": ["./src/utils/utils.js"],
                                    "_view": ["./src/components/views/View.jsx"]
                                }
                            }
                        ]
                    ]
                }
            },
        },
        ...loaders[type],
    ],
})

const client = {
    entry: {
        "js/bundle": [`whatwg-fetch`, `core-js/features/promise`, `./src/client.jsx`,],
        "js/intro": `./src/intro.js`,
        serviceWorker: `./src/service-worker.js`,
    },
    output: {
        path: path.join(__dirname, `src`, `static`),
        filename: PROD ? `[name].[chunkhash].min.js` : `[name].js`,
    },
    resolve,
    module: getModule(`client`),
    plugins: plugins.client,
    stats: 'verbose'
}

const server = {
    target: `node`,
    node: {
        __dirname: false,
    },
    externals: [
        nodeExternals({
            modulesFromFile: true,
        }),
    ],
    entry: {
        js: `./src/server.js`,
    },
    output: {
        path: path.join(__dirname, `src/server/build`),
        filename: PROD ? `server.min.js` : `server.js`,
        libraryTarget: `commonjs2`,
    },
    resolve,
    module: getModule(`client`),
    plugins: plugins.server,
}

module.exports = [client, server,]

错误：

boilerplate-develop |     ERROR in ./src/client.jsx 37:4
boilerplate-develop |     Module parse failed: Unexpected token (37:4)
boilerplate-develop |     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
boilerplate-develop |     |
boilerplate-develop |     | const Client = props => (
boilerplate-develop |     >     <Provider store={store}>
boilerplate-develop |     |         <Router history={history}>
boilerplate-develop |     |             <App {...props} history={history} />
boilerplate-develop |      @ multi whatwg-fetch core-js/features/promise ./src/client.jsx js/bundle[2]

Answer 1

您的卷似乎已映射到 www，并且您在搜索 js 和 jsx 文件的 webpack 加载程序中排除了 www。 Webpack 在完整文件路径而非相对路径上执行正则表达式命令。

尝试从 exlude 属性中删除 www，然后重试。

如何在容器内 运行 时修复 Webpack 'You may need an appropriate loader to handle this file type'？

How to fix Webpack 'You may need an appropriate loader to handle this file type' when running inside a container?

jsx

docker

webpack

docker-compose

babel-loader

如何在容器内运行时修复 Webpack 'You may need an appropriate loader to handle this file type'？