/**
 *  loader: 下载   使用
 * 
 *  plugin: 下载 引入  使用
 * 
 */

// resolve 用来拼接路径的方法
const { resolve } = require("path");
const htmlWebpackPlugin = require('html-webpack-plugin')

// 可将打包的css单独提取出来
const miniCssExtractPlugin = require('mini-css-extract-plugin');

// 这里设置成开发环境
process.env.NODE_ENV = 'development'

// optimize-css-assets-webpack-plugin 用来压缩css代码
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

exports.modules = {

    // 入口文件
    entry: './src/index.js',

    // 出口
    output: {

        // 输出文件名
        filename: 'built.js',
        // 输出路径  __dirname nodejs变量,当前文件的目录绝对路径
        path: resolve(__dirname, 'build')

    },

    // npm i mini-css-extract-plugin -D 可以提取css为单独文件
    // loader配置
    moudle: {
        rules: [

            {
                // 匹配哪些文件 用正则
                test: /\.css$/,

                // 使用哪些loader来处理
                use: [

                    // 也就是use执行顺序是从右到左的，或者说从下到上

                    // 创建style标签，将css-loader 编译成的js插入进去，最后添加到head标签中
                    'style-loader',   // miniCssExtractPlugin.loader 可以取代style-loader,单独提取css文件

                    // 将css文件变成commonjs模块加载到js中，里面的内容就是样式字符串
                    'css-loader',
                    /**
                     *  css 兼容性处理: postcss-loader和 postcss-preset-env
                     * 
                     * package.json 里的browserslist:{}
                     * 
                     * 这里postcss 默认是生产环境  可通过nodejs 设置成开发环境  process.env.NODE_ENV = 'development'
                     */

                    // 这里默认可以直接写  'postcss-loader'      'postcss-loader'和'style-loader'两个写其中一个
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: () => [
                                // postcss 插件
                                require('postcss-preset-env')()
                            ]
                        }
                    }
                ],
            },
            {
                test: /\.(png|jpg|git)$/,

                // 默认只能处理css中的图片  html中的图片会找不到
                loader: 'url-loader',

                options: {

                    // 图片小于8kb，会自动转化成base64处理
                    limit: 8 * 1024,

                    // url-loader 默认用es6来解析的，html-loader使用commonjs来解析的，这里会出问题
                    // 关闭url-loader用es6解析，用commonjs解析
                    esModule: false,

                    // 给图片重命名： [hash: 10]: 取hash的前10位，[ext]取文件原来的扩展名
                    name: '[hash: 10].[ext]',

                    outputPath: 'imgs'// 输出到build下的imgs 里
                }
            },
            {
                test: /\.html$/,

                // 处理html中的img， 从而被url-loader解析
                loader: 'html-loader',
            },

            // 打包其他资源 除了（css js html)其他的资源
            {
                exclude: /\.(js|html|css|less)$/,
                loader: 'file-loader',
            },

            /**
             * 语法检查： eslint-loader
             * 
             * 这里只检查自己写的代码，第三方的不检查
             * 
             * 检查规则： package.json中eslintConfig 里设置
             * 
             * npm install eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import
             * 
             *     package.json 里：
             *      "eslintConfig":{
             *          "extends": "airbnb-base"
             *      }
             */
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                options: {
                    fix: true, // 可以自动修复我们的代码
                }
            }
        ]
    },

    // plugin 配置
    plugins: [

        // 默认会创建一个空的html，自动引入打包输出的所有资源（js/css）
        new htmlWebpackPlugin({

            // 复制index.html 自动引入功能
            template: './src/index.html'
        }),
        new miniCssExtractPlugin({
            // 对打包的css重命名
            filename: 'css/built.css'
        }),
        // 压缩css
        new optimizeCssAssetsWebpackPlugin()
    ],


    // 模式
    mode: 'development' ,  // production


    // 开发服务器  热更新
    // 特点： 只会在内存中编译打包。不会有任何输出  启动指令：webpack-dev-server
    devServer: {
        contentBase: resolve(__dirname, 'build'),

        // 启动gzip压缩
        compress: true,

        port: 3000, // 端口号
        open: true, // 自动打开浏览器
    }
}