dll 对第三方库进行单独打包

需安装插件：add-asset-html-webpack-plugin

webpack.dll.js

/**
 * 使用过dll技术，对某些库（第三方库：jQuery，vue，react）进行单独打包
 * 当你运行webpack时 默认查找 webpack.config.js 配置文件
 * 需求：需要运行webpack.dll.js 文件
 *  -->  webpack --config webpack.dll.js
 */
const {resolve} = require('path')
const webapck = require('webpack')
const webpack = require('webpack')
module.exports = {
    entry:{
        //最终打包生成的[name] --> 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 HtmlWebpackPlugin = 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:[
            //loader的配置
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        //告诉webpack哪些库不参与打包，同时使用的名称也得改
        new webpack.DllReferencePlugin({
            manifest:resolve(__dirname,'dll/manifest.json')
        }),
        //将某个文件打包输出去，并在html中自动引入该资源
        new AddAssetHtmlWebpackPlugin({
            filepath:resolve(__dirname,'dll/jquery.js')
        })
    ],
    mode:'development'
}