话接上文继续介绍webpack

1、output具体使用

在 Webpack 中，output 是用来指定打包后的文件输出位置和文件名的配置项。在配置文件中，可以使用 output 属性设置输出选项。

filename:'js/[name].js' 指定输出文件名称+目录

path:resolve(__dirname,'build') 输出文件目录

publicPath：'/'，所有路径引入公共路径前缀。不加为'img/a.jpg'，加上后为'/img/a.jpg',

chunkFilename:'js/[name]_chunk.js' 设置非入口chunk文件名称

library：'[name]',整个库向外暴露的变量名

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

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

libraryTarget：'commjs'

例如，以下是一个简单的 output 配置示例：

const path = require('path');

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};
};

2、Loader

在 Webpack 中，Loader 可以将各种类型的资源转换成 JavaScript 模块。这样，就可以通过 Webpack 的模块打包机制统一对所有的资源进行处理。在配置文件中，可以使用 module.rules 属性来设置对应的 Loader。

test：/.js$/ ,正则匹配文件

多个loader使用use数组方式

use：['style-loader'，'css-loader']

单个loader使用loader

loader：'eslint-loader'

exclude:/node-moudles/ ，排除node-modules文件中的js文件不检测

include：resolve(__dirname,'src')，只检查src下的js文件

enforce：'pre'，优先执行

enforce：'post'，延后执行

options ：{}，对象配置

例如，以下是一个简单的 Loader 配置示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

3、resolve解析模块的规则

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

alias：{$css:resolve(__diename,'src/css')}引入的时候可以将src/css替换为$css

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

extension：['.js','.json','.css’],引入文件时不用书写后缀名

c、告诉webpack解析模块去找那个目录

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

4、devServer

devServer是一个提供开发环境的服务器。它可以监听文件的更改并实时重新加载页面，同时支持热模块替换（hot module replacement）功能。在配置文件中，可以使用devServer选项来配置开发服务器的行为。

运行代码的目录

cotentBase：resolve(__dirname,'build'),

监视cotentBase目录下所有文件，一旦发生改变就会重新reload

watchCountBase：true，

配置忽略文件

watchOption：{ignored：/node-module/}

启动gzip压缩

compress：true

设置端口号

port：5000

设置域名

host：'localhost'

设置自动打开浏览器

open：true

开启HMR功能

hot：true

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

clientLoglevel：'none'

设置除了一些基本信息以外其他的都不显示

quiet：true

设置出错后不要全屏提示

overlay：false

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

5、优化（optimization）

默认值可以不用修改

splitChunk提取公共代码生成单独chunk打包

6、runtimeChunk解决一个文件修改导致其他js文件缓存失效的问题

7、安装terser库 npm I terser-webpack-plugin –D

Terser是一个用于压缩JavaScript代码的工具。在Webpack中，可以使用TerserPlugin插件来压缩生成的JavaScript文件，以减小文件大小，加快页面加载速度。

生产环境下更好的压缩文件配置：

结尾

通过阅读上下两篇文章，你应该已经理解了webpack的核心概念和工作原理，理解了loader和plugin的作用以及如何使用它们，并且熟悉了webpack的配置文件，了解了如何根据实际需求进行配置、压缩和优化代码。最后希望本文对你有所帮助，让你更好的掌握webpack的技能，并在实际开发中灵活应用。

浅聊webpack——新手应该知道的内容（下）