Docker 如何修复Webpack'；您可能需要适当的加载程序来处理此文件类型'；在容器内运行时？

问题：

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]

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

上下文：

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]

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

在当前情况下，我们在本地开发机器上运行deDocker compose并运行Webpack，build.js文件映射到容器中，nodemon重新启动服务器。这很有效

因为有时自由职业者/新团队成员加入此项目，所以他们的本地节点/npm版本在本地计算机上运行时可能会导致错误

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

请注意，我并没有试图让webpack dev服务器运行，它应该只侦听src文件中的更改并输出构建文件

尝试：

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]

• 更改容器的节点版本
• 已将节点模块更新至最新版本
• 在容器中全局安装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]

样板文件开发|./src/client.jsx 37:4中的错误
样板文件开发|模块解析失败：意外标记（37:4）
样板文件开发|您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。看见https://webpack.js.org/concepts#loaders
样板开发||
样板文件开发| | const Client=props=>(
样板文件开发|>
样板开发| |
样板开发| |
样板文件开发|@multi-whatwg-fetch-core-js/features/promise./src/client.jsx-js/bundle[2]

您的卷似乎映射到了

www

，您在搜索

js

和

jsx

文件的网页加载程序中排除了

www

。 Webpack在完整文件路径而不是相对路径上执行regex命令

尝试从

exlude

属性中删除

www

，然后重试