webpack葵花宝典！基础配置大全解（下）

一. Entry

js 复制代码

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



module.exports = {

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

    output: {

        filename: '[name].js',

        path: resolve(__dirname, 'build')

    },

    module: {

        rules:[]

    },



    plugins:[],

    mode: 'production'

}

string

string --> './src/index.js'

js 复制代码

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

单入口

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

此时chunk的名称默认是 main

array

array --> ['./src/index.js', './src/add.js']

arduino 复制代码

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

多入口

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

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

object

js 复制代码

entry: {

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

    add: './src/add.js'

},

多入口

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

此时chunk的名称是 key

特殊用法

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

js 复制代码

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相关插件放到一起，打包到一个文件。

例如：

js 复制代码

entry: {

    jquery: ['jquery'],

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

}

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

二. Output

filename

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

js 复制代码

filename: 'js/[name].js'

path

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

js 复制代码

path: resolve(__dirname, 'build'),

publicPath

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

例如：'imgs/a.jpg' --> '/imgs/a.jpg'

js 复制代码

publicPath: '/',

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

未加入的js文件：

chunkFilename

非入口chunk的名称

js 复制代码

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

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

js 复制代码

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

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

});

打包结果：

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

5. library

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

js 复制代码

library: '[name]'

6. libraryTarget

变量名添加到哪个位置

js 复制代码

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

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

libraryTarget: 'commonjs' //以commonjs

三. Module

loader三种写法：

js 复制代码

module: {

    rules: [

        // 一

        {

            test: /.css$/,

            use: [

                {

                    loader: 'css-loader'

                }

            ]

        }

        // 二

        {

            test: /.css$/,

            loader: 'css-loader'

        }

        // 三

        {

            test: /.css$/,

            use: ['css-loader']

        }

    ]

}

用于配置loader

include

只检查 src 下的js文件

js 复制代码

include: resolve(__dirname, 'src'),

exclude

排除node_modules下的js文件

js 复制代码

exclude: /node_modules/,

enforce

执行顺序

js 复制代码

// 优先执行

enforce: 'pre',

// 延后执行

enforce: 'post',

loader

js 复制代码

// 单个loader用loader

loader: 'eslint-loader',

oneOf

只会匹配一次

js 复制代码

{

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

    oneOf: []

}

整体配置：

js 复制代码

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

解析模块的规则

alias

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

优点：简写路径

缺点：路径没有提示

js 复制代码

alias: {

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

},

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

js 复制代码

import '$css/index.css';

会自动拼接，寻找路径：src/css/index.css

extensions

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

js 复制代码

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

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

js 复制代码

import '$css/index';

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

modules

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

js 复制代码

modules: ['node_modules']



// 指定路径

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

整体配置：

js 复制代码

resolve: {

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

    alias: {

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

    },

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

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

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

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

}

五. devServer

contentBase

运行代码的目录

js 复制代码

contentBase: resolve(__dirname, 'build'),

watchContentBase

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

js 复制代码

watchContentBase: true,

watchOptions

监听watchContentBase的忽略文件

js 复制代码

watchOptions: {

  ignored: /node_modules/

},

compress

启动gzip压缩

port

端口号

js 复制代码

port: 5000,

host

域名

js 复制代码

host: 'localhost',

open

自动打开浏览器

js 复制代码

open: true,

hot

js 复制代码

hot: true,

clientLogLevel

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

js 复制代码

clientLogLevel: 'none',

#### quiet

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

js 复制代码

quiet: true,

#### overlay

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

js 复制代码

overlay: false,

#### proxy

跨域代理

js 复制代码

proxy: {

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

  '/api': {

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

    // 发送请求时，请求路径重写：将 /api/xxx --> /xxx （去掉/api）

    pathRewrite: {

      '^/api': ''

    }

  }

}

整体配置：

js 复制代码

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

配置代码分割

splitChunks

分割模块包的详细配置（默认配置）

js 复制代码

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

        } 

      }*/

    },

runtimeChunk

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

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

解决：

js 复制代码

runtimeChunk: {

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

},

minimizer

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

js 复制代码

minimizer: [

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

  new TerserWebpackPlugin({

    // 开启缓存

    cache: true,

    // 开启多进程打包

    parallel: true,

    // 启动source-map

    sourceMap: true

  })

]

整体配置：

js 复制代码

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

      })

    ]

  }