2. Webpack配置文件讲解

配置文件的作用

• 配置文件是用来简化命令行选项的

  例如：
  有时候我们一个命令会很长
  配置前：webpack ./src/index.js --output-path ./dist --mode=development
  当我们使用了配置后，就可以用很简单的命令来执行：
  webpack

• 默认的配置文件名称是 webpack.config.js

  webpack.config.js是以CommonJS规范进行组织的
  使用Webpack的过程，大部分就是跟配置文件打交道的过程

配置详情

https://webpack.docschina.org/configuration/

Webpack配置文件-常用配置项

• mode （模式）
• entry （入口）
• output （出口）
• module （模块配置-不同类型文件的配置 -loader配置）
  plugins （插件）
  devServer （开发服务器的配置）

一个简单的配置文件例子：

/**
 * Webpack 的配置文件
 */
const { resolve } = require('path')
module.exports = {
    // 打包模式
    mode : 'development',
    // 入口文件
    entry : './src/index.js',
    // 出口配置
    output : {
        // 输出目录(输出目录必须是绝对路径)
        path : resolve(__dirname, 'dist'),
        // 输出文件的名称
        filename : 'main.js'
    },

    // 模块配置
    module : {
        rules : [
            // 指定多个配置规则
        ]
    },

    // 开发服务器
    devServer : {

    },

    // 插件配置
    pluguns : [

    ]
}