webpack基本配置

/*
Webpack是一种前端资源构建工具，一个静态资源打包器。
在Webpack看来，前端所有的资源文件js、css、json、img、less都会作为模块处理。
它根据模块的依赖关系进行静态分析，打包生成对应的静态文件。

Webpack五大核心概念
1.Entry
入口指示 Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图
2.Output
输出指示 Webpack打包后的资源 bundles输出到哪里去，以及如何命名
3.Loder
让Webpack能够去处理那些非js文件
4.Plugins
Plugin是（插件）可以用于执行范围更广的任务，插件的范围包括从打包优化和压缩，一直重新定义环境中的的变量等
5.Mode
模式指示 Webpack使用相应的模式配置（development、production）
*/

const { resolve } = require("path");
// const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: resolve(__dirname, "build"),
  },
  module: {
    rules: [
      //   { test: /\.css$/, use: ["style-loader", "css-loader"] },
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
      {
        //排除资源
        //   exclude:/\.(css|js|html)$/,
        // options: {
        //   name: "[hash:10].[ext]",
        // outputPath:"",
        // },
      },
    ],
  },
  //   plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
  mode: "development",
  //开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
  //特点：只会在内存中编译打包，不会有任何输出
  //启动devServer指令为：npx webpack-dev-server
  devServer: {
    // contentBase: resolve(__dirname, "build"),移除
    static: resolve(__dirname, "build"),
    //启动gzip压缩
    compress: true,
    //端口号
    port: 3000,
    //自动打开浏览器
    open: true,
  },
};