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

webpack系列学习-初体验

webpack系列学习-基本用法一

解析ES6

• 使用babel-loader
• babel的配置文件是：.babelrc
• 在webpack.config.js中使用babel-loader

  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

• 安装@babel/preset-react

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

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

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

• 书写react代码
• 打包: npm run build 即可

解析css less

• css-loader:用于加载.css文件，并且转换为commonjs对象
• style-loader:将样式通过