webpack處理js語法及校驗

處理js語法及校驗：

如何去優化和兼容一些高級語法

yarn add @babel/plugin-transform-runtime
yarn add @babel/runtime
yarn add @babel/polyfill
yarn add eslint-loader

index.js

require('@babel/polyfill');

webpack.config.js

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

module.exports = {
    devServer: { // 開發服務器的配置
        port: 3000,
        progress: true,
        contentBase: './build',
        compress: true,
    },
    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
        }),
    ],
    module: {   // 模塊
        // loader
        rules: [ 
            {
                test: /\.js$/,
                use: {
                    loader: 'eslint-loader',
                    options: {
                        enforce: 'pre'  // previous   post
                    },
                },
                exclude: /node_module/
            },
            {
                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}],
                            '@babel/plugin-transform-runtime'
                        ]
                    }
                },
                include: path.resolve(__dirname, 'src'),
                exclude: /node_modules/
            }
        ]
    }
};