HMVue1.3【webpack中的loader】

1、loader概述

2、loader调用过程

3、打包处理css文件

4、打包处理less文件

index1.js保存后，dos如下

5、打包处理样式表中与url路径相关的文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./logo.jpg">
    <img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAeAB4AAD/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCAASABQDASIAAhEBAxEB/8QAGQABAAMBAQAAAAAAAAAAAAAAAAMEBQIG/8QAJhAAAgICAgEBCQAAAAAAAAAAAQIAAwQRBSExBhITFCIjMkFRYf/EABgBAAIDAAAAAAAAAAAAAAAAAAQFAQID/8QAHREAAgMAAgMAAAAAAAAAAAAAAAECAxEEMRIyM//aAAwDAQACEQMRAD8ArcZwXtoMhGpINnulF7eW0D11/ZfxbGsutw8mlPl3sEb0QdESDE5tMTjhRS1RuFxsDsFYKNAdb/PUp05DPmF1tJZlYsQ3kkiAybeN9jiEUtSzCPkPT9nxROGv0mG9E/af1E6yeXai41h3Ygd6Y9GJvGVudAs66PJ6zEoZluUqSDvyDNzMZlw2ZWIOvIMRIv8AdFuJ85Hn/MRELFx//9k=">
</body>
</html>

小图片如logo等：用方式2好，base64可以减少一些不必要的请求（方式1：浏览器渲染完页面html代码后需要发起请求来获取图片）

不建议将大图片如轮播图等转为base64，因为转码后占地稍微增大

6、打包处理js文件中的高级语法

What is Babel? · Babel (babeljs.io)

module.exports = {
    //声明babel可用的插件
    // 将来，webpack 在调用 babel-loader 的时候，会先加载 plugins 插件来使用
    plugins: [
        [
            //属于是插件的插件，webpack中babel插件，babel中plugin-proposal-decorators插件
            '@babel/plugin-proposal-decorators', 
            {legacy: true}
        ]
    ]
}

View Code