续《乘风破浪学webpack》

用一张图总结上篇webpack的内容：

代码仓库地址：

一、loader和plugin区别

翻译：loader是加载器，plugin是插件
中文解释：加载器就是用来加载文件的，
比如JS loader是用来加载JS的，把高级的JS转译成低版本的JS
CSS loader就是用来加载CSS的
插件是用来加强webpack功能的，比如HTMLWebpackPlugin是用来加载HTML的，miniCssExtractPlugin可以把多个CSS文件合并成一个CSS文件总的来说，加载器主要用来加载文件，而插件的功能更加丰富

目标七：用webpack加载scss

首先安装

yarn add --dev dart-sass
yarn add --dev sass-loader

配置：需要注意的是style-loader, css-loader, sass-loader的顺序不能错，否则会报错

sass-loader负责把sass编译成css, css-loader负责把css变成js, style-loader负责从js字符串生成style标签

module: {
        rules: [
            {
                test: /.s[ac]ss$/i,
                use: [
                  // Creates `style` nodes from JS strings
                    'style-loader',
                   // Translates CSS into CommonJS
                    'css-loader',
                    {	
                      // Compiles Sass to CSS
                        loader: 'sass-loader',
                        options: {
                            implementation: require('dart-sass'),
                        }
                    }
                ],
            }
        ]

目标八：用webpack加载less和stylus

安装：

yarn add --dev less-loader
yarn add --dev less

配置

module.exports = {
  module: {
    rules: [
       {
           test: /.less$/,
           loader: ['style-loader', 'css-loader', 'less-loader'] // compiles Less to CSS
       },
    ],
  },
};

安装：

yarn add --dev stylus stylus-loader

配置

module.exports = {
  module: {
    rules: [
       {
           test: /.styl$/,
           loader: ['style-loader', 'css-loader', 'stylus-loader'] // compiles stylus to CSS
       },
    ],
  },
};

目标九：用webpack加载图片

之前我们引入图片需要使用img标签

<img src='../..1.png'>

那么应该如何用webpack加载图片呢？

使用方法：用file-loader

参考官方文档：webpack.js.org/guides/asse…

首先需要安装

yarn add --dev file-loader

然后需要配置

webpack.config.js

module.exports = {
  module: {
    rules: [
       {
            test: /.(png|svg|jpg|gif)$/,
            use: ['file-loader',]
       },
    ],
  },
};

然后在Index.js里写：

注意创建一个新的图片标签是

document.createElement('img') 是img!!!不是image!!!

或者用new Image()

import css2 from './y.styl'
import image1 from './assets/cat.jpg'

const div = document.querySelector("#app")  // 选中一个已经在index.html里的div元素
const myimage = new Image() 创建一个新的
myimage.src = image1
div.appendChild(myimage)

然后再 yarn start 就可以在生成的页面里看到图片了

目标十：用webpack懒加载

怎么实现一个懒加载

用import 括号里面写加载的文件
然后会得到一个promise

promise.then()有两个函数，第一个函数里写如果执行成功做什么，第二个函数写如果执行失败做什么

举例：

首先我们准备一个lazy.js:

export default function lazy(){
    console.log('我是一个懒加载的模块')
}

然后在index.js里写：

button.onclick = ()=>{
    const promise = import('./lazy')
    promise.then((module)=>{
        let fn = module.default
        fn()
        // 也可以直接 module.default()
    }, ()=>{
        console.log('加载失败')
    })
}

下面的图片记录了当我们点击 ‘懒加载’按钮之后网络请求和控制台的变化

本文为fjl的原创文章，著作权归本人和饥人谷所有，转载务必注明来源

《乘风破浪学webpack(二)》