[TOC] ## 前言 本文重点介绍各种loader的配置以及使用，对于本文中没有涉及的loader请自行解决完成其开发配置。 ## loaders使用简介 通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理。比如对样式预处理器，js等转换。Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括以下几方面：test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须） loader：loader的名称（必须） include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）； query：为loaders提供额外的设置选项（可选） 比如：对js所使用的loader，我们查看下代码部分的配置。 ~~~ module: { rules:[ { test: /\.js$/, loader: 'babel-loader?cacheDirectory=true', exclude: /node_modules/, include: [resolve('src'), resolve('test')] } ] } , ~~~ ## css-loader * css解析（支持样式预处理器的解析） 因为在webpack中，最后导出的只有一个webpack的产出bundle.js文件，所以我们其他的资源比如样式就要通过import或者require的方式引入之后才能使用。下面介绍的三种方法都是可以使用的，如果你没有特殊的需求，建议使用最后一种，简单方便。 在app的目录下，我们新建main.css的样式文件，然后通过require的方式加载进去。 ~~~ // 复杂配置 { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" } ] } //简单写法 { test: /\.css$/, loaders: [ "style-loader" , "css-loader" ] } //简单写法2 { test: /\.css$/, loader: "style-loader!css-loader" } ~~~ css模块化，如果你想对应组件中适配性的引入样式，可以使用css模块化的方式，css-loader增加配置potions:{module:true},这样就可以在组件引入样式之后，具体使用的时候className={styles.root}。相同的类名也不会造成样式的污染。 ## 样式预处理器 loader > sass作为常用的样式预处理语言，我们需要了解其加载以及配置的方式，比如less-loader.sass-loader ,stylus-loader,postcss-loader,我们也可以类比它的使用，同时辅助autoprefixer完成样式后缀的添加。（最新的版本语法说明中需要加完整的名称sass-loader） * 常规简单配置sass-loader ~~~ npm install --save-dev sass-loader autoprefixer node-sass //针对样式文件，webpack里加对应的loader,最新版的语法中需要设置完整的loader { test: /\.scss$/, loader: "style-loader!css-loader!sass-loader" }, ~~~ <br> * 将样式打包为额外的样式文件 ~~~ cnpm i extract-text-webpack-plugin --save-dev //webpack.config.js中配置 var ExtractTextPlugin = require('extract-text-webpack-plugin'); //配置文件中加相关的配置,不需要加style-loader，因为已经是css文件了。 module:{ loaders:[ { test:/\.scss/, loader:ExtractTextPlugin.extract("css-loader!sass-loader") } ] } //puligins关键字中加相关的产出文件style.css文件中，提供生产使用 plugins:[ new ExtractTextPlugin("style.css"); ] ~~~ * 将当前样式按照必要样式以及不必要样式分别加载 比如说页面基本样式是渲染必备的，但是交互弹出框部分的样式可以做延迟。下面针对这一个需求做程序上的处理。 * 将当前样式按照当前页面样式以及其他样式分别加载（待补充） * [官方sass-loader文档](https://doc.webpack-china.org/loaders/sass-loader/) ## js文件 ## babel部分 ## 图片loader ## 音频 视频loader ## vue文件