webpack系列学习-各种loader使用
字节爱好者 91 4

前言:笔者把学习的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:将样式通过