loader 用于各类资源的解决
loader用于解决其余类型资源；什么是其余类型？就是各个类型都行，例如：css,scss,sass,stylus,ts,png,jpg,jpeg,font,svg...你能想到的所有资源都能够通过此属性来解决，包含门路解决，文件解决，不反对的语言解析都能够通过这个解决。
这里我列6个：
babel-loader
ts-loader
css-loader
sass-loader
style-loader
MiniCssExtractPlugin.loader
以上这些都是对于js和css解决的loader。对于图片、字体等其余动态资源文件，我再当前的文章中会给大家介绍到。
本章次要讲述js和css相干的loader。
// webpack.config.js...module: { rules: [ { test: /\.css$/, // 用于匹配文件,能够是字符串或者正则 loader: 'css-loader', // 当只有一个的时候就用这个 use: ['style-loader','css-loader',] // 当有多个的时候就用这个，执行程序是从右向左 }, { test: /\.scss$/, // 用于匹配文件,能够是字符串或者正则 loader: 'css-loader', // 当只有一个的时候就用这个 use: [MiniCssExtractPlugin.loader, 'style-loader','css-loader', 'sass-loader'] // 执行程序是从右向左 }, { test: /\.styl$/, // 用于匹配文件,能够是字符串或者正则 loader: 'stylus-loader', // 当只有一个的时候就用这个 use: [{ loader: 'postcss-loader', // 如果loader带有参数，则应用此形式 option: { name: 'stylus' }, },'css-loader', 'stylus-loader'] // 执行程序是从右向左 } ]}...须要留神的是：此前我就曾经说过css-loader是只吧css文件打包成模块。并未援用到html文件。因而须要引入到html文件，则须要在css-loader解决后在执行style-loader把解决后的css插入到html页面内应用（既生成一个style标签插入）。
sass-loader的应用前须要装置sass/node-sass
MiniCssExtractPlugin.loader其实也是个plugin,它能够把款式文件拎进去。变成一个css文件。既代码宰割，款式宰割。
// webpack.config.js...module: {},plugins: [ new MiniCssExtractPlugin({ filename: '[name].min.css', // css名称 chunkFileName: '[name].chunk_[id].css' // 异步引入的css名称 })]...这个chunk之前解释过这里再增强一下。chunkFileName就是异步引入的css文件。例如：按需加载的css。则就会走chunkFileName配置的名称。
明天就先讲到这吧，今天再讲plugin属性，此属性是最强！