webpack-dll-bundles-plugin 插件学习

https://github.com/shlomiassaf/webpack-dll-bundles-plugin

A Webpack plugin for bundling group of packages as DLLs 一个用于将软件包组捆绑为DLL的Webpack插件

（把一组软件打包成为一个DLL文件）

Webpack Dll Bundle plugin

A Plugin for Webpack that uses Webpack's DllPlugin & DllReferencePlugin to create bundle configurations as part of the build process. The plugin will monitor for changes in packages and rebuild the bundles accordingly. Webpack的一个插件，使用Webpack的DllPlugin和DllReferencePlugin创建一个打包配置作为构建过程的一部分。该插件将监视软件包中的更改并相应地重新构建软件包。

Example:

const webpackMerge = require('webpack-merge'); // used to merge webpack configs
const commonConfig = require('./webpack.common.js'); // the settings that are common 

  new DllBundlesPlugin({
    bundles: {
      polyfills: [
        'core-js',
        'zone.js',
      ],
      vendor: [
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/core',
        '@angular/common',
        '@angular/forms',
        '@angular/http',
        '@angular/router',
        '@angularclass/hmr',
        'rxjs',
      ]
    },
    dllDir: './dll',
    webpackConfig: webpackMerge(commonConfig({env: ENV}), {
      devtool: 'cheap-module-source-map',
      plugins: [] // DllBundlesPlugin will set the DllPlugin here
【DllBundlesPlugin将会设置DllPlugin在这里】
    })
  })

上面的DllBundlesPlugin中的bundles,中有两个一个是polyfills，另外的一个是vendor,这个东西的意思是：DllBundlesPlugin插件将会把polyfills中的所有东西和vendor中的所有东西，都打包成为一个最终的DLL文件，这个DLL文件存放的目录是当前目录下的DLL目录。

webpackConfig Accepts a path (string), webpack config object or webpack config object factory. webpackConfig这个配置，接受一个path字符串，一个webpack config对象，一个webpack config 对象工厂。

DllBundlesPlugin will override the entry and add the DllPlugins requires. DllBundlesPlugin 插件将会覆盖entry并且添加DllPlugins插件的requires

DllBundlesPlugin will also add the DllReferencePlugin to the webpack configuration it is defined on. DllBundlesPlugin还将DllReferencePlugin添加到它定义的webpack配置中。

Referencing Dll files 引用Dll文件

Currently, the file name templates for dll's is locked, you can get a projected file name for a dll using the resolveFilefunction. 当前，dll文件的名字模板已经被锁定。你可以获取dll项目文件名字，使用resolveFile 函数。【这段话的意思就是，现在这个插件已经把生成的dll文件的名字给定死了，只能叫做'polyfills'和'vendor'，所以你只能使用这两个名字。】

  new AddAssetHtmlPlugin([
    { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) },
    { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) }
  ])

TODO

• Watch files/package.json for changes and rebuild 监视文件/ package.json以进行更改和重建 • Move package resolution to webpack (now using node require) 将包解析移动到webpack（现在使用node require） • Allow setting the template for file names. 允许设置文件名的模板。 • Documentation 文档

angular starter 中webpack.dev.js源代码：

new DllBundlesPlugin({
        bundles: {
          polyfills: [
            'core-js',
            {
              name: 'zone.js',
              path: 'zone.js/dist/zone.js'
            },
            {
              name: 'zone.js',
              path: 'zone.js/dist/long-stack-trace-zone.js'
            },
          ],
          vendor: [
            '@angular/platform-browser',
            '@angular/platform-browser-dynamic',
            '@angular/core',
            '@angular/common',
            '@angular/forms',
            '@angular/http',
            '@angular/router',
            '@angularclass/hmr',
            'rxjs',
          ]
        },
        dllDir: helpers.root('dll'),
        webpackConfig: webpackMergeDll(commonConfig({env: ENV}), {
          devtool: 'cheap-module-source-map',
          plugins: []
        })
      })

这两个插件是配合使用的。add-asset-html-webpack-plugin

 /**
       * Plugin: AddAssetHtmlPlugin
       * Description: Adds the given JS or CSS file to the files
       * Webpack knows about, and put it into the list of assets
       * html-webpack-plugin injects into the generated html.
       *
       * See: https://github.com/SimenB/add-asset-html-webpack-plugin
       */
      new AddAssetHtmlPlugin([
        { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) },
        { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) }
      ]),

Christian-Yang / Translate-and-save