webpack入门5----基础配置详情

基本配置

1.entry

打包入口

有以下三种打包方式：单字符串、数组、对象
    1. string --> './src/index.js'
      单入口
      打包形成一个chunk。 输出一个bundle文件。
      此时chunk的名称默认是 main
    2. array  --> ['./src/index.js', './src/add.js']
      多入口
      所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
        --> 只有在HMR功能中让html热更新生效~
    3. object
      多入口
      有几个入口文件就形成几个chunk，输出几个bundle文件
      此时chunk的名称是 key

      --> 特殊用法
        {
          // 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
          index: ['./src/index.js', './src/count.js'],
          // 形成一个chunk，输出一个bundle文件。
          add: './src/add.js'
        }

webpack.config.js配置：

module.exports = {
  // entry: './src/index.js',
  // entry: ['./src/index.js', './src/add.js'],
  // entry: {
  //   index: './src/index.js',
  //   add: './src/add.js',
  // },
  // 特殊用法
  entry: {
    index: ['./src/index.js', './src/count.js'],
    add: './src/add.js',
  },
  output: {
    filename: '[name].js',
    path: resolve(__dirname, 'build'),
  },
  plugins: [
    new HtmlWebpackPlugin(),
  ],
  mode: 'development',
};

2.output

文件出口 output

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { count } = require('console');

module.exports = {
  entry: './src/index.js',
  output: {
    // 文件名称（指定名称+目录）
    filename: 'js/[name].js',
    // 输出文件目录（将来所有资源的公共目录）
    path: resolve(__dirname, 'build'),
    // 所有输出资源的引入公共路径前缀  --> 'imgs/a.jpg'--> '/imgs/a.jpg'
    publicPath: '/', // 公共资源引入的公共路径，用于生产环境
    chunkFilename: 'js/[name]_chunk.js', // 非入口chunk的名称
    // library正常使用是dll加整个库，，所以在只打包的情况下是不需要library的
    // library: '[name]', // 整个库向外暴露的变量名
    // libraryTarget: 'window', // 变量名添加到哪个上：browser
    // libraryTarget: 'global', // 变量名添加到哪个上：node
    // libraryTarget: 'commonjs', // 或amd等都可以设置
  },
  plugins: [
    new HtmlWebpackPlugin(),
  ],
  mode: 'development',
};

3.module

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/[name].js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      // loader配置
      {
        test: /\.css$/,
        // 多文件用use
        use: ['stylle-loader', 'css-loader'],
      },
      {
        test: /\.js$/,
        // 排除node_modules下的js文件
        exclude: /node_modules/,
        // 只检查src下的js文件
        include: resolve(__dirname, 'src'),
        // 优先执行
        // enforce: 'pre',
        // 延后执行   不写的话就中间执行
        enforce: 'post',
        // 单个loader用loader
        loader: 'eslint-loader',
        // 用于配置loader
        options: {},
      },
      {
        // 以下配置只会生效一个
        oneOf: [],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin(),
  ],
  mode: 'development',
};

4.resolve

配置解析模块路径别名

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

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/[name].js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin(),
  ],
  mode: 'development',
  // 解析模块的规则
  resolve: {
    // 配置解析模块路径别名
    // 优点：简写路径
    // 缺点：路径没有提示

    // 验证这一段，编译正常没有报错，可能这个配置有问题，需要再查资料看看
    alias: { // 简写路径
      $css: resolve(__dirname, 'src/css'),
    },
    // 配置省略文件路径的后缀名
    extensions: ['.js', '.json', '.css'], // 简写文件名
    // 告诉webpack 解析模块失去找哪个个目录
    modules: [resolve(__dirname, '../../node_modules'), 'node_modules'], // 迅速找到node_modules所在
  },
};

5.dev server

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

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/[name].js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin(),
  ],
  mode: 'development',
  // 解析模块的规则
  resolve: {
    alias: {
      $css: resolve(__dirname, 'src/css'),
    },
    extensions: ['.js', '.json', '.css'],
    modules: [resolve(__dirname, '../../node_modules'), 'node_modules'], // 迅速找到node_modules所在
  },
  devServer: {
    // 运行代码的目录
    contentBase: resolve(__dirname, 'build'),
    // 监视contentBase目录下的所有文件，一旦文件变化就会reload
    watchContentBase: true,
    watchOptions: {
      // 忽略文件   不要监视node_modules
      ignored: /node_modules/,
    },
    // 启动gzip压缩
    compress: true,
    // 端口
    port: 5000,
    // 域名
    host: 'localhost',
    // 自动打开浏览器
    open: true,
    // 开启HMR
    hot: true,
    // 不要显示启动服务器日志信息
    clientLogLevel: 'none',
    // 除了一些基本启动信息外，其他内容都没有显示
    quite: true,
    // 如果出错了，不要全屏提示
    overlay: false,
    // 服务器代理 --> 解决开发环境跨域问题
    proxy: {
      // 一旦devServer(5000)服务器接收到 /api/xxx的请求，就会把请求转发到另一个服务器(3000)
      './api': {
        target: 'http://localhost:3000/',
        // 发送请求时，请求路径重写：将/api/xxx-> /xxx(去掉/api)
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
};

6.optimization

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/[name].[contenthash:10].js',
    path: resolve(__dirname, 'build'),
    chunkFilename: 'js/[name].[contenthash:10]_chunk.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin(),
  ],
  mode: 'production',
  // 解析模块的规则
  resolve: {
    alias: { // 简写路径
      $css: resolve(__dirname, 'src/css'),
    },
    // 配置省略文件路径的后缀名
    extensions: ['.js', '.json', '.css'], // 简写文件名
    // 告诉webpack 解析模块失去找哪个个目录
    modules: [resolve(__dirname, '../../node_modules'), 'node_modules'], // 迅速找到node_modules所在
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      // 默认值，可以不写~~~
      // minSize: 30 * 1024, // 分割的chunk最小为30kb
      // maxSize: 0, // 最大没有限制
      // minChunks: 1, // 要提取的chunk最少被引用一次
      // maxAsyncRequests: 5, // 按需加载时并行加载的文件最大数量
      // maxInitialRequests: 3, // 入口js文件最大并行请求数量
      // automaticNameDelimiter: '~', // 名称连接符
      // name: true, // 可以使用命名规则
      // cacheGrups: { // 分割chunk的组
      //   // node_modules文件会被打包到verdors组中的chunk中。 ---> verdors~xxx.js
      //   // 满足上面的公共规则，如大小超过30kb，至少被引用一次
      //   vendors: { // 分割chunk的规则
      //     test: /[\\/]node_modules[\\/]/, // 检测node_modules下文件夹
      //     // 优先级
      //     priority: -10,
      //   },
      //   default: {
      //     // 要提取的chunk至少被引用2次
      //     minChunks: 2,
      //     // 优先级
      //     priority: -20,
      //     // 如果当前要打包的模块，和之前以及被提权的模块是同一个，就会复用，而不是重新打包模块
      //     reuseExistingChunk: true,
      //   },
      // },
    },
    // 为了解决在被引入文件发生变化时，内部编译的hash值变化，导致所有文件都发生变化，为了不让引用该文件的文件变化，所以使用这个方式
    // 将当前模块级联其他模块的hash单独打包为一个文件runtime
    // 解决：修改a文件导致b文件的contenthash变化
    runtimeChunk: {
      name: (entrypoint) => `runtime-${entrypoint.name}`,
    },
    minimizer: [
      // 配置生产环境的压缩方案：js和css
      new TerserWebpackPlugin({
        // 开启缓存
        cache: true,
        // 开启多进程打包
        parallel: true,
        // 启动source-map
        sourceMap: true,
      }),
    ],
  },
};

webpack4和webpack5的对比

webpack4的配置

const { resolve } = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].js',
    path: resolve(__dirname, 'build'),
  },
  mode: 'development',
};

webpack5的配置（现在均为webpack5）

module.exports = {
  mode: 'development',
};

webpack5的优点
    1.webpack5的其他入口出口东西都是默认的
    2.在生产环境下默认有tree shaking