Webpack dll 导入未定义答案

【问题标题】：Webpack dll import is not definedWebpack dll 导入未定义
【发布时间】：2017-04-18 15:35:27
【问题描述】：

我正在尝试按照 react-boilerplate 和 this one 等指南将一堆库放在 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。

【问题讨论】：

标签： node.js dll webpack webpack-dev-server

【解决方案1】：

结果我（显然）需要在我的脚本 src 中包含生成的 DLL 并在 dev 的情况下复制它，因为热重载只会提供它的条目及其依赖项，所以对于 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 上添加脚本。事后看来真的很明显

【讨论】：