Docker + Webpack (Dev Server) + Yarnpkg 不完整的构建

Posted 2023-03-08

技术标签:

【中文标题】Docker + Webpack (Dev Server) + Yarnpkg 不完整的构建【英文标题】：Docker + Webpack (Dev Server) + Yarnpkg incomplete builds 【发布时间】：2018-08-17 06:09:11 【问题描述】：

问题

将现在在本地运行的 webpack 项目转换为在 docker 容器中运行。这项工作在两个git 分支中进行：develop 和containers。

本地（无容器）

develop 是稳定的基础，它通过本地运行 $ yarn install && npm run dev 在package.json 中给出以下内容

"scripts": 
    "start": "node .",
    "env:dev": "cross-env NODE_ENV=development",
    "env:prod": "cross-env NODE_ENV=production",
    "predev": "npm run prebuild",
    "dev": "npm run env:dev -- webpack-dev-server",
//[...]

develop 分支确实包含yarn.lock，尽管 FWIW，$ rm yarn.lock && yarn install --force && npm run dev 确实正确启动了服务器，即GET http://localhost:3000 给了我主页，正如我所期望的那样。以上所有在$ git checkout containers之后都一样工作

码头工人

关闭本地开发服务器后，我运行$ git checkout containers，并且此分支不包含yarn.lock 或package.lock。然后我运行$ docker-compose up --build web（在单独的终端中，在包含docker-compose.yaml 中以下内容的同级目录中）

   web:
      build:
       context: ../frontend/
       dockerfile: Dockerfile
      env_file: ../frontend/.env
      volumes:
        - ../frontend/src:/code/src
      ports:
        - "3001:3000"
      depends_on:
        - api
      networks:
        - backend

服务web的frontend/Dockerfile是这样的

# Dockerfile

FROM node:latest
RUN mkdir /code
ADD . /code/
WORKDIR /code/
RUN yarn cache clean && yarn install --non-interactive --force && npm rebuild node-sass

CMD npm run dev --verbose

给定

#frontend/.dockerignore

node_modules
deploy
.circleci
stories
.storybook

一切似乎顺利，启动的最后一行是web_1 | Server is running at http://localhost:3000/. 然而，当我GET http://localhost:3001（注意docker-compose 中的端口映射）时，返回的页面在<head> 中不包含预期的<style>...</style> 标记，因为应该由@987654350 注入（据我所知） @，给定下面的配置

// https://github.com/diegohaz/arc/wiki/Webpack
const path = require('path')
const devServer = require('@webpack-blocks/dev-server2')
const splitVendor = require('webpack-blocks-split-vendor')
const happypack = require('webpack-blocks-happypack')
const serverSourceMap = require('webpack-blocks-server-source-map')
const nodeExternals = require('webpack-node-externals')
const AssetsByTypePlugin = require('webpack-assets-by-type-plugin')
const ChildConfigPlugin = require('webpack-child-config-plugin')
const SpawnPlugin = require('webpack-spawn-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

const 
  addPlugins, createConfig, entryPoint, env, setOutput,
  sourceMaps, defineConstants, webpack, group,
 = require('@webpack-blocks/webpack2')

const host = process.env.HOST || 'localhost'
const port = (+process.env.PORT + 1) || 3001
const sourceDir = process.env.SOURCE || 'src'
const publicPath = `/$process.env.PUBLIC_PATH || ''/`.replace('//', '/')
const sourcePath = path.join(process.cwd(), sourceDir)
const outputPath = path.join(process.cwd(), 'dist/public')
const assetsPath = path.join(process.cwd(), 'dist/assets.json')
const clientEntryPath = path.join(sourcePath, 'client.js')
const serverEntryPath = path.join(sourcePath, 'server.js')
const devDomain = `http://$host:$port/`

//[...]  
const sass = () => () => (
  module: 
    rules: [
      
        test: /\.(scss|sass)$/,
        use: [
             loader: 'style-loader' ,
             loader: 'css-loader' ,
             loader: 'sass-loader',
            ],
      ,
    ],
  ,
)

const extractSass = new ExtractTextPlugin(
  filename: 'style.css',
)

const prodSass = () => () => (
  module: 
    rules: [
       test: /\.(scss|sass)$/,
        use: extractSass.extract(
          use: [
             loader: 'css-loader', options:  minimize: true  ,
             loader: 'sass-loader' ,
          ],
          fallback: 'style-loader',
        ),
      ,
    ],
  ,
)

const babel = () => () => (
  module: 
    rules: [
       test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader' ,
    ],
  ,
)

const assets = () => () => (
  module: 
    rules: [
       test: /\.(png|jpe?g|svg|woff2?|ttf|eot)$/, loader: 'url-loader?limit=8000' ,
    ],
  ,
)

const resolveModules = modules => () => (
  resolve: 
    modules: [].concat(modules, ['node_modules']),
  ,
)

const base = () => group([
  setOutput(
    filename: '[name].js',
    path: outputPath,
    publicPath,
  ),
  defineConstants(
    'process.env.NODE_ENV': process.env.NODE_ENV,
    'process.env.PUBLIC_PATH': publicPath.replace(/\/$/, ''),
  ),
  addPlugins([
    new webpack.ProgressPlugin(),
    extractSass,
  ]),
  apiInsert(),
  happypack([
    babel(),
  ]),
  assets(),
  resolveModules(sourceDir),

  env('development', [
    setOutput(
      publicPath: devDomain,
    ),
    sass(),
  ]),

  env('production', [
    prodSass(),
  ]),
])

const server = createConfig([
  base(),
  entryPoint( server: serverEntryPath ),
  setOutput(
    filename: '../[name].js',
    libraryTarget: 'commonjs2',
  ),
  addPlugins([
    new webpack.BannerPlugin(
      banner: 'global.assets = require("./assets.json");',
      raw: true,
    ),
  ]),
  () => (
    target: 'node',
    externals: [nodeExternals()],
    stats: 'errors-only',
  ),

  env('development', [
    serverSourceMap(),
    addPlugins([
      new SpawnPlugin('npm', ['start']),
    ]),
    () => (
      watch: true,
    ),
  ]),
])

const client = createConfig([
  base(),
  entryPoint( client: clientEntryPath ),
  addPlugins([
    new AssetsByTypePlugin( path: assetsPath ),
    new ChildConfigPlugin(server),
  ]),

  env('development', [
    devServer(
      contentBase: 'public',
      stats: 'errors-only',
      historyApiFallback:  index: publicPath ,
      headers:  'Access-Control-Allow-Origin': '*' ,
      host,
      port,
    ),
    sourceMaps(),
    addPlugins([
      new webpack.NamedModulesPlugin(),
    ]),
  ]),

  env('production', [
    splitVendor(),
    addPlugins([
      new webpack.optimize.UglifyJsPlugin( compress:  warnings: false  ),
    ]),
  ]),
])

module.exports = client

有趣的是，将此行添加到package.json

 "dev-docker": "npm run predev && npm run env:dev -- webpack  --progress --watch --watch-poll",

并将 Dockerfile 的最后一行更改为 CMD npm run dev-docker 确实会产生预期的效果...

假设

我目前的怀疑是我遗漏了一些关于 webpack 开发服务器如何处理其加载程序输出的信息，并且没有正确映射某些端口，但这是在黑暗中的一枪。

或者，webpack-dev-server 版本是一个问题。本地是 4.4.2，其中 docker 显示 5.6.0，尽管这似乎不是问题，因为最新的文档与我自己的设置相匹配。我已经确认加载器模块的 package.json 规范是每个模块的最新稳定版。

道歉

认识到这是由多种技术以一种依赖于配置且必然具有特殊性的方式交叉导致的问题，我谦虚地请求您帮助解决这个依赖地狱。如果看起来我不明白某个给定的拼图是如何运作的，我很高兴听到它。任何想法、线索或建议，无论多么微不足道，都将不胜感激，并尽我所能加以利用。

【问题讨论】：

您的问题似乎是volumes: - ../frontend/src:/code/src，您正在用本地覆盖构建的数据。你可以删除它并尝试它是否有效？确实有道理，但删除该条目似乎没有任何效果 【参考方案1】：

这里很长，但我试图在 docker 容器中运行 grails-vue 应用程序，并且遇到了 webpack-dev-server 的端口映射未正确公开的问题。

我在 github https://github.com/webpack/webpack-dev-server/issues/547 上发现了这个问题，这导致我在 package.json 中的开发任务中添加了 --host 0.0.0.0，如下所示：

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0"

这解决了我的问题，也许这会帮助你找到答案。

【讨论】：

谢谢！这个问题让我在使用 Linux 时遇到了许多不同的情况。每当您处理 localhost 时，总是必须将托管 IP 设置为 0.0.0.0【参考方案2】：

已经有一段时间了，但回到这个问题，我找到了实际答案。

webpack-dev-server 使用两个端口。因此，在仅公开一个端口（3000）时，我没有得到构建文件，这些文件在client.js 和localhost:3001 中提供。线索一直在 JS 控制台中：GET localhost:3001/client.js 上的连接被拒绝错误。

解决方案是暴露容器上的两个端口，即 docker run -it -p 3000:3000 -p 3001:3001 --rm --entrypoint "npm run env:dev -- webpack-dev-server" $CONTAINER_REGISTRY/$IMAGE_NAME:$IMAGE_TAG

【讨论】：

【参考方案3】：

您本地安装的包可能与 docker 容器中的包不同。

为确保您安装了相同的软件包，您应该包含yarn.lock 和package.lock 文件。如果你只使用纱线yarn.lock 就足够了。即使这不能解决您的特定问题，它也可以阻止其他问题，因为现在您有了确定性构建。

【讨论】：

澄清一下，无论有没有锁定文件，行为都是相同的。那么它可能是 webpack-dev-server 版本。您应该确保所有内容都具有相同的版本号，以消除导致不同行为的原因。

以上是关于Docker + Webpack (Dev Server) + Yarnpkg 不完整的构建的主要内容，如果未能解决你的问题，请参考以下文章

如何检测webpack-dev-server是否正在运行？

webpack 之 webpack-dev-server

webpack-dev-server和webpack-dev-middleware的区别

在 Docker 容器中调试 webpack-dev-server 应用程序

Docker + Webpack (Dev Server) + Yarnpkg 不完整的构建

Webpack 编译但 webpack-dev-server 没有相同的配置