webpackstudy/13/webpack.config.js

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const EsLintPlugin = require('eslint-webpack-plugin')
module.exports = {
    entry:'./src/js/index.js',
    output:{
        filename:'js/built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            /*
            1、js 兼容性处理： babel-loader @babel/core @babel/preset-env
                只能转换基本语法 类似promise无法转换
            2、全部js兼容处理： @babel/polyfill
                比较暴力，全部兼容处理，体积太大
            3、选择性兼容处理：corejs
            */
            {
                test:/\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options:{
                    // 预设：指示babel做怎样的兼容性处理
                    presets:[
                        [
                            '@babel/preset-env',
                            {
                                useBuiltIns: 'usage',
                                corejs:{
                                    version:3
                                },
                                targets:{
                                    chrome: '60',
                                    firefox: '60',
                                    ie:'9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]
                    ]
                }
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new EsLintPlugin({
            extensions: ['js', 'json', 'coffee'],
            //exclude: '/node_modules/', //default
            fix:true
        })
    ],
    mode:'development'
}