未定义 Webpack dll 导入

Question

等指南将一堆库放在 DLL 上

当我构建和运行时，DLL 文件被指定为未定义。我可能遗漏了一些东西我做了一个单独的 webpack 来构建 dll:

import webpack from 'webpack'
const library = '[name]'
export default {
  entry: {
    'lokka': ['lokka', 'lokka-transport-http', 'socket.io-client']
    /** Other libs **/
  },
  output: {
    filename: '[name].dll.js',
    path: 'build/',
    library: library
  },
  plugins: [
    new webpack.DllPlugin({
      path: 'build/[name]-manifest.json',
      name: library
    })
  ]
}

并添加了对 manifest.json

的引用

import webpack from 'webpack'
const desiredLibs = [
  'lokka'
]
const plugins = desiredLibs.map((lib) => {
  return new webpack.DllReferencePlugin({
    context: process.cwd(),
    manifest: require(`../build/${lib}-manifest.json`)
  })
})
export const dllReference = () => {
  return { plugins }
}
export default dllReference

还有什么我应该做的吗？

就我而言，当代码为运行时抱怨找不到 lokka。

Answer 1

原来我（显然）需要在我的脚本 src 中包含生成的 DLL 并在开发的情况下复制它，因为热重载只会服务于它的条目及其依赖项，因此对于 dllReference 和复制部分变成了：

import webpack from 'webpack'
import CopyWebpackPlugin from 'copy-webpack-plugin'
import path from 'path'

const desiredLibs = ['lokka', 'react', 'moment']
const copies = []
const plugins = desiredLibs.map((lib) => {
  copies.push({
    from: path.join(__dirname, `../compileResources/${lib}.dll.js`),
    to: `dll`
  })
  return new webpack.DllReferencePlugin({
    context: process.cwd(),
    manifest: require(`../compileResources/${lib}-manifest.json`)
  })
})
plugins.push(
  new CopyWebpackPlugin(copies)
)
/**
* Adds the dll references and copies the file
*/
export const dllReference = () => {
  return { plugins }
}
export default dllReference

然后因为我使用复制插件复制了 dll，所以我需要在 html 上添加脚本。事后看来真的很明显

未定义 Webpack dll 导入

Webpack dll import is not defined

dll

node.js

webpack

webpack-dev-server