图片 和 全局引入

全局变量的三种引入方式

• expose-loader 暴露在 window 上
• providePlugin 给每模块提供一$
• cnd 引入 不打包 需要配合 externals

//这里我们引入JQ , 在html  引入 cdn  在代码中 直接 impost $ from 'jquery'

module.exports = {
    mode: 'development', // 默认两种 production, development
    entry: './src/index.js', //入口
    externals:{
        jquery:'$'
    }
}

图片引入

1. 直接引入到 js 需要用到 file-loader | url-loader

• 作用 把图片引入加上
• 使用

 {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options:{
              limit:200*1024,
              // limit:1,  //这里  指定文件的最大大小（以字节为单位）
              outputPath:'img/', // 输出路径
              publicPath:'localhost/', // 拼接路径 打包之后的路径会拼上这里的 ， 但很多人这个都是 ‘/’  是因为 浏览器会默认拼接路径 而起服务的路径 和dist的路径是一样的 就成了 sdn了 就可以访问了
              encoding: false, //默认是  base64  指定将内联文件的编码。
              mimetype：false, //可以'image/png', 指定mimetype将与之内联的文件。如果未指定，mimetype则将从mime-types中使用该值
              fallback:'file-loader',// 指定当目标文件的大小超过限制时要使用的备用加载程序。
            }
          },
        ],
      },

2. css 引入 但是 我们用了 css-loader 所以本质是用了 require

// xx.css

body{
    backgroudn:url('./xxx.img') //这里会转化成 require('./xxx.img')
}

3. html 引入 这里需要引入 html-withimg-loader