Question

我正试图在react-boilerplate和this one等指南上放置一堆libs。

当我构建并运行时，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和复制部分它成为：

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导入

1 个答案: