add-asset-html-webpack-plugin 插件学习

https://github.com/SimenB/add-asset-html-webpack-plugin

Add a JavaScript or CSS asset to the HTML generated by html-webpack-plugin 添加JavaScript或CSS资源到html-webpack-plugin生成的HTML

NOTE: This plugin requires html-webpack-plugin@^2.10.0. 注意：此插件需要html-webpack-plugin@^2.10.0。

Basic Usage 基本的使用

The plugin will add 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. 插件会将给定的JS或CSS文件添加到Webpack知道的文件中，并将其放入html-webpack-plugin资源列表中注入生成的html。

Add the plugin the your config, providing it a filepath: 把你的配置添加到插件，提供一个文件路径：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js',
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') }),
  ],
};

This will add a script tag to the HTML generated by html-webpack-plugin, and look like: 这将为html-webpack-plugin生成的HTML添加一个script标签，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
    <script src="some-file.js"></script>
  </body>
</html>

NOTE: You can also pass an array of assets to be added. Same API as mentioned below, just pass multiple objects as an array. 注意：您还可以传递要添加的资源数组。相同的API，如下所述，只是传递多个对象作为一个数组。

new AddAssetHtmlPlugin([
  { filepath: require.resolve('./some-file') }, 
  { filepath: require.resolve('./some-other-file') },
]);

require.resolve('./some-other-file')  这里的 require.resolve是什么函数？

在Node.js中，可以使用require.resolve函数来查询某个模块文件的带有完整绝对路径的文件名，代码如下所示。 require.resolve('./testModule.js'); 在这行代码中，我们使用require.resolve函数来查询当前目录下testModule.js模块文件的带有完整绝对路径的模块文件名。注意：使用require.resolve函数查询模块文件名时并不会加载该模块。在REPL运行环境中输入“require.resolve('./testModule.js');”命令，查询当前目录下的testModule.js模块文件的完整文件名

Options   选项
Options are passed to the plugin during instantiation.
在实例化过程中，选项被传递给插件。
new AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') });

filepath
Type: string, mandatory
The absolute path of the file you want to add to the compilation, and resulting HTML file.
类型：string，必填项
您要添加到编译的文件的绝对路径，以及生成的HTML文件。

filter   过滤
Type: string|Array<string>, default `[]
Files that the assets will be added to.
By default the assets will be included in all files. If files are defined, the assets will only be included in specified file globs.
类型：string | Array <string>，默认`[]
资产将被添加到的文件。
默认情况下，资产将被包含在所有文件中。 如果定义了文件，资产将仅包含在指定的文件glob中。

hash
Type: boolean, default: false
If true, will append a unique hash of the file to the filename. This is useful for cache busting.
类型：boolean，default：false
如果为true，则会将（文件的唯一哈希）附加到文件名。 这对于缓存清除非常有用。

includeSourcemap
Type: boolean, default: true
If true, will add filepath + '.map' to the compilation as well.
类型：boolean，default：true
如果为true，那么将会将filepath +'.map'添加到编译中。

outputPath
Type: string
If set, will be used as the output directory of the file.
类型：字符串
如果设置，将被用作文件的输出目录。

publicPath
Type: string
If set, will be used as the public path of the script or link tag.
类型：字符串
如果设置，将被用作script或link标签的公共路径。

typeOfAsset
Type: string, default: js
Can be set to css to create a link-tag instead of a script-tag.
类型：string，default：js
可以设置为css来创建链接标签，而不是script标签。

Examples 举例

Add a DLL file from webpack.DllPlugin 从webpack.DllPlugin添加一个DLL文件

Note: Remember to build the DLL file in a separate build. 注意：请记住在单独的构建中构建DLL文件。

See example for an example of how to set it up. You can run it by cloning this repo, running yarn followed by yarn run example. 有关如何设置示例的示例。您可以通过克隆这个repo，运行yarn，然后运行yarn运行。

When adding assets, it's added to the start of the array, so when html-webpack-plugin injects the assets, it's before other assets. 当添加资源时，它被添加到数组的开头，所以当html-webpack-plugin注入资产时，它在其他资产之前。

If you depend on some order for the assets beyond that, and ordering the plugins doesn't cut it, you'll have to create a custom template and add the tags yourself. 如果您依赖某些order次序，除了这些资产之外，排序插件也不会停止，您必须自行创建自定义模板并添加标签。

Webpack config
const path = require('path');
const webpack = require('webpack');
const webpackConfig = {
  entry: {
    vendor: ['react', 'redux', 'react-router'],
  },
  devtool: '#source-map',
  output: {
    path: path.join(__dirname, 'build'),
    filename: '[name].dll.js',
    library: '[name]_[hash]',
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'build', '[name]-manifest.json'),
      name: '[name]_[hash]',
    }),
  ],
};

Your main build:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js',
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: path.join(__dirname),
      manifest: require('./build/vendor-manifest.json'),
    }),
    new HtmlWebpackPlugin(),
    new AddAssetHtmlPlugin({
      filepath: require.resolve('./build/vendor.dll.js'),
    }),
  ],
};

Christian-Yang / Translate-and-save

add-asset-html-webpack-plugin 插件学习 #32

Basic Usage 基本的使用

Examples 举例