webpack.config.js
作用： 指示webpack干哪些活，当你运行webpack指令时，会加载里面的配置
所有的构建工具都是基于nodejs运行的，默认采用commonjs

打包样式资源

依赖: style-loader css-loader less-loader less

const { resolve } = require('path')

module.exports = {
    // webpack的配置
    entry: './src/index.js',
    output: {
        filename: 'js/built.js',
        // _dirname node.js的变量，代表当前文件目录的绝对路径
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块化加入js中，里面的内容都是字符串
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 将less文件编译成css文件
                    'less-loader'
                ]
            }
        ]
    }
}

打包html资源

依赖：html-webpack-plugins

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

plugins: [
        // html-webpack-plugin
        // 功能： 默认会创建一个空的html，自动引入打包输出的所有资源（js/css）
        // 需求: 需要有结构的html文件
        new HtmlWebpackPlugin({
            // 复制'./index.html' 文件 并自动引入打包输出的所有资源（js/css）
            template: './index.html'
        })
    ]

打包图片资源

依赖： (url-loader  file-loader) (html-loader)

     module: {
         rules: [
             // 问题：默认处理不了html中直接引入的img，只能处理css中引入的图片资源
            {
               
               // 处理图片资源
               test: /\.(jpg|png|gif)$/,
               loader: 'url-loader',
               options: {
                   // 图片大小小于369kb，就会被base64处理,放入js文件中
                   // 优点：减少请求数量（减轻服务器压力）
                   // 缺点：图片体积会变更大（文件请求速度更慢）
                   limit: 369 * 1024,
                   // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是common.js
                   // 解析时会出现问题：src路径变为[object Module]
                   // 解决：关闭url-loader的es6模块化，使用commonjs解析
                   esModule: false,
                   // 没有被base64处理的 会输出图片
                   // 给图片进行重命名
                   // [hash: 10]取图片的hash的前10位
                   // [ext]取文件原来拓展名
                   name: '[hash:10].[ext]',
                   // 输出到media下
                   outputPath: 'media'
               },
           },
           // 处理html中引入的图片资源
            {
               test: /\.html$/,
               loader: 'html-loader'
           }
         ]
     }

打包其他资源

   比如字体等一些其他资源，无需压缩优化，直接输出
   依赖： 

module: {
       rules:[
           // 打包其他资源（除了html/js/css资源以外的资源）
           {
               // 排除css/js/html资源
               exclude: /\.(css|js|html)$/,
               loader: 'file-loader',
               options: {
                   name: '[hash:10].[ext]',
                   outputPath: 'media'
               }
           }
       ]
   },

devServer

 依赖：webpack-dev-server
      开发服务器 devServer: 用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
      特点：只会在内存中编译打包，不会有任何输出
      启动devServer指令为：npx webpack-dev-server

  devServer: {
        // 项目构建后的路劲
        contentBase: resolve(__dirname, 'build'),
        // 启动gzip压缩
        compress: true,
        // 端口号
        port:3000,
        // 自动打开浏览器
        open:true
    }