简介 | webpack 中文文档

webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。

https://webpack.docschina.org/api/

entry

output

loader

常用的Webpack Loader

• css-loader：让Webpack能够加载并解析CSS文件。

• style-loader：将CSS转换为可在DOM中使用的样式。

• less-loader和sass-loader：让Webpack能够加载并解析Less和Sass文件。

• postcss-loader：'postcss-preset-env' 用来配置浏览器前缀。

• babel-loader：将ES6+代码转换为ES5代码，以便在不支持ES6+的浏览器中运行。一般会用一些babel预设，如preset-react，ts等

• vue-loader：用来编译 .vue 文件

babel-loader | webpack 中文文档

webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。

https://webpack.docschina.org/loaders/babel-loader#root

webpack5资源模块

资源模块 | webpack 中文文档

webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。

https://webpack.docschina.org/guides/asset-modules#inlining-assets

pulgin

HtmlWebpackPlugin

MiniCssExtractPlugin

CleanWebpackPlugin

DefinePlugin

UglifyJsPlugin

CopyWebpackPlugin

mode

模式(Mode) | webpack 中文文档

webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。

https://webpack.docschina.org/configuration/mode

devtool

• eval：使用eval包裹模块代码，生成Data URL形式的source map，适用于开发环境。速度快，但不利于调试。

• cheap-eval-source-map：使用eval包裹模块代码，在每行末尾添加//# sourceURL，适用于开发环境。速度快，且能够正确的映射到源码。

• cheap-module-eval-source-map：与cheap-eval-source-map类似，但能够正确的映射到loader中的源码。

• eval-source-map：使用eval包裹模块代码，生成source map文件，适用于开发环境。能够正确的映射到源码，但速度较慢。

• cheap-source-map：不包含列信息，适用于生产环境。

• cheap-module-source-map：与cheap-source-map类似，但能够正确的映射到loader中的源码。

• source-map：最完整的source map，包含列信息，适用于生产环境。速度较慢，但是能够提供最完整的调试信息。

devServer

• contentBase：如果在webpack依赖中找不到文件，会到这个配置的文件夹中找。用来在开发环境替换 CopyWebpackPlugin，因为在开发环境没有必要进行拷贝。build的时候在拷贝就可以了。一般设置为 ./public

• hmr(hot module replacement)：对模块更新的时候不会对浏览器进行刷新，提高开发效率。 原理是通过socket 长连接进行通信。

• host：打开域名

• port：打开端口

• open：默认打开浏览器

• proxy：解决跨域问题

DevServer | webpack 中文文档

webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。

https://webpack.docschina.org/configuration/dev-server/#devserverproxy

resolve

解析(Resolve) | webpack 中文文档

webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。

https://webpack.docschina.org/configuration/resolve#root

环境分离

生产环境 | webpack 中文文档

webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。

https://webpack.docschina.org/guides/production#setup