阅读 129

[ webpack ]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 文件

还有css,js ,图片增加指纹等操作,可能已经是深夜,开始疲惫了

基础的就参考文档吧,按文档来准不会错。

文章分类
前端
文章标签