webpack学习---优化--单独打包第三方库

单独打包第三方库  需要npm下载 add-asset-html-webpack-plugin 

　　引入webpack(不需要下载),引入add-asset-html-webpack-plugin(需要下载)

 

                使用dll技术，对某些库（第三方库：jquery、react、vue...）进行单独打包

                    当你运行 webpack 时，默认查找 webpack.config.js 配置文件

                    需求：需要运行 webpack.dll.js 文件

                    --> webpack --config webpack.dll.js

　　　

        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文件  引入两个包,一个webpack一个add-asset-html-webpack-plugin

                const { resolve } = require('path');
                const HtmlWebpackPlugin = require('html-webpack-plugin');

                //引入自带包
                const webpack = require('webpack');

                //引入AddAssetHtmlWebpackPlugin
                const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');

                module.exports = {
                entry: './src/index.js',
                output: {
                    filename: 'built.js',
                    path: resolve(__dirname, 'build')
                },
                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: 'production'
                };