webpack babel-loader一些配置属性

初始化项目

npm init

安装webpack

npm i webpack webpack-cli --save-d

安装babel-loader

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

// 导入静态资源目录
const path = require('path')

module.exports = {
    // 指定开发环境
    mode:"development",
    // 打包入口文件  默认为src目录下的index.js文件
    entry:"./src/index.js",
    // 输出目录   默认weidist目录
    output:{
        // 打包输出文件名
        filename:"[name].js",
        // 指定输出目录
        path:path.resolve(__dirname,"dist")
    },
    // 模块  指定文件打包需要使用的loader  以及一些配置
    module:{
        rules:[
            {
                // 匹配js文件
                test:/\.js$/,
                // 排除项目依赖
                exclude:/(node_modules)/,
                use:{
                    loader:"babel-loader",
                    options:{
                        // 处理此文件时要激活的一组预设
                        presets:["@babel/preset-env"],
                        // 处理此文件时要激活的一系列插件
                        // 引入babel-plugin-transform-runtime并且使所有辅助代码从这里引用
                        plugins:[require("@babel/plugin-transform-runtime")],
                        query: {
                            // 指定字符串作为文件夹名称
                            optional: "runtime",
                            // 开启缓存loader的执行效果  并缓存到指定的文件夹内
                            cacheDirectory: true
                        }
                    }
                }
            }
        ]
    }
}