未定义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，并在dev的情况下复制它，因为热重新加载只为它的条目和它的依赖项服务，因此对于dllReference和copy部分，它变成了：

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上添加脚本。事后看来真的很明显