准备工作

• 装置 Node.js, 发起装置LTS历久支撑版本
• mkdir webpack and cd webpack and npm init -y
• npm i webpack webpack-cli --save-dev

loader是什么

所谓 loader 只是一个导出为函数的 JavaScript 模块。loader runner 会挪用这个函数，然后把上一个 loader 发生的效果或许资本文件(resource file)传入进去。函数的 this 上下文将由 webpack 添补，而且 loader runner 具有一些有效要领，能够使 loader 改变成异步挪用体式格局，或许猎取 query 参数。

第一个 loader 的传入参数只要一个：资本文件(resource file)的内容。compiler 须要获得末了一个 loader 发生的处置惩罚效果。这个处置惩罚效果应该是 String 或许 Buffer（被转换为一个 string），代表了模块的 JavaScript 源码。别的还能够通报一个可选的 SourceMap 效果（花样为 JSON 对象）。

如果是单个处置惩罚效果，能够在同步情势中直接返回。如果有多个处置惩罚效果，则必需挪用 this.callback()。在异步情势中，必需挪用 this.async()，来指导 loader runner 守候异步效果，它会返回 this.callback() 回调函数，随后 loader 必需返回 undefined 而且挪用该回调函数。

loader干了些什么

webpack loader对js代码、款式、图片等资本从新编译返回一个抱负的效果，实质上说，loader是一些特别的webpack插件，固然webpack自身有plugin的观点。默许情况下，资本文件会被转化为 UTF-8 字符串，然后传给 loader。经由历程设置 raw，loader 能够吸收原始的 Buffer。每个 loader 都能够用 String 或许 Buffer 的情势通报它的处置惩罚效果。Complier 将会把它们在 loader 之间互相转换。loader 老是从右到左地被挪用。

接下来我们以css-loader为例看看它的输出
建立文件以下：

-- a.css
-- index.html
-- index.js
-- webpack.config.js

a.css

#app {
  background-color: #f5f5f5;
  color: blue;
}
#app p {
  color: gray;
}

index.html

<div id="app">
    <h4>hello webpack!</h4>
    <p>hello loader!</p>
</div>
<script src="./main.js"></script>

index.js

const a = require('./a.css');
console.log(a);

webpack.config.js

module.exports = {
    entry: {
        main: './index.js'
    },
    output: {
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: 'css-loader'
            }
        ]
    }
}

上面的代码很罕见，webpack协助我们加载.css文件。当weback在构建的历程中会依据已有设置起首将a.css作为参数交给css-loader, css-loader将会举行一系列处置惩罚输出特定的数据。实际上a.css会作为raw resource string范例的参数，有一些loader只能接收raw作为参数，比方css-loader、handlebars-loader…
实行npx webpack

能够看到，css-loader将款式代码处置惩罚成了js数组，而且我们的款式代码被处置惩罚成了字符串
修正webpack.config.js

...
module: {
    rules: [
        {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        }
    ]
}
...

加上style-loader，再看看输出的啥：

如你所见，style-loader将css-loader返回的款式数组一顿操纵插进去到html head中去了，然后他本身返回了一个空对象

loader特征之一就是：应用参数完成某个使命，不是肯定有所输出，就像一个返回值为空的函数。

明显style-loader就是相符这类特征的loader之一，它与css-loader搭配起来完成了我们须要的功用。而且他们各自自力，坚持小而精的运转，轻易与其他loader搭配协作，比方当我想把款式代码输出为js字符串时我就会挑选to-string-loader，起首装置这个新的partner，npm i to-string-loader，然后根据递次引用它，牢记递次很主要，

...
module: {
    rules: [
        {
            test: /\.css$/,
            use: [ 'to-string-loader', 'css-loader' ]
        }
    ]
}
...

从新构建后效果以下：

关于css-loader

css-loader运用频次比较高，它有一些设置能够协助我们完成特定需求。

...
module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                'to-string-loader',
                {
                   loader: 'css-loader',
                   options: {
                       url: true,        // 是不是启用url(), 类似于 url(image.png)` => `require('./image.png')
                       import: true,     // 是不是启用@import()加载款式
                       modules: false,   // 是不是启用CSS Modules
                       localIdentName: [hash:base64],    // Configure the generated ident
                       sourceMap: false,    // Enable/Disable Sourcemaps
                       camelCase: false,    // Export Classnames in CamelCase
                       importLoaders: 0    // Number of loaders applied before CSS loader
                   } 
                }
            ]
        }
    ]
}
...

参考链接

• Webpack文档 – 加载器Loaders