webpack 编译stylus_Webpack Loader

一.Webpack与Loader

Webpack希望对所有依赖资源一视同仁，抹平针对不同类型资源的处理差异：

Unlike most bundlers out there, the motivation behind Webpack is to gather all your dependencies (not just code, but other assets as well) and generate a dependency graph.

而负责抹平这种差异的，就是Loader

Webpack: 无论引入了个什么东西，都给我转成JS Module，不然就胡闹(报错)

Loaders: 好

配置结构

Entry

依赖图的入口

entry: './src/index.js'

// 或者多入口的形式

entry: {

main: './src/index.js'

}

Output

输出产物

output: {

filename: 'main.js',

path: path.resolve('./build')

}

// 对应多入口的形式

output: {

filename: '[name].js',

path: path.resolve('./build')

}

Loaders

依赖处理器，拦截依赖项并进行预处理

比如这个场景：

// index.js file

import helpers from '/helpers/main.js';

// Hey Webpack! I will need these styles:

import 'main.css';

Webpack不认识CSS(无法直接处理)，就需要先由Loader加工一遍(预处理)

常见的Loader配置：

module: {

rules: [

{

test: /\.css$/,

use: [

{ loader: 'style-loader' },

{ loader: 'css-loader' },

{ loader: 'less-loader' }

]

}

]

}

Loader应用顺序是less-loader, css-loader, style-loader

P.S.除了通过配置文件来指定Loader与资源类型的关系外，还可以在引入资源时添上loadername!前缀，例如import image from 'file-loader!./my-img.png'

Plugins

Loader不够用/不好用或者做不到的时候，通过自定义插件来扩展

例如extract-text-webpack-plugin用来改变样式规则被打进bundle的style-loader默认行为，把CSS收集起来