webpack.config开发环境，css.less.sacc规则，默认端口号，自定义路径等配置详解

console.log('在node上运行的,执行webpack 命令时候执行');
const path = require('path');

// 自动生成html文件

const HtmlWebpackPlugin = require('html-webpack-plugin');

// css提取成单独的文件

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// webpack搭建的服务工具

// const WebpackDevServer = require('webpack-dev-server');
// 方式一:
module.exports = {
    /**
     * 告诉webpack 当前项目的运行环境
     * development 开发环境滚
     * production  生产环境 
     * 代替命令 webpack --mode=development
     *         webpack --mode=production
     */
    
    mode: "development",
      
    entry: {
        main: "./src/main.js"
    },
    output: {
        path: path.resolve(__dirname, 'dist'), // 配置打包输入目录 默认dist ,绝对路径
        filename: 'bound.js',
    },
    devtool: "hidden-source-map", // 生产
    // devtool:'eval' // 开发环境
    /**
     * module 编写配置所有的loader,
     * loader:作用:解决webpack不能识别的模块,例如 .css .png .less
     * webpack 默认值能识别.js模块
     */
    module: {
        /**
         * rules 规则
         * 值:数组, 表示:可以设置多条规则
         */
        rules: [{
            test: /\.css$/, // 设置匹配模块的文件正则
            /**
             * use
             * 使用loader  
             * 值:数组,表示可是用多个loader 
             * webpack 使用loader 顺序 use数组倒序
             */
            /**
             * css-loader 作用：告诉webapck能够识别 .css模块
             * style-loader 让样式有效展示。
             */
            use: [MiniCssExtractPlugin.loader, 'css-loader', {
                loader: 'postcss-loader', // 使用postcss-loader 处理css兼容性问题
                options: {
                    postcssOptions: { // 通过使用postcss-preset-env帮助 postcss-loader 读取当前运行环境下支持的浏览器，从而实现对css的兼容性适配
                        plugins: ['postcss-preset-env']
                    }
                }
            }]
        }, {
            // less.l
            test: /\.less$/,
            /**
             * less-loader 作用：告诉webpack可以识别.less模块
             */
            use: [MiniCssExtractPlugin.loader, 'css-loader', {
                loader: 'postcss-loader', // 使用postcss-loader 处理css兼容性问题
                options: {
                    postcssOptions: { // 通过使用postcss-preset-env帮助 postcss-loader 读取当前运行环境下支持的浏览器，从而实现对css的兼容性适配
                        plugins: ['postcss-preset-env']
                    }
                }},'less-loader']
        }, {
            // .scss
            test: /\.scss$/,
            /**
             * scss-loader 作用：告诉webpack可以识别.scss模块
             */
            use: [MiniCssExtractPlugin.loader, 'css-loader', {
                loader: 'postcss-loader', // 使用postcss-loader 处理css兼容性问题
                options: {
                    postcssOptions: { // 通过使用postcss-preset-env帮助 postcss-loader 读取当前运行环境下支持的浏览器，从而实现对css的兼容性适配
                        plugins: ['postcss-preset-env']
                    }
                }},'sass-loader']
        }, {
            test: /\.(png|jpg|gif)$/i,
            use: [{
                // html中的img导入的图片不能打包。
                loader: 'url-loader',
                // 需要配置file-loader 才有效
                // options: {
                //     /**
                //      * 1：小于8kb图片，编译为base64格式
                //      *    优点：减少请求次数量，降低服务器压力
                //      *    缺点  文件体积大，加载慢
                //      * 2：大于8kb 编译图片本身
                //      */
                //     limit: 8 * 1024,
                //     /**
                //      * bug:img.src[oject module]
                //      * 原因：因为url-loader 默认是es6模块化解析，而html-loader默认引入图片是common.js
                //      * 解决方式：关闭es6模块化解析，使用common.js解析
                //      */
                //     esModule: false, // 关闭es6模块化解析
                //     /**
                //      * name 给图片重命名
                //      * [hash:10] 获取图片hash值前10为
                //      * [ext] 获取文件的扩展名
                //      * 用在打包输出后为一张图片。
                //      */
                //     name: '[hash:10].[ext]'
                // }
            }]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css', // 配置打包后css文件名，以及路径
        }),
    ],
    
     * 问题：只要修改src下代码，就需要重新打包，重新启动浏览器，并且浏览器是在live serve插件基础上运行的
     * 需求：1：希望浏览器可以自动运行打包后代码。
     *      2：当开发者代码发生更新时候，浏览器页面实时更新
     * 解决：
     *  1：安装webpack-dev-serverr@3.10.3
     *     npm i webpack-dev-server@3.10.3 -D
     *     yarn add webpack-dev-serve@3.10.1
     * 2: 编写devServer配置
    
     * webpack-dev-serave 是一个基于webpack 的服务插件
     * devServer 编写服务 
     */
    devServer:{
        compress: true,
        port: 8080,  // 设置端口号
        contentBase: path.resolve(__dirname, 'dist'), // 设置静态资源路径
        open: true, // 是否自动打开服务器
    },

    /**
     * 解析器resolve
     */
    resolve:{
        // 开发阶段的自定义路径设置
        alias:{
            'css':path.resolve(__dirname,'./src/assets/style/css'),
            "less":path.resolve(__dirname,'./src/assets/style/less'),
            "@":path.resolve(__dirname,'./src')
        }
    }

}