webpack学习

1. 前端打包究竟是什么 www.jianshu.com/p/cf93dfc2f…
2. JavaScript 模块化入门 Ⅱ：模块打包构建 www.freecodecamp.org/chinese/new…
3. cssLoader
4. style-loader
5. less-loader
6. browserslist
7. 一文搞懂什么是 PostCSS blog.csdn.net/qq_43742385…
8. css-loader www.npmdoc.org/css-loaderz…
9. file-loader 打包图片

• 使用require 导入图片，此时如果不配置 esModule：false，则需要.default 导出

//xx.webpack.js
...
    rules: [
        ...
         {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            use: ['file-loader']
        }
    ]
...

//image.js

function packImg () {
    const oEle = document.createElement('div')
    const oImg = document.createElement('img')
    oImg.width = 600
    oImg.src = require('../img/2.jpg').default

    oEle.appendChild(oImg)

    return oEle
}

window.addEventListener('load', function () {
    document.body.appendChild(packImg())
})

• 也可以在配置当中设置 esModule：false

//xx.webpack.js
...
    rules: [
        ...
         {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            use: [
                     {
                         loader: 'file-loader',
                         options: {
                             esModule: false //flase 不转为 esModule
                         }
                     }
                ]
        }
    ]
...

//image.js

function packImg () {
    const oEle = document.createElement('div')
    const oImg = document.createElement('img')
    oImg.width = 600
    oImg.src = require('../img/2.jpg')

    oEle.appendChild(oImg)

    return oEle
}

window.addEventListener('load', function () {
    document.body.appendChild(packImg())
})

• 采用 import from 图片资源，此时可以直接使用 xxx

    //xx.webpack.js
    ...
        rules: [
            ...
             {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: ['file-loader']
            }
        ]
    ...

    //image.js
    
    import oImgSrc from '../img/2.jpg'
    
    function packImg () {
        const oEle = document.createElement('div')
        const oImg = document.createElement('img')
        oImg.width = 600
        oImg.src = oImgSrc

        oEle.appendChild(oImg)

        return oEle
    }

    window.addEventListener('load', function () {
        document.body.appendChild(packImg())
    })

10. url-loader
11. asset处理图片 asset module type

• asset/resource --> file-loader （输出路径）

{
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                type: 'asset/resource',
                generator: {
                    filename: "img/[name].[hash:4][ext]"
                }
            },

• asset/inline --> url-loader （所有资源 data uri base64格式资源）

{
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                type: 'asset/inline',
            }

• asset/source --> raw-loader 不常用的loader
• asset 配置文件大小的限制（类似于 url-loader 的 limit）

{
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                type: 'asset',
                generator: {
                    filename: "img/[name].[hash:4][ext]"
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 70 * 1024
                    }
                }
            }