- 现在我们有些基层模块依赖于一些全局变量，比如jquery.我们开始怎么设置全局变量.以jquery为例；
- 首先我们安装jquery;
cnpm i jquery; - 我们在a.js中引入jquery并打印，启动服务。在控制台可以看到jquery引入成功了；
a.js
import $ from 'jquery';
console.log($)
- 但是我们console.log(window.$)，却得到了undefined;
- 为了把jquery挂载到window下，我们需要expose-loader
- loader可以分为
pre 前面执行的loader
normal 普通loader
内联的loader
post 后置loader
- 现在我们在a.js中
import $ from 'expose-loader?$!jquery'; // 暴露jquery 为 $
console.log($)
console.log(window.$)
-
现在控制台打印成功了
image.png -
现在我们不用内联，配置到webpack中；
image.png a.js中直接import $ from 'jquery'；
控制台同样打印了window.jquery;
*再来我们不想再要用的js中引入jquery .我们想在每个模块中注入$对象，直接使用；
- 我们需要在webpack.config.js 中引入webpack插件；
我们引入
const Webpack = require('webpack');
module.exports = {
plugins: [
new Webpack.ProvidePlugin({
$: 'jquery'
})
]
}
-
然后我们在a.js中直接打印
，启动服务可以看到控制台直接打印了jquery；
image.png 此时
是undefined.如果想要window.$也存在，一样像方面在模块中配置expose-loader就行了
现在说一种情况，比如我们在index.html中通过script引入了jquery的cdn。然后我们在a.js中又import $ from 'jquery'; 此时打包后悔发现
jquery被打包到了打包后的js中，此时我们是不希望jquery被打包的。我们可以在webpack.config.js中配置externals选项；
externals:{
jquery: '$'
},
- 此时我们打包就可以看到打包后的文件要比刚才小了。说明jquery没有被打包进去
- 打包图片方式有几种
js中引入图片
css中引入比如背景图
html 中img 直接引入
-
js中；
image.png
-
启动服务可以看到 找不到图片
image.png - 此时'./img/1.jpg'就相当于是字符串，所以找不到。
- 那我就用import引入图片，并且需要file-loader解析(file-loader默认会在内部生成一张图片到build目录下，并且把生成图片的名字返回)；
- 安装
cnpm i file-loader --save-dev -
然后在wepback.config.js中配置
image.png - 然后在a.js中创建图片
import pic from './img/1.jpg';
let img = new Image();
img.src = pic;
document.body.appendChild(img)
-
继续把a.js清空，我们通过css背景图中使用；我们在index.less中引入背景图片
image.png -
这里css-loader直接回转换url为对应的图片地址
image.png -
我们在html中直接引入
image.png -
我们打包后发现图片找不到，
image.png 这里我们需要用到一个插件来处理 安装
cnpm i html-withimg-loader -Dwebpack.config.js
{
test: /\.html$/,
use: 'html-withimg-loader'
},
-
然后把img css js中图片都加上，打包看效果，可以看到都成功了
image.png
现在我们发现如果有些图片比较小，不想发起请求获取图片，直接通过base64打包到代码中，我们就需要一个url-loader 了
安装
cnpm i url-loader -D-
webpack.config.js中的file-loader换为url-loader
image.png 然后我们打包 可以看到图片被打包成base64 了
-
然后我们试试吧大小写小一些
image.png -
再打包，可以看到图片没有被打包成base64
image.png
-
接下来我们把css img等在打包后进行分类，我们可以在'url-loader'下添加outputPath: 'img/',并打包
image.png
- 可以看到图片被打包到了img目录下
-
我们要把css 也打包到css目录下也类似的在插件MiniCssExtractPlugin下配置filename就可以
image.png
- 我如果打包后的文件要放到cdn上，所有的资源都指向同一个域名，我们就可以在webpack.config.js中配置 publicPath;
-
比如
image.png -
打包后的文件都会自动加上publicPath了
image.png
