externals、Dll

lyz自学笔记

---

前言

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、externals

忽悠jQuery库，意思为打包的时候不打包jQuery库文件，那么jQuery就不能使用了，但是可以用个引入网络jQuery的方式引入jQuery

	  externals: {
	    // 拒绝jQuery被打包进来
	    jquery: 'jQuery'
	  }

二、Dll

对代码单独的打包
使用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 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')
	  },
	  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'
	};