webpack es6转es5 babel-loader

最新推荐文章于 2024-05-15 01:28:58 发布

tianmeng1999

最新推荐文章于 2024-05-15 01:28:58 发布

阅读量298

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/weixin_42448623/article/details/108111475

版权

webpack 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

文章目录

目录结构

在这里插入图片描述

js/cs.js

const cs = 'es6语法'
const csFun = ()=>{
    console.log("'es6语法'")
}

module.exports = { cs,csFun}

mian.js

// 入口文件
import {cs, csFun } from './js/cs'

console.log("cs",cs)
csFun()

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./dist/build.js"></script>
</body>
</html>

安装使用

安装

npm i babel-loader@7 babel-core babel-preset-es2015 --save-dev

package.json

{
  "name": "loader-less",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "webpack": "^3.6.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

配置loader

const path = require('path')

module.exports = {
    entry:'./src/main.js', // 入口文件
    output:{ // 输出
        path: path.join(__dirname,'dist'), // 绝对路径
        filename: 'build.js'
    },
    module:{
        rules:[
           {
               test:/\.m?js$/,
               //  exclude 排除
               exclude: /(node_modules|bower_components)/,
               use:{
                   loader:'babel-loader',
                   options:{
                       presets: ['es2015']
                   }
               }
           }
        ]
    }
}