webpack入门进阶（3）

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来处理即可

相关配置

{
  test: /.(eof|ttf|woff|woff2)$/,
  use: "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