Question

我有一个使用bower和gulp构建的angularjs应用程序，我决定迁移到webpack。我把我的所有代码都移到ES6上了，我把它用于一个开发webpack配置而没有任何问题：包括源映射，而不是uglifying，而不是缩小...

现在我想生成该配置的新版本，其中包含典型的生产任务。总的来说，我希望能够生成两个捆绑包：一个用于供应商和我的应用程序代码。

const pkg = require('../package.json');
// ...
new ExtractTextPlugin('index-[contenthash].css'),
    new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: () => [autoprefixer]
      }
    })
  ],
  output: {
    path: path.join(process.cwd(), conf.paths.dist),
    filename: '[name]-[hash].js'
  },
  entry: {
    app: `./${conf.path.src('index')}`,
    vendor: Object.keys(pkg.dependencies)
  }

当我对新供应商条目文件和公共chunck插件进行更改时，编译失败并出现以下错误：

ERROR in multi angular angular-aria angular-bootstrap... // all package.json depedencies
Module not found: Error: Can't resolve 'angular-consent' in 'path/to/my/project'

此错误会多次记录，然后记录另一个错误：

ERROR in ./~/swagger-ui/dist/swagger-ui.js
Module not found: Error: Can't resolve 'b'
ERROR in ./~/modernizr/lib/options.js
Module not found: Error: Can't resolve 'fs'
// more of the same pattern

我错过了什么？我是否有依赖性破坏供应商捆绑包？

版本： angular：1.5.8，webpack：2.7.0。 操作系统：Windows 10和OSX El Capitan

Answer 1

问题在于我在我的依赖包中声明的某些包.json：angular-consent和font-awesome。这里很好地涵盖了他们不需要被包括的原因Error including font-awesome with webpack。

就我而言：

const excludeDeps= ['angular-consent', 'font-awesome'];

  entry: {
    app: `./${conf.path.src('index')}`,
    vendor: Object.keys(pkg.dependencies).filter(name => (excludeDeps.indexOf(name) === -1))
  }

生成dist bundle时Webpack编译失败

1 个答案: