webpack学习笔记(二)

最新推荐文章于 2022-10-28 12:50:58 发布

叉有熊

最新推荐文章于 2022-10-28 12:50:58 发布

阅读量131

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_42410018/article/details/115305815

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

loader

1.处理css文件

npm i css-loader style-loader -D

module: {
    rules: [
      {
          //匹配规则，使用正则表达式
        test: /\.css$/,
        //'style-loader'需要在 'css-loader'前面，loader是从右往左执行的
        use: ['style-loader', 'css-loader']
      }
    ]
  }

css-loader是将匹配到的css文件解析

style-loader是将解析出来的结果生成style节点以内联样式的形式放到html网页中

2.处理less文件

npm i less less-loader -D

 {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }

3.处理sass或者scss文件

 {
        test: /\.s(a|c)ss$/,//sass文件更新过一版所以不仅叫sass文件，还有scss文件
        use: ['style-loader', 'css-loader', 'sass-loader']
      }

4.处理图片，或者font字体资源

图片

npm i file-loader url-loader -D

 {
        test: /\.png$/,
        use: 'file-loader'
      }

或

 {
        test: /\.png$/,
        use: {
          loader: 'url-loader',//url-loader可以对图片 进行配置
          options: {
            limit: 5 * 1024,//图片小于5*1024将以base64格式显示，但是base64格式一般多占用30%的空间，所以也一般只有小图使用
              outputPath：'imgs'，//打包时，将在打包目录下找这个目录
              name:'[name][hash].[ext]',//[原文件名字][hash值].[扩展名]
          }
        }
      }

字体图标把匹配规则改成字体图标的后缀名就可以了

test:/\.(woff|woff2|eot|svg|ttf)$/

5.babel

将es6转化为es5

npm i babel-loader @babel/core @babel/preset-env -D

如果想使用更高级的语法，可以使用@babel/plugin-proposal-class-properties

 module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/env'],//presets必须是array或者undifined
            plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime']//也需要数组
          }
        },
        exclude: /node_modules/
      }
    ]
  }

使用generator

npm i @babel/plugin-transform-runtime -D

npm i @babel/runtime -S //上面包依赖于这个包

.babelrc

官网推荐做法，将webpack中babel的options配置项放到单个文件中生效

{
  "presets": [
    "@babel/env"
  ], //presets必须是array或者undifined
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime"
  ]
}