每个前端项目或者说每一个HTML页面,都有着不同的静态资源,其中js文件有相互之间又有着不同的依赖,img图片需要进行图片压缩合并,css文件有需要进行浏览器样式的兼容写法,这些都可以通过webpack这个工具把所有不同的文件用一个引子进行打包最终生成一份 html ,css ,以及图片资源。构建之后的文件,就是发布到线上的最终文件,也成为发布文件。
入口文件就是webpack进行构建的入口文件,格式是一个字符串
当需要对多个文件进行构建的时候,entry格式是一个对象,这种情况是最常用的,在日常开发中,每一个功能模块都会构建成单独的js,这样也是减少构建后对代码的影响,举个例子就是,我们的项目通常修改一个代码之后,只要改动当前模块的js而不是这个项目的代码全部进行改动,只改动那个模块的代码上线也只是发那个模块的js即可。
输出文件就是webpack进行构建后生成的构建代码目录,格式是一个字符串
多个文件的情况下是使用一个对象,和一个 name 的占位符进行标记
最终构建
webpack 开箱即用能支持的只有JS文件和 JSON 文件,而其他的文件像图片文件 jpg png 或者是 css 文件,这一些就需要使用到Loaders 去支持转换成有效模块。
test 是指定的匹配规则,use 是指 loader的名称
插件用于 bundle 文件的优化,资源管理和环境变量注入
插件目的在于解决 loader 不能解决的事情。
比如构建之前删除目录,或者是将构建出来的js文件注入到html文件中,这个就是 plugins做的事情。
用来指定当前构建的环境,是 开发环境还是生产环境,参数分别是 development , production,还有 none。默认是 production。
内置功能描述
如果配置的是 development ,大致上他会加载一个便于debugger 的plugin,查看出现问题的模块,日过配置的是 production ,那么他会加载一些压缩,检查代码等优化代码的 Plugin。
在module下增加一个rule,use :babel-loader,而babel-loader是依赖 .babelrc配置文件的。所以,要在项目中增加一个 .babelrc文件。同时 安装一下
npm install @babel/core @babel/preset-env babel-loader --save-dev
在.babelrc 原有基础上增加 @babel/preset-react
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 方法 ,虽然可以监听变化在刷新页面的时候可以更新,但是在webpack中,有更好的方法去处理。
WDS 可以在修改代码的时候不用手动刷新页面才能看到效果,而是让他自动构建刷新页面更新
他构建之后代码是放在内存里面而不是在本地生成文件。
使用的是HotModuleReplacementPlugin插件
在改完之后,浏览器就可以看到修改后的效果。当然,小项目可马上看到效果,如果是真实的项目,或者是在大厂接手的大型项目,那么构建还是需要一定时间,并不是改完就可以看到,因为项目很大构建起来就算是苹果电脑也要等一下才能看到效果。
在开发完成之后,上线之前还是要把代码压缩一次,毕竟可以让体积变得更小。
需要压缩的就是 html js 和css 这三个部分
js :uglifyjs-webpack-plugin 这个插件在webpack4中已经内置,构建之后就是默认压缩的。
css : optimizeCssAssetsWebpackPlugin 需要 cssnano 处理器的配合
htmlWebpckPlugin
一个页面配置一个 plugin
配置参数
template:模板所在位置
filename:构建输出文件的名称
文件哈希值用来做版本的管理,一般文件改动到的话才会改变,如果没有改变文件,那么的哈希值是不会变的。
首先,文件指纹在dev环境中是不需要的,只有线上版本才需要
给webpack 新增一个 dev 和 online 版本,然后在package.json中,增加 --config 。。。的配置,指定构建的config 文件
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。