目标五：引入SCSS

安装

yarn add dart-sass@1.23.7 --dev
yarn add sass-loader@8.0.0 --dev

把之前src/x.css直接改成src/x.scss

body {
  background: grey;
}

src/x.js中的import也做更改

import scss from './x.scss'

进入webpack.config.base.js,添加module

module.exports = {
    ...
    module: {
            rules: [
                {
                    test: /\.s[ac]ss$/i,
                    use: [
                        'style-loader',
                        'css-loader',
                        {	
                            loader: 'sass-loader',
                            options: {
                                implementation: require('dart-sass'),
                            }
                        }
                    ],
                }
            ]
		}

yarn start之后，同样可以看见head中有一个style标签

目标六：引入LESS和Stylus

LESS

安装less

yarn add less-loader@5.0.0 --dev
yarn add less@3.10.3 --dev

src目录下创建y.less

@color:blue
body {
  background: @color;
}

src/x,js中将其引入

import less from './y.less'

在webpack.config.base.js中添加

module.exports = {
    ...
    module: {
            rules: [
                ...
                {
        		test: /\.less$/,
        		loader: ["style-loader", "css-loader", "less-loader"]
      			},
                ...
            ]
		}

Stylus

安装Stylus

yarn add stylus@0.54.7 --dev
yarn add stylus-loader@3.0.2 --dev

src中创建z.styl

c = grey;
body {
  background: c;
}

src/x,js中将其引入

import stylus from './z.stylus'

在webpack.config.base.js中添加

module.exports = {
    ...
    module: {
            rules: [
                ...
     			{
        		test: /\.styl$/,
        		loader: ["style-loader", "css-loader", "stylus-loader"]
      			},
                ...
            ]
		}

同样把它们yarn start之后，都能在head中看到相应的style标签

目标七：用webpack引入图片

安装

yarn add file-loader@5.0.2 --dev

在src/assets中加入一张图片2.png

进入src/index.js

//src/index.js
import x from './x.js'
import img from './assets/2.png'

const div = document.getElementById('app')
div.innerHTML = `
  <img src="${img}">
`

在webpack.config.base.js中添加

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

再次yarn start，OK，图片加载完成

目标八：使用懒加载

src目录下创建一个lazy.js，写入

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

并在src/index.js中写入

const button = document.createElement('button')
button.innerText ='懒加载'
button.onclick = ()=>{
  const promise = import('./lazy')
  promise.then((module)=>{
    const fn = module.default
    fn()
  }, ()=>{
    console.log('模块加载错误')
  })
}

div.appendChild(button)

结尾

代码仓库地址：PrayWang/webpack-demo: 浏览地址 (github.com)

webpack会因为各个加载器、插件的版本不同，使得yarn build出现错误，在学的时候老是被版本坑

记录一下能够成功yarn build的各加载器、插件的版本

"devDependencies": {
    "css-loader": "^3.2.0",
    "dart-sass": "^1.23.7",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.8.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.1",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  },