浅谈webpack

一、 入口起点（entry）

在webpack配置文件中，首先需要一个entry入口文件，这说明我们执行webpack时知道是从哪里开始的；

入口

二、输出口

输出口是将入口文件进行了输出，若是有多个入口文件，可以用[name].js的方式进行输出，使多入口的文件有多个输出的文件名，path是打包后生成文件的路径。

输出口

三、模式

提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。

四、loader

loader是预处理，对源代码进行转换，可以将es6转化为es5,可以将css引入到js中，另外可以将less和scss的文件处理成css文件引入到html中去。

babel-loader：用来处理ES6语法，将其编译为浏览器可以执行的js语法，用exclude除去不要编译的文件

style-loader，css-loader，sass-loader，less-loader：

处理样式文件 如果在JS中导入了css，那么就需要使用 css-loader 来识别这个模块； style-loader 是通过一个JS脚本创建一个style标签，里面包含一些样式，style-loader是不能单独使用的，应为它并不负责解析 css 之前的依赖关系，每个loader的功能都是单一的，各自拆分独立；sass-loader是处理saas文件，less-loader是处理less文件。

use里面有多个loader时，会从下往上执行。

html-loader： 处理html中的img，结合url-loader可以将html中的img的路径正确打包。

还有很多的loader对文件进行处理，这里就不一一举例了。

五、插件（ plugins）

插件的功能比较强大，它主要是用于loader不能够处理的文件，webpack中有很多的插件，但是这些插件是需要在webpack.config.js的文件中进行一些配置才能进行使用的。例如有将js进行拆分，将js和css进行压缩，还有将js和css自动引入到html中，不需要进行手动引入的功能，都需要在webpack中引入插件，然后再配置文件中进行配置就可以使用了。

html-webpack-plugin：对html文件进行的处理

mini-css-extract-plugin： 将css提取到单独的文件中 optimization.splitChunks.cacheGroups属性提取到一个css中 。

optimize-css-assets-webpack-plugin：将CSS进行压缩。

uglifyjs-webpack-plugin： 用来缩小（压缩优化）js文件。

在官网里面还有好多的插件，可以按需引入。

以上是webpack的一些基本内容，希望大家多多提意见帮助小编改正。