# loader篇

webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。

loader的配置有三种方式:

// webpack.config.js
module.exports = {
	module: {
		rules: [
			{
				test: /.txt$/,
				use: 'raw-loader' // 获取到内容
			}
		]
	}
}

@前端进阶之旅: 代码已经复制到剪贴板

// 单个loader
import Styles from 'style-loader!./styles.css';

// 多个loader且带参数
import Styles from 'style-loader!css-loader?modules!./styles.css';

@前端进阶之旅: 代码已经复制到剪贴板

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

@前端进阶之旅: 代码已经复制到剪贴板

会对 .jade 文件使用 jade-loader，对 .css 文件使用 style-loader 和

webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。

loader的配置有三种方式:

// webpack.config.js
module.exports = {
	module: {
		rules: [
			{
				test: /.txt$/,
				use: 'raw-loader' // 获取到内容
			}
		]
	}
}

@前端进阶之旅: 代码已经复制到剪贴板

// 单个loader
import Styles from 'style-loader!./styles.css';

// 多个loader且带参数
import Styles from 'style-loader!css-loader?modules!./styles.css';

@前端进阶之旅: 代码已经复制到剪贴板

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

@前端进阶之旅: 代码已经复制到剪贴板

会对 .jade 文件使用 jade-loader，对 .css 文件使用 style-loader 和