04_07.babel-loader

1. 首先在根目录下载 babel-loader

npm i babel-loader babel-core babel-plugin-transform-runtime babel-preset-latest -D

2. 要操作的相关文件：

3.demo

• dog.js

/*
 * @Author: Robyn 
 * @Date: 2017-11-17 18:41:39 
 * @Last Modified by:   Robyn 
 * @Last Modified time: 2017-11-17 18:41:39 
 */

class Dog {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    wow() {
        console.log(`我叫${this.name}, 我${this.age}岁了, 我是一条忠实的狗, 我骄傲我自豪, 旺旺!`);
    }
}

module.exports = Dog;

• main.js

// 导入Dog类
const Dog = require('./js/dog.js');
new Dog('秋田大犬', 6).wow();

• .babelrc

{
    "presets": ["latest"],
    "plugins":["transform-runtime"]
}

• webpack.config.js

/*
 * @Author: Robyn 
 * @Date: 2017-11-17 18:44:28 
 * @Last Modified by:   Robyn 
 * @Last Modified time: 2017-11-17 18:44:28 
 */
// 因为webpack里面有些路径配置, 必须是绝对路径, 导入这个模块是为了调用方法计算路径
const path = require('path');  
const htmlWebapckPlugin = require('html-webpack-plugin');

// 配置文件要求我们必须导出一个配置对象
module.exports = {

    // 入口
    entry: path.resolve(__dirname, './src/main.js'),

    // 输出
    output: {
        // 路径
        path: path.resolve(__dirname, './dist'),
        // 打包后js文件名
        filename: 'bundle_[chunkhash:8].js'
    },

    //  插件配置
    plugins: [
        new htmlWebapckPlugin({
            template: './src/index.html',   // 要处理的html
            filename: 'index.html',         // 处理后的html名称
            inject: 'body',                 // 自动注入js到什么地方
            minify:{ // 压缩优化HTML页面
                collapseWhitespace:true, // 合并空白字符
                removeComments:true, // 移除注释
                removeAttributeQuotes:true // 移除属性上的引号
            }
        })
    ],

    // loader的作用是为了让webpack可以打包其他类型的模块
    module: {

        // 配置loader, 该配置选项是必须的
        rules: [    
            // 打包特殊语法编写的js文件
            {
                test: /\.js$/,
                use: ['babel-loader'],
                exclude: path.resolve(__dirname, '../node_modules')  // 打包的时候,如果项目引入了node-modules的东西,不打包它
            }
        ]
    }
};

• 在根目录下执行webpack

webpack