webpack成神之路（四）

1. 现在我们有些基层模块依赖于一些全局变量，比如jquery.我们开始怎么设置全局变量.以jquery为例；

• 首先我们安装jquery;cnpm i jquery;
• 我们在a.js中引入jquery并打印，启动服务。在控制台可以看到jquery引入成功了；
  a.js

import $ from 'jquery';
console.log($)

image.png

• 但是我们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: '$'
    },

image.png

• 此时我们打包就可以看到打包后的文件要比刚才小了。说明jquery没有被打包进去

2. 打包图片方式有几种

js中引入图片
css中引入比如背景图
html 中img 直接引入

1. 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)

image.png

• 继续把a.js清空，我们通过css背景图中使用；我们在index.less中引入背景图片

  
  
  image.png

• 这里css-loader直接回转换url为对应的图片地址

  
  
  image.png

• 我们在html中直接引入

  
  
  image.png

• 我们打包后发现图片找不到，

  
  
  image.png

• 这里我们需要用到一个插件来处理 安装 cnpm i html-withimg-loader -D

• webpack.config.js

           {
                test: /\.html$/,
                use: 'html-withimg-loader'
            },

image.png

• 然后把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

• 然后我们试试吧大小写小一些

  
  
  image.png

• 再打包，可以看到图片没有被打包成base64

  
  
  image.png

3. 接下来我们把css img等在打包后进行分类，我们可以在'url-loader'下添加outputPath: 'img/',并打包

   
   
   image.png

• 可以看到图片被打包到了img目录下

• 我们要把css 也打包到css目录下也类似的在插件MiniCssExtractPlugin下配置filename就可以

  
  
  image.png

4. 我如果打包后的文件要放到cdn上，所有的资源都指向同一个域名，我们就可以在webpack.config.js中配置 publicPath;

• 比如

  
  
  image.png

• 打包后的文件都会自动加上publicPath了

  
  
  image.png

下一篇webpack成神之路（五）https://www.jianshu.com/p/086e97e114a2