webpack4学习之路-4

全局变量的引入

用jquery来举例，我们要在项目中使用JQ的$

cnpm i jquery

//js文件中
import $ from 'jquery'
console.log($,window.$)

由于我们使用import将JQ导入，所以webpack会将JQ和文件一起打包，导致JS文件过大，而且通过**window.$**访问不到 $

解决方案

1. expose-loader 将变量暴露到window上
2. providePlugin 给每一个模块提供一个$, 这种方法是在每一个页面注入jq，window. $访问不到
3. 将JQ在html中引入（CDN），webpack不打包JQ

1. expose-loader 将变量暴露到window上

fun1 内联loader

Tips： pre-前面执行的loader， normal-普通的loader，内联loader，post-后置loader

import $ from 'expose-loader?$!jquery'

console.log($, window.$);

fun2 写在webpack.config.js中

{
     test: require.resolve('jquery'),
     use: 'expose-loader?$'
},

2. providePlugin 给每一个模块提供一个$

const webpack = require('webpack')
plugins: [
    new webpack.ProvidePlugin({			//为每一个模块都注入$
        $: 'jquery'
    })
],

3. 将JQ在html中引入（CDN），webpack不打包JQ

我们在html引用了jquery，但是又在js文件中import了jq，这样做相当于无用功，反而增大了webpack打包后的大小（jq打包300k左右）

那么如果我们在html中引用了，也在js中引用了，该怎样不把包一起打包呢-externals
作为webpack.config.js的配置项之一

externals: {
        jquery: 'jQuery'
    },

图片处理

想要吧图片一起打包，要在相应的文件中进行引入

let img1 = require('./qweqwe.jpg')
或
import img1 from './qweqwe.jpg'

图片引入后，想要webpack打包需要引入loader

cnpm i -D file-loader

-webpack.config.js
{
    test: /\.(png|jpg|gif|jpeg)$/,
    use: {
        loader: 'file-loader'
        }
    }

他会将img打包到输出文件中
在我们的项目中有常见的三种引用图片的方式

1. 在js中创建图片来引入
2. 在css引入background：url(’’)
3. 在html中 <img src='' />

1. 在js中创建图片来引入

let img1 = require('./qweqwe.jpg')
console.log(img1);
// img1 是打包后的图片的filename
let img = new Image()
img.src = img1
document.body.appendChild(img)

这种情况，使用上述方法即可

2. 在css引入background：url(’’)

div {
    background: url('./qweqwe.jpg')
}

由于css-loader已经对url（）中的图片做了引入，所以这种情况直接使用上述方法即可

3. 在html中 <img src='' />

    <img src="./qweqwe.jpg" alt="">

由于打包后图片的filename发生了变化，但是html中的src依旧是代码中的样子，所以我们要让html中的文件路径跟着一起改动，这时候要用到一个插件html-withimg-loader

cnpm i -D html-withimg-loader

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

这样就可以实现我们想要的效果

进阶

并不是所有的图片都需要占用一个请求，有时候小图我们可以使用base64来存储，我们需要用到
url-loader来替换file-loader

    cnpm i -D url-loader

-webpack.config.js
{
    test: /\.(png|jpg|gif|jpeg)$/,
    use: {
        loader: 'url-loader',
        options: {
            limit: 1 * 1024,   //对文件大小做限制小于该值的使用base64
            //若是大于该值则传到输出文件中相应的位置
            outputPath: 'img/',
        }
    }
},

可以看到此时输出文件中图片放在了img中，我们的css文件html文件也想做这样的处理（文件分类）

修改filename即可


plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'html/index.html',
            minify: {
                // removeAttributeQuotes: true, //删除双引号
                // collapseWhitespace: true, //去掉空格和换行

            },
            hash: true //添加哈希戳，解决缓存问题，有更改时会产生新的文件，防止覆盖
        }),
        new MiniCss({
            filename: 'css/main.css',
        }),

    ],

接下来我们正常的项目开发中js，css等文件都是放到CDN服务器上的我们如何为他们加路径呢？
在output选项卡中可以添加publicPath

output: {
        filename: 'end.[hash:4].js',
        path: path.resolve(__dirname, 'out'),
        publicPath: 'http://localhost:3000/'//给所有的资源前面都加上公共路径
    },

若是只想给图片加CDN路径，在图片的loader配置中加publicPath即可

{
    test: /\.(png|jpg|gif|jpeg)$/,
    use: {
        loader: 'url-loader',
        options: {
            limit: 1,
            outputPath: 'img/',
            publicPath: 'http://localhost:3000/'
        }
    }
},