webpack轉換es6語法（babel）

使用webpack轉換es6語法（使用babel）

相關插件

• 模塊babel-loader
• @babel/preset-env
• @babel/plugin-proposal-decorators
• @babel/plugin-proposal-class-properties

webpack.config.js

let path = require('path');
let HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',  // 模式 模式有兩種  production development
    entry: './src/index.js', // 入口
    output: {
        filename: "bundle.[hash:8].js", // 打包後的文件名
        path: path.resolve(__dirname, 'dist'), // 路徑必須是絕對路徑
    },
    plugins: [  // 放着所有的webpack插件
        new HTMLWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true,
            },
            hash: true
        }),
        new MiniCssExtractPlugin({
            filename: 'main.css',
        })
    ],
    module: {   // 模塊
        // loader
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env'
                        ],
                        plugins: [
                            ['@babel/plugin-proposal-decorators', {legacy: true}],
                            ['@babel/plugin-proposal-class-properties', {loose: true}],
                        ]
                    }
                }
            }
        ]
    }
};