前言：笔者把学习的webpack知识从基础到原理写个系列，以便回顾。希望能帮助到更多正在学习webpack的小伙伴。

webpack系列(一)(附demo)

webpack系列学习-基本用法

解析ES6

 module.exports = {
        module:{
            rules:[{
                test:/\.js$/,
                use:'babel-loader'
            }]
        }
    }

安装babel

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

在根目录创建.babelrc

    {
        "presets":[
            "@babel/preset-env"  // 增加ES6的babel preset 配置
        ]
    }

打包:npm run build 即可

解析react jsx

 npm i react react-dom @babel/preset-react -D

在.babelrc中增加react的babel preset配置

    {
        "presets":[
            "@babel/preset-react"
        ]
    }

书写react代码

解析css less

 npm i css-loader style-loader -D

在webpack.config.js中配置

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

解析less: 安装less-loader

npm i less less-loader -D

在webpack.config.js中配置less-loader

 module.exports = {
    module:{
        rules:[{
            test:/\.js$/,
            use:'babel-loader'
        },{
            test:/\.css$/,
            use:[
                'style-loader',
                'css-loader'
            ]
        },{
            test:/\.less$/,
            use:[
                'style-loader',
                'css-loader',
                'less-loader'
            ]
        }]
    }
}

书写less文件

打包：npm run build 即可

解析图片

npm i file-loader -D

在webpack.config.js中配置file-loader

module.exports = {
        module:{
            rules:[{
                test:/\.(png|jpg|jpeg|gif)$/,
                use:'file-loader'
            }]
        }
    }

在js中引入图片

解析字体

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

在css中引入字体文件

 @font-face{
        font-family: 'SourceHanSerifSC-Heavy';
        src:url('./images/SourceHanSerifSC-Heavy.otf')
    }

    .search{
        font-size: 20px;
        color: red;
        font-family: 'SourceHanSerifSC';
    }

打包：npm run build 即可

另一种解析图片和字体：url-loader

npm i url-loader -D

在webpack.config.js中配置url-loader

module.exports = {
        module:{
            rules:[{
                test:/\.(woff|woff2|eot|ttf|otf)$/,
                use:[{
                    loader:'url-loader',
                    options:{
                        limit:'10240'
                    }
                }]
            }]
        }
    }

打包：npm run build 即可