webpack解读之loader

原文地址：https://banggan.github.io/2019/04/27/webpack解读之LOADER/

Webpack核心概念解析

终于忙完了论文，可以愉快的开始学习了，重拾起重学前端、webpack以及Vue的源码解读作为入职前的复习吧。整个webpack系列将分成五个大的部分进行，以webpack4.0为文档进行解读，从简单的概念解读到最后的实现。
整个知识点涉及范围：

loader

使用loader来预处理文件，把不同的静态资源（模块的结尾不是js的模块)打包成js文件

loader打包静态资源

打包图片

• 安装使用file-loader实现：npm install file-loader -D
• 在webpack.config.js中添加loader的配置

module.exports = {
    //打包项目的入口文件
    entry: './src/index.js',
    module:{
        rules:[{
            test:/\.(jpg|png|gif)$/,//打包以jpg、png、gif结尾的所有图片文件
            use:{
                loader:'file-loader',
                options:{//placeholder 占位符 
                    name:'[name]_[hash].[ext]',//保持原图片的名字+hash值和后缀,主要单引号
                    outputPath:'image/'//打包图片的位置
                }
            }
        }]
    }
}

• 更多的有关于file-loader的配置见文档

打包图片成base64格式

url-loader基本能实现file-loader的打包功能，适用于小图片的打包

• 好处：图片打包成js文件，不用加载图片的地址，页面快速显示
• 坏处：图片过大导致js文件过大

所以，当图片的大小小于limit值时会把图片打包成base64格式，大于limit值则按照file-loader打包成图片文件

• 安装使用url-loader实现：npm install url-loader -D
• 在webpack.config.js中添加loader的配置

module.exports = {
    module:{
        rules:[{//打包以jpg、png、gif结尾的所有图片文件
            test:/\.(jpg|png|gif)$/,
            use:{
                loader:'url-loader',
                options:{//placeholder 占位符 
                name:'[name]_[hash].[ext]',//保持原图片的名字+hash值和后缀,主要单引号
                outputPath:'image/',//打包图片的位置
                limit:2048
            }
        }]
    }
}

• 更多的有关于url-loader的配置见文档

打包样式css文件

需要使用css-loader、style-loader

• css-loader:分析几个css文件的关系,合并css文件
• style-loader:将css-loader合并的css内容挂载在页面的head部分

实现方式：

• 安装loader实现：npm install css-loader style-loader -D
• 在webpack.config.js中添加loader的配置

module.exports = {
    module: {
        rules: [{//打包css文件
            test:/\.css$/,
            use:['style-loader','css-loader']
        }]
    }
}

• 更多的有关于css-loader的配置见文档

打包样式scss文件

需要使用sass-loader、node-sass

• 安装loader实现：npm install sass-loader node-sass -D
• 在webpack.config.js中添加loader的配置

module.exports = {
    module: {
        rules: [{
            test: /\.scss$/,
            use:['style-loader','css-loader','sass-loader'] 
        }]
    }
};

在配置中，有三个loader,执行顺序是从下到上，从右到左。在打包scss文件时，首先执行sass-loader：对sass翻译成css文件，在挂载到css-loader,最后style-loader.

• 更多的有关于sass-loader的配置见文档

为样式添加不同浏览器的前缀

为了兼容不同的浏览器，在写样式的时候需要加上适用不同浏览器的前缀，如-o、-webkit、-moz等

-安装loader实现：npm install postcss-loader autoprefixer -D
-在根目录创建postcss.config.js

moudle.exports ={
	plugins:[
        require('autoprefixer')
	]
}

• 在webpack.config.js中添加loader的配置

module.exports = {
    module: {
        rules: [{
            test:/\.scss$/,
            use:[
            'style-loader',
            'css-loader',
            'sass-loader',
            'postcss-loader']
        }]
    }
}

• 更多的有关于postcss-loader的配置见文档

css-loader添加不同的配置

css模块化打包

• 场景：在文件引入的scss不仅影响当前的文件，还影响当前文件引入的其他js文件，造成样式冲突
• 实现：css只在当前模块类有效,在配置中添加modules:true开启css的模块化打包，在引入的时候注意区分

scss文件的嵌套引用

• 场景：scss文件通过import引入其他scss文件，导致打包的时候引入的scss文件打包错误

• 实现：importLoader:2

• 在webpack.config.js中添加loader的配置

module:{
        rules:[{//打包scss文件
            test:/\.scss$/,
            use:[
            'style-loader',
            {
                loader:'css-loader',
                options:{
                    importLoaders:2,//index.scss中通过import引入其他的scss文件,引入的scss文件在打包的时候也将依次经过所有的loader
                    modules:true 
                }
            },
            'sass-loader',
            'postcss-loader']
        }]
    }

打包字体图标文件

在阿里巴巴矢量图标库中，把需要的字体图标下载到本地，解压。将iconfont.eot iconfont.svg iconfont.ttf iconfont.woff 四种图片文件放入到项目中，在src中新建一个放字体图标的文件夹font。将iconfont.css文件拷贝到项目中，修改对应字体的引用路径。

• 需要安装 file-loader:npm i file-loader -D
• 在webpack.config.js中添加loader的配置

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.(eot|ttf|svg|woff)$/,
            use:{
                loader:'file-loader'
            }
        },
            ]
        }]
    }
}

• 更多的有关于加载字体的配置见文档

打包数据文件

如遇到json、scv、xml文件需要打包时，使用csv-loader 和 xml-loader实现。

• 安装：npm install csv-loader xml-loader -D
• 在webpack.config.js中添加loader的配置

  module.exports = {
    module: {
      rules: [{
         test: /\.(csv|tsv)$/,
         use: [
           'csv-loader'
         ]
       },
       {
         test: /\.xml$/,
         use: [
           'xml-loader'
         ]
       }]
    }
  }

• 更多的有关于加载数据的配置见文档