webpack-核心概念-loader

一、webpack-核心概念-loader

1. 是什么

由于webpack本身只能处理Javascript模块，如果要处理其他类型的文件，就需要使用loader进行转换。

loader的运行顺序：从下往上，从右往左。

2. 使用loader打包静态资源-图片

• 使用file-loader，注意需要打包的图片，默认一定是在js中引用到的图片，如果你的图片只是在html中引用，默认不会打包。

  // 安装file-loader
  npm install file-loader --save-dev
  
  // 配置
  module.exports = {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif)$/i,
          use: [
            {
              loader: 'file-loader',
              options: {
              	name: '[name]_[hash]_[ext]'
              	outputPath: 'images/'
              }
            },
          ],
        },
      ],
    },
  };
  

• 使用url-loader

  • 将图片打包成base64串到js中，节约请求时间。【适合小图片，可以通过limit参数设置】

    // 安装file-loader
    npm install url-loader --save-dev
    
    // 配置
    module.exports = {
      module: {
        rules: [
          {
            test: /\.(png|jpe?g|gif)$/i,
            use: [
              {
                loader: 'file-loader',
                options: {
                	name: '[name]_[hash]_[ext]'
                	outputPath: 'images/',
                  // 与file-loader最大区别
                	limit: 20480 
                }
              },
            ],
          },
        ],
      },
    };
    

3. 使用loader打包静态资源-样式

涉及几个loader

• style-loader：将对应的css代码插入页面中的style标签中。
• css-loader：处理css相关依赖关系，合并css文件
• sass-loader：将sass的样式转化成css
• less-loader：作用等同于sass-loader，将less样式转化成css
• postcss-loader，autoprefixer：自动添加厂商前缀

具体：

场景一：只需style-loader和css-loader

// style-loader：将对应的css代码插入页面中的style标签中。
// css-loader：处理css相关依赖关系，合并css文件
// 安装style-loader，css-loader
npm install style-loader --save-dev
npm install css-loader --save-dev
// 在webpack.config.js的module的rules中配置，意思当打包遇到.css结尾的文件，使用css-loader，然后在使用style-loader
{
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
}
// 对应的css文件，index.css
.avatar {
  width: 150px;
  height: 150px;
}

// 或者样式文件是avatar.css,内容如下
.avatar {
  width: 150px;
  height: 150px;
}
// 在index.css中引入avatar.css,也是可以成功打包处理的
@import './avatar.css'

场景二：支持scss

// 引入sass-loader
// 安装
npm install sass-loader sass  --save-dev 
// loader配置
{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader'] // 从右到左执行
}
// index.scss内容
body {
  .avatar {
    width: 150px;
    height: 150px;
  }
}
// index.js引入
import './index.scss'

场景三：支持厂商前缀

// 引入postcss-loader
// 安装
npm install postcss-loader postcss --save-dev
// autoprefixer
npm install autoprefixer -D
// loader配置
{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
}
// 新建postcss.config.js配置
module.exports = {
    plugins: [
        require('autoprefixer')
    ],
};
// 在webpack4中需要在package.json中的devDependencies平级添加或者新建.browserslistrc文件
// 配置
  "browserslist": [
    "defaults",
    "not ie <= 8",
    "last 2 versions",
    "> 1%",
    "iOS >= 7",
    "Android >= 4.0"
  ]

场景四：支持scss样式文件引用另外一个scss样式文件

// avatar.css
body {
  .a {
    background: red;
  }
}

// index.css
@import "./avatar.scss";

body {
  .avatar {
    width: 150px;
    height: 150px;
    transform: translate(100px, 100px);
  }
}

// 配置
{
  test: /\.scss$/,
    use: ['style-loader',
    {
      loader: 'css-loader',
        options: {
          importLoaders: 2  // 将scss引用的scss也走postcss-loader,sass-loader
      }
  }, 
  'sass-loader', 
  'postcss-loader']
}

场景五：模块化

// 直接将index.scss引入index.js中
// import './index.scss' 那么会造成index.scss样式会变成全局样式 
// 也就是说index.scss里的样式，会影响到index.js中其他样式组件
// 引入模块化的概念，本模块的样式只在本模块生效
// 1. 配置loader
{
  test: /\.scss$/,
    use: ['style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              modules: true // 开启模块化
            }
          }, 
          'sass-loader', 
          'postcss-loader']
}
// 2. index.js中引入样式
import style from './index.scss'

// 3. 添加样式，使用style.xxx方式
img.classList.add(style.avatar)

4. 使用loader打包静态资源-字体文件

// 1. 将对应的iconfont字体拷贝项目中
// 2. 按照提供的scss，进行使用
// 3. loader配置
// 借助file-loader进行打包
{
  test: /\.(eot|ttf|svg)$/i,
    loader: 'file-loader',
},