概念

webpack是一个静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块，将项目打包成一个或多个文件。

安装

npm init -y
npm install webpack webpack-cli --save-dev

webpack.config.js常用的配置说明

entry

作用

项目打包的入口文件，类似c语言的main函数
webpack将从这个入口文件里面所有引用到的资源开始打包。

webpack配置文档

output

作用

设置项目打包后文件的存放方式。
1、设置引用文件的存放路径,比如图片、css、js等
2、设置文件命名格式

webpack配置文档

module(loader)

作用

用于对模块的源代码进行转换。
转换的原因：webpack只认知js与json文件，其他文件都不认识。
需要使用npm包来将他们转成js文件。
比如将源码中的文件css、vue、ts等文件，通过对应的loader转成js。

webpack配置文档

plugins

作用

解决module(loader)无法完成的事情，
例如创建html文件，分离css文件、删除提示代码等。

webpack配置文档

devServer

作用

内置一个服务器，方便程序员在本地进行开发。

安装文档 webpack配置文档

mode

作用

设置打包的模式，
development为开发下的打包模式，打包后如果有报错有相关提示
production为生产下的打包模式，打包后没有提示，但是代码会有压缩。

webpack配置文档

resolve

作用

告诉webpack，如何去解析引用的模块（文件）。
比如 使用别名来解析模块.
resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
    },
  },

import Utility from '../../utilities/utility';
等于下面
import Utility from 'Utilities/utility';

webpack配置文档

target

作用

它会根据你的构建目标，来进行不同的打包操作。
比如打包目标为‘web’，则打包成网页包。
打包目标为'node'，则打包成npm包。
不同的目标可以避免打包进v8提供的本身就有的api

webpack配置文档

optimization

作用

根据这个对象，来手动进行打包优化。

webpack配置文档