6.0 webpack 开发环境配置

#虽然作为一个前端已经耕耘此行业有三五个年头，但都是在业务中未曾精进，怀着初心，重识Webpack，砥砺前行💪#

img icon-font指定文件路径用 optputPath

css指定路径需要依赖mini-css-extract-plugin，MiniCssExtractPlugin.loader

{
             test: /\.less$/,
             use: [
                 /* 创建style标签，将样式引入 */
                 // 'style-loader',
                 **/* 这个loader 取代style-loader，作用提取js中的css成单独的文件 */
                 MiniCssExtractPlugin.loader,
                 /*** 将css整合到js文件中 */ 
                 'css-loader', 
                 'less-loader'],
         },

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        // loader 配置
        rules: [
            {
                test: /\.css$/,
                use:[
                    // 'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader']
            },
            {
                test: /\.less$/,
                use: [
                    /* 创建style标签，将样式引入 */
                    // 'style-loader',
                    /* 这个loader 取代style-loader，作用提取js中的css成单独的文件 */
                    MiniCssExtractPlugin.loader,
                    /* 将css整合到js文件中 */ 
                    'css-loader', 
                    'less-loader'],
            },
            {
                // 处理以Url()形式引入图片信息 
                test: /\.(jpg|png|gif|jpeg)$/,
                use: [
                    {
                        // 需要url-loader和file-loader 两个包
                        loader: 'url-loader',
                        options: {
                            // 图片大小小于8kb就会被base64处理
                            // 优点： 减少请求数量（减轻服务器压力）
                            // 缺点： 没有在限制内的图片还是会通过服务器请求，因为体积过大，造成文件请求速度变慢
                            limit: 8 * 1024,
                            outputPath: 'imgs',
                            // hash 取文件hash的前10位， ext用文件自己的后缀名
                            name: '[name].[ext]',
                            // 问题： 因为url-loader默认使用es6模块化解析，而html-laoder引入图片是commonjs
                            // 解析时会报错 原本引入的地方会显示成【object Module】
                            // 解决： 关闭url-loader的es6模块化，使用commonjs
                            esModule: false,
                        }
                    }
                ],
                // webpack4 升级到webpack5的配置，防止多打包生成无效引用
                type: 'javascript/auto'
            },
            {
                // 处理img标签引入图片信息
                test: /\.html$/,
                // 处理html文件中的img图片 （负责引入img 从而被url-loader进行处理）
                loader: 'html-loader'
            },
            // 打包其它资源（html,js,css资源以外的资源）
            {
                // 排除css/js/html资源
                exclude: /\.(css|js|html|less|jpg|png|gif|jpeg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[hash:10].[ext]',
                    esModule:false,
                    outputPath: 'media'
                },
                 type: 'javascript/auto'
            }
        ]
    },
    plugins: [
        // plugins 配置
        // 打包html 需要 html-webpack-plugin 包
        new HtmlWebpackPlugin({
            // 定义html 模版入口 自动打包所有的资源（js/css）
            template: './src/index.html',
        }),
        new MiniCssExtractPlugin({
            filename: 'css/built.css',
        }),
    ],
    // 开发服务器devserver ：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
    // 特点：内存中编译打包，不会有任何输出
    // 启动指令： npx webpack-dev-server
    devServer : {
        static: './build',
        // 启动gzip
        compress:true,
        // 端口号
        port:3000,
        //自动打开浏览器
        open:true,
        // 热模块替换
        hot:true
    },
    mode: 'development',
}