webpack基本配置

webpack配置
const {resolve} = require('path')
//引入html打包
const htmlplugin = require('html-webpack-plugin') 
//提取单独的css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
//压缩css代码
const OptimizeCss = require('optimize-css-assets-webpack-plugin')

module.exports = {
    entry: './src/index.js',

    output: {
        filename: 'js/build.js',
        path: resolve( __dirname, 'build')
    },
    module: {
        rules: [
            //loader
            //语法检查 eslint-loader 注意：依赖于eslint
            //注意排除第三方库
            //设置规则在：package.json中，eslintConfig中 
            //推荐规则：airbnb
            {
                test: /\.js$/,
                loader: 'eslint-loader',
                exclude: /node_modules/,
                options: {

                }
            },
            //js兼容性处理：babel-loader
            //babel-loader @babel/cores @babel/preset-env
            //上面只能转换基本的语法
            //全部兼容性处理 @babel/polyfill 在js文件引入即可
            //按需加载兼容性：core-js
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader:'babel-loader',
                options: {
                    //预设：指示babel怎么做兼容性处理
                    // presets: [
                    //     [
                    //         '@babel/preset-env'
                    //     ]
                    // ]
                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                //按需加载
                                useBuiltIns: 'usage',
                                //指定core-js的版本
                                corejs: {
                                    version: 3
                                },
                                //指定兼容性做到哪个版本的浏览器
                                targets:{
                                    chrome: '60',
                                    firefox: '60',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]
                    ]
                }
            },
            {
                //匹配文件
                test: /\.css$/,
                //使用哪些loader 顺序从下往上 从右往左
                use: [
                    //创建style标签，将js中的样式插入，添加到head中
                    //可以使用替代MiniCssExtractPlugin.loader ，提取单独css
                    'style-loader',
                    //对loader进行配置
                    //通过package.json中browserslist里面的配置，加载指定的css兼容性样式
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: () =>[
                                require('postcss-preset-env')
                            ]
                        }
                    },

                    //将css文件变成commonjs模块加载到js中，里面是样式字符串
                    'css-loader'
                ]
                /*
                css 兼容性处理：postcss ==> postcss-loader postcss-preset-env
                */
            },
            {//less
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            { //图片资源
                test: /\.(jpg|png|gif)$/,
                //use使用多个 loader使用一个
                // 需要下载俩个loader url-loader file-loader
                loader: 'url-loader', 
                options: {
                    // 图片小于8kb，就会base64处理
                    // 优点： 减少请求
                    // 缺点： 图片体积大
                    limit: 8 * 1024,
                    //因为url-loader使用es6解析，html-loader使用commonjs所以要关闭es6
                    esModule: false,
                    //输出目录
                    outputPath: 'img'
                }

            },
            {
                test: /\.html$/,
                //处理html中的img图片（负责引入img，被url-loader处理）
                loader: 'html-loader'
            },
            {
                //排除这些资源
                exclude: /\.(css|js|html|less)$/,
                loader: 'file-loader'
            }
        ]
    },
    plugins: [
        //plugins配置
        //使用html-webpack-plugin 打包html资源
        //功能创建一个空的html，引入打包输出的所有资源（js/css)
        //需要：有结构的html文件
        new htmlplugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin({
            //对文件重命名
            template: 'css/built.css'
        }),
        new OptimizeCss()
    ],
    mode: 'development',
    // mode: 'production'

    //开发服务器devServer，自动打包和刷新浏览器
    //启动：webpack-dev-server(需npm安装)
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        //启动gzip压缩
        compress: true,
        //端口号
        port: 3000,
        //自动打开浏览器
        open: true
    }
}