1.11.预处理器文件处理#1.sass文件sass这种css预处理器以.scss结尾，需要使用node-sass和sass-loader处理安装loadernpminode-sasssass-loader-D添加相关配置：webapck.base.jsmodule:{规则:[{测试:/\.css$/,使用:["style-loader","css-loader"]},{测试:/\.scss$/,使用:["style-loader","css-loader","sass-loader"]}]}注意：如果在css文件中引入sass文件，只用css-loader是无法解析的，必须加上sass-loader,并且需要在css-loader中声明,使用sass-loader举例:index.css导入a.css,a.css导入a.scss,此时需要添加配置{test:/\.css$/,use:["style-loader",//需要用对象替换原来的字符串，然后为css-loader配置参数{loader:"css-loader",options:{//如果是css文件引入其他文件（@import），使用下面的loader处理importLoaders:2}},//"css-loader","postcss-loader","sass-loader"]},#2.lessfile#3.stylusfile#1.12.解析图片要解析图片，需要file-loader。它的作用是将打包后的图片复制到输出目录，并返回一个可参考的地址来安装file-loadernpmifile-loader@4.2。0-D添加图片支持配置webpack.base.js{test:/\.(jpe?g|png|gif|bmp)$/,use:"file-loader"}图片比较小的时候，我想把这张图片转换成base64格式的字符串。这样做的好处是发送的http请求更少。完成这个base64字符串的转换，需要用到url-loader。url-loader是对file-loader做了一层封装，我们需要在npmiurl-loader@2.1.0-D上安装这个loader修改相关配置{test:/\.(jpe?g|png|gif|bmp|svg)$/,use:{loader:"url-loader",options:{//将8k以下的图片转换为base64limit:8192,name:"img/[name].[ext]"}}}如果要支持字体图标，可以新建匹配规则，使用file-loader处理相关配置{test:/\.(eof|ttf|woff|woff2)$/,use:"file-loader"}#1.11。解析js文件一些比较新的语法ES浏览器不支持，所以我们需要将这些新语法转换成更通用的语法。Babel是一个很好的转换工具。我们首先安装需要的工具npmi@babel/core@7.6.2babel-loader@8.0.6@babel/preset-env@7.6.2-D@babel/core是babel的核心，它会使用@babel/preset-env语法转换时的插件包，@babel/preset-env这些插件包包含各种新的语法转换功能。工具babel可以独立运行。如果你想把它和webpack结合起来，你需要安装一个babel-loader。babel-loader的作用是将ES的一些新语法转换发送到@babel/core，@babel/core会调用@babel/preset-env插件完成转换并添加配置{test:/\.js$/,use:"babel-loader"}babel-loader会去调用一个babel配置文件，我们需要在项目根目录下创建一个.babelrc配置文件{"presets":["@babel/preset-env"]}如果你使用一些@babel/preset-env无法转换的语言也可以单独安装对应的转换插件，例如：classPerson{name="Xiaohong"}这个语法需要使用@babel/plugin-proposal-class-properties插件来转换安装插件在npmi@babel/plugin-proposal-class-properties@7.5.5-D
