docker - 在容器内运行时如何修复 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 重新启动服务器。这行得通。

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

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

请注意，我并不是要让 webpack-dev-server 运行，它应该只监听 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-compose 条目

  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你排除了www在搜索 js 的 webpack 加载器中和 jsx文件。
Webpack 在完整文件路径而不是相对路径上执行正则表达式命令。

尝试删除 www来自 exlude属性，然后重试。