webpack5 使用 AddAssetHtmlWebpackPlugin在html中自动引入该资源，运行构建后的代码，script标签多了一个目录auto

webpack.dll.js

/*
    使用dll技术，对某些库（第三方库：jquery、react、vue...）进行单独打包
        当你运行webpack时，默认查看 webpack.config.js配置文件
        需求：需要运行 webpack.dll.js文件
          -->  webpack --config webpack.dll.js
*/ 

const { resolve } = require('path');
const webpack = require('webpack')

module.exports = {
    entry:{
        // 最终打包生成的[name] -->jquery
        // ['jquery'] -->要打包的库是jquery
        jquery:['jquery']
    },
    output:{
        filename:'[name].js', 
        path:resolve(__dirname,'dll'),
        library:'[name]_[hash:8]' //打包的库里面向外面暴露出去的内容叫什么名字
    },
    plugins:[
        // 打包生成一个 manifest.json --> 提供和jquery映射
        new webpack.DllPlugin({
            name:'[name]_[hash:8]', //映射库的暴露的内容名称
            path:resolve(__dirname,'dll/manifest.json') //输出文件路径
        })
    ],
    mode:'production'
}

const { resolve } = require('path');
const HtmlWepbackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {

            }
        ]
    },
    plugins:[
        new HtmlWepbackPlugin({
            // template:'./src/index.html'
        }),
        // 告诉webpack那些库不参与打包，同时使用时的名称也得变~
        new webpack.DllReferencePlugin({
            manifest:resolve(__dirname,'dll/manifest.json')
        }),
        // 将某个文件打包输出去，并在html中自动引入该资源
        new AddAssetHtmlWebpackPlugin({
            // filepath:resolve(__dirname,'dll/jquery.js'),
            filepath:require.resolve('./dll/jquery.js'),
            outputPath: 'dll',
            attributes: {
                nomodule: false,
            },
            
        })
    ],
    mode:'production'
}

这个 publickPath:'./ 就是自动插入到HTML标签src的路径，要和自己配置输出的路径一致

webpack.dll.js

/*
    使用dll技术，对某些库（第三方库：jquery、react、vue...）进行单独打包
        当你运行webpack时，默认查看 webpack.config.js配置文件
        需求：需要运行 webpack.dll.js文件
          -->  webpack --config webpack.dll.js
*/ 

const { resolve } = require('path');
const webpack = require('webpack')

module.exports = {
    entry:{
        // 最终打包生成的[name] -->jquery
        // ['jquery'] -->要打包的库是jquery
        jquery:['jquery']
    },
    output:{
        filename:'[name].js', 
        path:resolve(__dirname,'dll'),
        library:'[name]_[hash]' //打包的库里面向外面暴露出去的内容叫什么名字
    },
    plugins:[   
        // 打包生成一个 manifest.json --> 提供和jquery映射
        new webpack.DllPlugin({
            name:'[name]_[hash]', //映射库的暴露的内容名称
            path:resolve(__dirname,'dll/manifest.json') //输出文件路径
        })
    ],
    mode:'production'
}

webpack.config.js

const { resolve } = require('path');
const HtmlWepbackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    module:{    
        rules:[
            {

            }
        ]
    },
    plugins:[
        new HtmlWepbackPlugin({
            // template:'./src/index.html'
        }),
        // 告诉webpack那些库不参与打包，同时使用时的名称也得变~
        new webpack.DllReferencePlugin({
            manifest:resolve(__dirname,'dll/manifest.json')
        }),
        // 将某个文件打包输出去，并在html中自动引入该资源
        new AddAssetHtmlWebpackPlugin({
            filepath:resolve(__dirname,'dll/jquery.js'),
            publicPath: './',
        })
    ],
    mode:'production'
}

自己已解决，publicPath: './',

// 将某个文件打包输出去，并在html中自动引入该资源
new AddAssetHtmlWebpackPlugin({
filepath:resolve(__dirname,'dll/jquery.js'),
publicPath: './',
})

你好，我是有问必答小助手，非常抱歉，本次您提出的有问必答问题，技术专家团超时未为您做出解答

本次提问扣除的有问必答次数，将会以问答VIP体验卡（1次有问必答机会、商城购买实体图书享受95折优惠）的形式为您补发到账户。

​​​​因为有问必答VIP体验卡有效期仅有1天，您在需要使用的时候【私信】联系我，我会为您补发。