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

2. array

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

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

多入口

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

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

3. object

entry: {

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

    add: './src/add.js'

},

多入口

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

此时chunk的名称是 key

4. 特殊用法

所属入口文件最终只会形成一个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文件。

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

例如：

entry: {

    jquery: ['jquery'],

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

}

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

二. Output

1. filename

输出文件名称（指定名称+目录）

filename: 'js/[name].js'

2. path

输出文件目录（将来所有资源输出的公共目录）

path: resolve(__dirname, 'build'),

3. publicPath

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

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

publicPath: '/',

加入publicPath后，index.html中引入的js文件：

未加入的js文件：

4. chunkFilename

非入口chunk的名称

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

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

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

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

});

打包结果：

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

5. library

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

library: '[name]'

6. libraryTarget

变量名添加到哪个位置

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

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

libraryTarget: 'commonjs' //以commonjs

三. Module

0. 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'),

2. exclude

排除node_modules下的js文件

exclude: /node_modules/,

3. enforce

执行顺序

// 优先执行

enforce: 'pre',

// 延后执行

enforce: 'post',

4. loader

// 单个loader用loader

loader: 'eslint-loader',

5. 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

2. extensions

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

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

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

import '$css/index';

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

3. 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'),

2. watchContentBase

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

watchContentBase: true,

3. watchOptions

监听watchContentBase的忽略文件

watchOptions: {

  ignored: /node_modules/

},

4. compress

启动gzip压缩

5. port

端口号

port: 5000,

6. host

域名

host: 'localhost',

7. open

自动打开浏览器

open: true,

8. hot

hot: true,

9. clientLogLevel

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

clientLogLevel: 'none',

10. quiet

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

quiet: true,

11. overlay

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

overlay: false,

12. 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

        } 

      }*/

    },

2. runtimeChunk

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

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

解决：

runtimeChunk: {

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

},

3. 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 作者：小黄瓜没有刺