携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情

上篇文章讲解了基础的功能，

下面开始讲 webpack打包css

q:webpack loader解决什么问题？

a:将除js文件以外的其他资源转换为js

1.创建index.css

2.在index.js中引用index.css

3.重新执行 npm run build 会报错

这个是因为 webpack只能打包js，不能打包css

这个时候需要使用loader将css转换成js代码

这里使用css-loader、style-loader，这里需要注意的地方是，loader是从左向右开始执行的

所以是style-loader在左，css-loader在右

首先安装下这两个包

yar add css-loader style-loader

然后配置webpack.config.js

const path = require('path')
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname,'./dist'),
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /.css$/,
                use: ['style-loader','css-loader']
            }
        ]
    }
}

在执行npm run build

打包css文件成功

打包后成功的js文件，可以看到引入了css文件

自定义Loader

功能：创建特殊的文件类型

首先在 src下创建 test.curry

然后在 test.curry下书写以下代码

<script>
    export default {
        a: 1
    }
</script>

在 src/index.js中引入 test.curry

import value from './test.curry'
console.log(value)

执行 npm run build后报错

这个时候需要编写loader来处理 .curry文件

在根目录创建loader文件夹

在loader文件夹创建curry-loader.js

1.首先写正则，来匹配test.curry中的 script标签

2.然后用 source 来匹配，返回的是个数组

3.数组的第2项就是 script 标签中的 js 代码

4.把数组中的第2项返回即可，就是可以执行的js代码

const REG = /<script>([\s\S]+?)</script>/;
module.exports = (source) => {
    const __source = source.match(REG)
    return __source && __source[1]? __source[1] : source;
}

// 判断当前模块是否为主模块，如果为主模块，则运行以下代码
// 用来对loader进行单独测试
if(require.main === module){
    const source = `
    <script>
    export default {
        a: 1
    }
</script>
    `;
    const match = source.match(REG)
}

最后在webpack.config.js中引入这个loader

{
                test: /.curry$/,
                use: [path.resolve(__dirname,'./loader/curry-loader.js')]
            }

最后使用 npm run build 进行打包

打包成功

看下打包后的文件

最后看下浏览器控制台的输出结果

内联式调用loader

import 'style-loader!css-loader!./index.css'

webpack-plugin

自定义Loader