import
webpack中是根据一个入口文件开始收集依赖。
import $ from ‘jquery‘
但是一个项目中通常有很多个地方都用到了jQuery，每个模块都要这样的一行代码
那么如何解决这个问题了。
webpack插件 ProvidePlugin
webpack内部有个插件，可以帮助到我们，（webpack自己的插件），用了这个插件，我们所有文件都不用再手动的导入了。
const webpack = require(‘webpack‘)
plugins: [ new webpack.ProvidePlugin({ $: ‘jquery‘ }), new HtmlWebpackPlugin() ]
webpack.ProvidePlugin 这个插件了需要传入一个对象作为参数，key表示变量名，value表示模块名。
缺点：这个$不能放在window上
expose-loader
module: {
rules: [
{
test: /\.css$/,
use: [‘style-loader‘, ‘css-loader‘]
},
{
test: /\.js$/,
use: {
loader: ‘babel-loader‘,
options: {
presets: [‘@babel/preset-env‘]
}
}
},
{
test: require.resolve(‘jquery‘),
use: {
loader: ‘expose-loader‘,
options: ‘$‘
}
}
]
},
require.resolve 表示在node_modules中查找模块的路径。
import $ from ‘jquery‘ 表示在node_modules引入这个模块。
引用的模块路径完全匹配，将使用loader来处理，所有你必须在入口文件中引用这个模块
options 表示模块的别名
只要引用一次就会暴露在全局上，通过（window.$看看）
除了入口文件引入一次，其他模块就不需要引入了。
CDN
一般我们会选择CDN引入文件，不想打包jQuery，那么如何处理呢？
加载CSN文件的loader
add-asset-html-cdn-webpack-plugin
使用
const path = require(‘path‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
const AddAssetHtmlCdnWebpackPlugin = require(‘add-asset-html-cdn-webpack-plugin‘);
module.exports = {
new AddAssetHtmlCdnWebpackPlugin(true, {
‘jquery‘: ‘http://code.jquery.com/jquery-git.min.js‘
})
]
};
引入了CDN就不要内置打包jQuery了
标识成外部文件，webpack配置增加一个这样的配置，添加这样的内容
externals: {
‘query‘: ‘$‘
}
key表示包名，value表示变量，就是忽略这样 import $ from ‘jquery‘ 这样的代码。
这就是webpack引入包的几种方式！