webpack学习笔记-05 loader之es6转es5

先使用命令配置loader：

cnpm install --save-dev babel-loader@7 babel-core babel-preset-es2015

在webpack.config.js的rules数组里，新增如下对象:

{
  test: /\.js$/,
  // exclude 排除
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['es2015']
    }
  }
}

这里放一下我的webpack.config.js

const path = require("path")

module.exports = {
  //入口
  entry: "./src/main.js",
  //出口
  output: {
    // __dirname 当前文件的路径
    //需要动态的获取绝对路径
    path: path.resolve(__dirname, "dist"),
    //打包的文件名
    filename: "bundle.js",
    publicPath:"dist/"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // css-loader 只负责将css文件进行加载
        // style.loader 负责将样式添加到DOM中
        // 使用多个loader时，是从又向左读取的。
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
          }, {
            loader: "css-loader" // translates CSS into CommonJS
          }, {
            loader: "less-loader" // compiles Less to CSS
          }
        ]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 130000,
              name:"images/[name].[hash:8].[ext]"
            },
          }
        ]
      },
      {
        test: /\.js$/,
        // exclude 排除
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }
    ]
  }
}