[ webpack ] webpack 构建基本参数配置

基本原理

每个前端项目或者说每一个HTML页面，都有着不同的静态资源，其中js文件有相互之间又有着不同的依赖，img图片需要进行图片压缩合并，css文件有需要进行浏览器样式的兼容写法，这些都可以通过webpack这个工具把所有不同的文件用一个引子进行打包最终生成一份 html ，css ，以及图片资源。构建之后的文件，就是发布到线上的最终文件，也成为发布文件。

核心概念之 ：entry

入口文件就是webpack进行构建的入口文件，格式是一个字符串

当需要对多个文件进行构建的时候，entry格式是一个对象，这种情况是最常用的，在日常开发中，每一个功能模块都会构建成单独的js，这样也是减少构建后对代码的影响，举个例子就是，我们的项目通常修改一个代码之后，只要改动当前模块的js而不是这个项目的代码全部进行改动，只改动那个模块的代码上线也只是发那个模块的js即可。

核心概念之 ： output

输出文件就是webpack进行构建后生成的构建代码目录，格式是一个字符串

多个文件的情况下是使用一个对象，和一个 name 的占位符进行标记

最终构建

核心概念之 ：Loaders

webpack 开箱即用能支持的只有JS文件和 JSON 文件，而其他的文件像图片文件 jpg png 或者是 css 文件，这一些就需要使用到Loaders 去支持转换成有效模块。

常用的 Loader

• babel-loader ES6,7等新语法的转换，兼容浏览器。
• css-loader 样式文件的加载和解析
• sass-loader 将sass转换成css，还有less-loader也常用
• ts-loader 将typeScript 转换成JavaScript
• file-loader 进行文件或者字体的打包
• raw-loader 将文件以字符串形式导入
• thread-loader 多进程打包js和css，加快构建速度

Loaders 的使用方法

test 是指定的匹配规则，use 是指 loader的名称

核心概念之：Plugins

插件用于 bundle 文件的优化，资源管理和环境变量注入

插件目的在于解决 loader 不能解决的事情。

比如构建之前删除目录，或者是将构建出来的js文件注入到html文件中，这个就是 plugins做的事情。

常用的 Plugins

• CommonsChunkPlugin 将相同模块的代码合并成一个公用的JS文件
• CleanWebpackPlugin 清理构建目录
• ExtractTextWebpackPlugin 将css从bundle文件中提取出来
• CopyWebpackPlugin 复制文件到构建目录
• HtmlWebpackPlugin 生成 html 文件去承载输出的 js文件
• UglifyjsWebpackPlugin 压缩 js
• ZipWebpackPlugin 将构建资源打成一个 zip包

Plugin 使用方法

核心概念之 ：Mode

用来指定当前构建的环境，是 开发环境还是生产环境，参数分别是 development ， production，还有 none。默认是 production。

内置功能描述

如果配置的是 development ，大致上他会加载一个便于debugger 的plugin，查看出现问题的模块，日过配置的是 production ，那么他会加载一些压缩，检查代码等优化代码的 Plugin。

webpack基础应用

编译ES6格式

在module下增加一个rule，use ：babel-loader，而babel-loader是依赖 .babelrc配置文件的。所以，要在项目中增加一个 .babelrc文件。同时 安装一下

npm install @babel/core @babel/preset-env babel-loader --save-dev

编译 React JSX 语法

在.babelrc 原有基础上增加 @babel/preset-react

编译 css 样式文件

css-loader 用于加载 .css 文件，并且将css 文件转换为 commonjs 对象

style-loader 将样式转换为 style 标签插入到 head 中，同样先安装一下

npm install style-loader css-loader --save-dev

在module 中的规则再引入 style-loader 和 css-loader ，这里需要提一下的是，loader的调用是链式调用顺序也是从右到左，所以在这里需要将style-loader放前面。

这样的话他会先执行css-loader，先把css-loader进行解析然后传给style-loader，把样式注入到html中。

但是，现在的开发一般会直接构建css的不多，像我的习惯是用 sass 进行开发，所以用编译sass就是在原来的的基础上加上 sass-loader

编译文件

file-loader 就是用于编译文件的，比如图片，字体

编译字体

可以用 file-loader 或者 url-loader

文件监听

在正常开发的过程中，如果每一次都要手动构建再去看效果的话，这样会很繁琐。所以，就可以使用webpack 的 watch 功能，在修改完代码之后，就可以自动构建。

在 webpack 后面再增加 -watch 命令即可。

watch-dev-serve

上面提到的 watch 方法 ，虽然可以监听变化在刷新页面的时候可以更新，但是在webpack中，有更好的方法去处理。

WDS 可以在修改代码的时候不用手动刷新页面才能看到效果，而是让他自动构建刷新页面更新

他构建之后代码是放在内存里面而不是在本地生成文件。

使用的是HotModuleReplacementPlugin插件

在改完之后，浏览器就可以看到修改后的效果。当然，小项目可马上看到效果，如果是真实的项目，或者是在大厂接手的大型项目，那么构建还是需要一定时间，并不是改完就可以看到，因为项目很大构建起来就算是苹果电脑也要等一下才能看到效果。

代码压缩

在开发完成之后，上线之前还是要把代码压缩一次，毕竟可以让体积变得更小。

需要压缩的就是 html js 和css 这三个部分

js压缩和css 压缩

js ：uglifyjs-webpack-plugin 这个插件在webpack4中已经内置，构建之后就是默认压缩的。

css ： optimizeCssAssetsWebpackPlugin 需要 cssnano 处理器的配合

html压缩

htmlWebpckPlugin

一个页面配置一个 plugin

配置参数

template：模板所在位置

filename：构建输出文件的名称

文件哈希值

文件哈希值用来做版本的管理，一般文件改动到的话才会改变，如果没有改变文件，那么的哈希值是不会变的。

首先，文件指纹在dev环境中是不需要的，只有线上版本才需要

给webpack 新增一个 dev 和 online 版本，然后在package.json中，增加 --config 。。。的配置，指定构建的config 文件