webpack葵花宝典!基础配置大全解(下)

一. Entry

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



module.exports = {

    entry: './src/index.js',

    output: {

        filename: '[name].js',

        path: resolve(__dirname, 'build')

    },

    module: {

        rules:[]

    },



    plugins:[],

    mode: 'production'

}
  1. string

string –> ‘./src/index.js’

entry: './src/index.js',

单入口

打包形成一个chunk。 输出一个bundle文件。

此时chunk的名称默认是 main

  1. array

array –> [‘./src/index.js’, ‘./src/add.js’]

entry: ['./src/index.js', './src/add.js'],

多入口

所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。

–> 只有在HMR功能中让html热更新生效~

  1. object

entry: {

    index: './src/index.js',

    add: './src/add.js'

},

多入口

有几个入口文件就形成几个chunk,输出几个bundle文件

此时chunk的名称是 key

webpack葵花宝典!基础配置大全解(下)

  1. 特殊用法

所属入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。

entry: {

    index: ['./src/index.js', './src/test.js'], 

    add: './src/add.js'

},





 index: ['./src/index.js', './src/count.js'], 

add: './src/add.js'

//形成一个chunk,输出一个bundle文件。

webpack葵花宝典!基础配置大全解(下)

特殊用法:可以将react相关插件或者vue相关插件放到一起,打包到一个文件。

例如:

entry: {

    jquery: ['jquery'],

    react: ['react', 'react-dom', 'react-router-dom']

}

// 可以分别打包到一个文件

二. Output

  1. filename

输出文件名称(指定名称+目录)

filename: 'js/[name].js'
  1. path

输出文件目录(将来所有资源输出的公共目录)

path: resolve(__dirname, 'build'),
  1. publicPath

所有资源引入公共路径前缀 。

例如:’imgs/a.jpg’ –> ‘/imgs/a.jpg’

publicPath: '/',

加入publicPath后,index.html中引入的js文件:

webpack葵花宝典!基础配置大全解(下)

未加入的js文件:

webpack葵花宝典!基础配置大全解(下)

  1. chunkFilename

非入口chunk的名称

chunkFilename: 'js/[name]_chunk.js',

在js文件中通过import引入后:

import('./add').then(({ default: add }) => {

  console.log(add(1, 2));

});

打包结果:

[name]与打包输出文件重复,所以取打包文件的id命名。

webpack葵花宝典!基础配置大全解(下)

5. library

整个库向外暴露的变量名,一般同dll结合使用

library: '[name]'

6. libraryTarget

变量名添加到哪个位置

libraryTarget: 'window' // 变量名添加到哪个上 browser

libraryTarget: 'global' // 变量名添加到哪个上 node

libraryTarget: 'commonjs' //以commonjs

webpack葵花宝典!基础配置大全解(下)

webpack葵花宝典!基础配置大全解(下)

三. Module

  1. loader三种写法:

module: {

    rules: [

        // 一

        {

            test: /.css$/,

            use: [

                {

                    loader: 'css-loader'

                }

            ]

        }

        // 二

        {

            test: /.css$/,

            loader: 'css-loader'

        }

        // 三

        {

            test: /.css$/,

            use: ['css-loader']

        }

    ]

}

用于配置loader

  1. include

只检查 src 下的js文件

include: resolve(__dirname, 'src'),
  1. exclude

排除node_modules下的js文件

exclude: /node_modules/,
  1. enforce

执行顺序

// 优先执行

enforce: 'pre',

// 延后执行

enforce: 'post',
  1. loader
// 单个loader用loader

loader: 'eslint-loader',
  1. oneOf

只会匹配一次

{

    // 以下配置只会生效一个

    oneOf: []

}

整体配置:

module: {

    rules: [

      // loader的配置

      {

        test: /.css$/,

        // 多个loader用use

        use: ['style-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',

        options: {}

      },

      {

        // 以下配置只会生效一个

        oneOf: []

      }

    ]

  },

四. Resolve

解析模块的规则

  1. alias

简写文件路径,配置解析模块路径别名。

优点:简写路径

缺点:路径没有提示

alias: {

  $css: resolve(__dirname, 'src/css')

},

配置别名后,可以在打包入口文件简写引入的css文件:

import '$css/index.css';

会自动拼接,寻找路径:src/css/index.css

  1. extensions

配置省略文件路径的后缀名

extensions: ['.js', '.json', '.jsx', '.css'],

配置后对于没有配置后缀名的文件会自动依次从前往后进行寻找:

import '$css/index';

配置后尽量不要文件重名,可能会导致查找文件错误。

  1. modules

告诉 webpack 解析模块是去找哪个目录

modules: ['node_modules']



// 指定路径

modules: [resolve(__dirname, '../../node_modules'), 'node_modules']

整体配置:

resolve: {

    // 配置解析模块路径别名: 优点简写路径 缺点路径没有提示

    alias: {

      $css: resolve(__dirname, 'src/css')

    },

    // 配置省略文件路径的后缀名

    extensions: ['.js', '.json', '.jsx', '.css'],

    // 告诉 webpack 解析模块是去找哪个目录

    modules: [resolve(__dirname, '../../node_modules'), 'node_modules']

}

五. devServer

  1. contentBase

运行代码的目录

contentBase: resolve(__dirname, 'build'),
  1. watchContentBase

监视 contentBase 目录下的所有文件,一旦文件变化就会 reload

watchContentBase: true,
  1. watchOptions

监听watchContentBase的忽略文件

watchOptions: {

  ignored: /node_modules/

},
  1. compress

启动gzip压缩

  1. port

端口号

port: 5000,
  1. host

域名

host: 'localhost',
  1. open

自动打开浏览器

open: true,
  1. hot

hot: true,
  1. clientLogLevel

不要显示启动服务器日志信息

clientLogLevel: 'none',
  1. quiet

除了一些基本启动信息以外,其他内容都不要显示

quiet: true,
  1. overlay

如果出错了,不要全屏提示

overlay: false,
  1. proxy

跨域代理

proxy: {

  // 一旦devServer(5000)服务器接受到 /api/xxx 的请求,就会把请求转发到另外一个服务器(3000)

  '/api': {

    target: 'http://localhost:3000',

    // 发送请求时,请求路径重写:将 /api/xxx --> /xxx (去掉/api)

    pathRewrite: {

      '^/api': ''

    }

  }

}

整体配置:

devServer: {

    // 运行代码的目录

    contentBase: resolve(__dirname, 'build'),

    // 监视 contentBase 目录下的所有文件,一旦文件变化就会 reload

    watchContentBase: true,

    watchOptions: {

      // 忽略文件

      ignored: /node_modules/

    },

    // 启动gzip压缩

    compress: true,

    // 端口号

    port: 5000,

    // 域名

    host: 'localhost',

    // 自动打开浏览器

    open: true,

    // 开启HMR功能

    hot: true,

    // 不要显示启动服务器日志信息

    clientLogLevel: 'none',

    // 除了一些基本启动信息以外,其他内容都不要显示

    quiet: true,

    // 如果出错了,不要全屏提示~

    overlay: false,

    // 服务器代理 --> 解决开发环境跨域问题

    proxy: {

      // 一旦devServer(5000)服务器接受到 /api/xxx 的请求,就会把请求转发到另外一个服务器(3000)

      '/api': {

        target: 'http://localhost:3000',

        // 发送请求时,请求路径重写:将 /api/xxx --> /xxx (去掉/api)

        pathRewrite: {

          '^/api': ''

        }

      }

    }

  }

六. optimization

配置代码分割

  1. splitChunks

分割模块包的详细配置(默认配置)

splitChunks: {

      chunks: 'all'

      // 默认值,可以不写~

      /* 

      minSize: 30 * 1024, // 分割的chunk最小为30kb

      maxSiza: 0, // 最大没有限制

      minChunks: 1, // 要提取的chunk最少被引用1次

      maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量

      maxInitialRequests: 3, // 入口js文件最大并行请求数量

      automaticNameDelimiter: '~', // 名称连接符

      name: true, // 可以使用命名规则

      cacheGroups: {

        // 分割chunk的组

        // node_modules文件会被打包到 vendors 组的chunk中。--> vendors~xxx.js

        // 满足上面的公共规则,如:大小超过30kb,至少被引用一次。

        vendors: {

          test: /[\/]node_modules[\/]/,

          // 优先级

          priority: -10

        },

        default: {

          // 要提取的chunk最少被引用2次

          minChunks: 2,

          // 优先级

          priority: -20,

          // 如果当前要打包的模块,和之前已经被提取的模块是同一个,就会复用,而不是重新打包模块

          reuseExistingChunk: true

        } 

      }*/

    },
  1. runtimeChunk

将当前模块的记录其他模块的hash单独打包为一个文件 runtime

修改a文件导致b文件的contenthash变化

解决:

runtimeChunk: {

  name: entrypoint => `runtime-${entrypoint.name}`

},
  1. minimizer

修改配置生产环境的压缩方案:js和css

minimizer: [

  // 配置生产环境的压缩方案:js和css

  new TerserWebpackPlugin({

    // 开启缓存

    cache: true,

    // 开启多进程打包

    parallel: true,

    // 启动source-map

    sourceMap: true

  })

]

整体配置:

optimization: {

    splitChunks: {

      chunks: 'all'

      // 默认值,可以不写~

      /* 

      minSize: 30 * 1024, // 分割的chunk最小为30kb

      maxSiza: 0, // 最大没有限制

      minChunks: 1, // 要提取的chunk最少被引用1次

      maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量

      maxInitialRequests: 3, // 入口js文件最大并行请求数量

      automaticNameDelimiter: '~', // 名称连接符

      name: true, // 可以使用命名规则

      cacheGroups: {

        // 分割chunk的组

        // node_modules文件会被打包到 vendors 组的chunk中。--> vendors~xxx.js

        // 满足上面的公共规则,如:大小超过30kb,至少被引用一次。

        vendors: {

          test: /[\/]node_modules[\/]/,

          // 优先级

          priority: -10

        },

        default: {

          // 要提取的chunk最少被引用2次

          minChunks: 2,

          // 优先级

          priority: -20,

          // 如果当前要打包的模块,和之前已经被提取的模块是同一个,就会复用,而不是重新打包模块

          reuseExistingChunk: true

        } 

      }*/

    },

    // 将当前模块的记录其他模块的hash单独打包为一个文件 runtime

    // 解决:修改a文件导致b文件的contenthash变化

    runtimeChunk: {

      name: entrypoint => `runtime-${entrypoint.name}`

    },

    minimizer: [

      // 配置生产环境的压缩方案:js和css

      new TerserWebpackPlugin({

        // 开启缓存

        cache: true,

        // 开启多进程打包

        parallel: true,

        // 启动source-map

        sourceMap: true

      })

    ]

  }

原文链接:https://juejin.cn/post/7345746216151203878 作者:小黄瓜没有刺

(0)
上一篇 2024年3月14日 上午10:01
下一篇 2024年3月14日 上午10:13

相关推荐

发表评论

登录后才能评论