webpack5----1 基础配置

webpack 的基础配置中要掌握五个核心概念

1. entry: 指定从哪里打包
2. output: 指定输出以及如何命名
3. loader: 处理非js 文件
4. plugins: 功能处理
5. mode: 开发环境还是生产环境

下面贴上简单的配置代码 以及注释信息

/**
 * 开发环境
 */

const {resolve} = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 入口起点
  entry: './src/index.js',
  // 出口文件
  output: {
    // 输出文件名
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  // loader 的处理
  module: {
    rules: [
      // 详细loader配置
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        // 使用一个loader
        loader: "url-loader",
        options: {
          // 图片小于 8kb 就处理为 base64
          limit: 8*1024,
          // 关闭es6 模式
          esModule: false,
          // 给图片重命名， ext 取源文件的扩展名
          name: '[hash:10].[ext]',
          // 将图片输出到输出目录的 img 下
          outputPath: 'img'
        },
        
      },
      {
        test: /\.html$/,
        loader:"html-loader"
      },
      {
        exclude: /\.(html|css|less|jpg|png|js|gif)/,
        loader: "file-loader",
        options: {
          name: "[hash:10].[ext]"
        }
      }
    ]
  },
  // plugins 配置
  plugins: [
    // 详细plugins 的配置
    new htmlWebpackPlugin({
      filename: 'index.html',
    })
  ],
  // 模式
  mode: "development",
  // mode: "production"
  
  devServer: {
    // 
    contentBase: resolve(__dirname,'build'),
    // 启动gzip 压缩
    compress: true,
    // 端口号
    port: 3000,
    // 自动打开浏览器
    open: true
  }
}

在上面的配置中要注意 webpack-cli 和webpack-dev-server的版本匹配问题

以上需要下载的依赖

1. npm i webpack webpack-cli -D
2. npm i css-loader style-loader less less-loaser -D
3. npm i html-webpack-plugin -D
4. npm i url-loader file-loader -D
5. npm i html-loader -D
6. npm i webpack-dev-server -D