1.11.预处理器文件处理

1.sass文件

sass这种css预处理器是以.scss结尾，需要用node-sass和sass-loader来处理

安装loader

npm i node-sass sass-loader -D

增加相关配置：

webapck.base.js

module: {

  rules: [

    {

      test: /\.css$/,

      use: ["style-loader", "css-loader"]

    },

    {

      test: /\.scss$/,

      use: ["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), 使用后面的1个loader来处理

        importLoaders: 2

      }

    },

    // "css-loader",

    "postcss-loader",

    "sass-loader"

  ]

},

2.less文件

3.stylus文件

1.12.解析图片

解析图片需要用到file-loader，它的作用是将图片拷贝到打包后到输出目录，并且返回一个可以引用的地址

安装file-loader

npm i file-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上做的一层封装，我们需要将这个loader先安装上

npm i url-loader@2.1.0 -D

修改相关配置

{

  test: /\.(jpe?g|png|gif|bmp|svg)$/,

  use: {

    loader: "url-loader",

    options: {

      // 8k以下的图片转成base64

      limit: 8192,

      name: "img/[name].[ext]"

    }

  }

}

如果要支持字体图标，可以再新建一条匹配规则，使用file-loader来处理即可

1.11.解析js文件

ES的一些比较新的语法浏览器是不支持的，因此，我们需要将这些新的语法转成比较通用的语法，babel就是一个很好的转换工具，我们先安装需要的工具

npm i @babel/core@7.6.2  babel-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不能转换的语法，你还可以单独安装对应的转换插件来解决，例如：

class Person {

  name = "小红"

}

这种语法需要用 @babel/plugin-proposal-class-properties 这个插件来转换安装插件

npm i @babel/plugin-proposal-class-properties@7.5.5 -D

螺钉课堂视频课程地址：http://edu.nodeing.com

巴特西

webpack入门进阶（3）