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

柔情只为你懂 2022-08-31 04:52 227阅读 0赞

基本配置

### 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 ###

配置解析模块路径别名

### 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