愿你能遇到一个城市,容得下你尽情嬉闹。
前言
webpack是非常流行的模块打包工具,而且现在有webpack配置工程师这一职业,随着webpack版本的更新,从webpack3.0到webpack4.0+迁移项目会有很多坑,当然今天不是聊这些坑的,今天主要是重新温习一下webpack配置以及一些功能。
webpack是什么
webpack主要功能就是分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
主要功能包括:
代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
文件优化:压缩 JavaScript、CSS、HTML 代码,压缩合并图片等。
代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
模块合并:在采用模块化的项目里会有很多个模块和文件,需要构建功能把模块分类合并成一个文件。
自动刷新:监听本地源代码的变化,自动重新构建、刷新浏览器。
代码校验:在代码被提交到仓库前需要校验代码是否符合规范,以及单元测试是否通过。
自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统。
npx是什么
webpack4.0+以上推存0配置,而且webpack也一直朝着这个方向发展。webpack4.0+添加了一个webpack-cli;
npx是一个执行npm软件包的二进制文件,通俗的讲,他可以执行npm的一些指令,比如npx webpack 他会执行node_modules下面的bin下的webpack.cmd文件,如果没有安装webpack的话,它会自动安装。但是node版本不低于8.6,npm版本不低于5.2。
npx可以通过npm下载。webpack所说的0配置就是与他相关。当然npx还有很多功能,你可以移驾到npm官网上查看npx。
webpack主要配置
webpack零配置都是执行的默认配置,功能很差,这也导致很多人没听过npx。一般情况下我们都需要自己配置webpack。
webpack主要配置有entry、output、devServer、module、plugins、mode、resolve。
1、如何配置开发服务器?
需要安装一个webpack-dev-server。
在package.json中我们可以配置scripts来指定运行指令,我们通过npm run start来运行这个文件。服务器配置会把我们打包的build.js放在内存中,也就是我们在文件目录下看不到build.js.当我们npm run build 才可以看到。
contentBase是配置服务器运行是的根目录,默认是/,我们可以指定,比如我们在build文件夹建立一个a.json,我们可以在浏览器下面打开a.json;
port是端口号;
compress是服务器体积压缩;
open是自动打开浏览器;
hot是热更新。
2、将html打包到build下,并自动引入生产的js。
html-webpack-plugin会帮我们完成,我们只需在src下建立一个html文件。在配置文件中配置plugins;
html-webpack-plugin接受一个对象options。 常用的配置参数有template(模板路劲)、title(html中title标签需采用ejs写法)、minify(压缩方法)、hash(清除缓冲,我们也可以通过在output中设置build.[hash:8].js)。
3、清理打包文件、配置多入口和多页。
每次打包都会生成build文件,当我们再一次打包就会报错,所以我们需要引入clean-webpack-plugin来清理build文件。
entry可以是一个数组,可以在生成的html中引入两个js文件。同时entry也可以是一个对象,但是要生成多页面我们还需要再 new一个HtmWebpackPlugin,它需要添加一个属性chunks,表示引入的js。还需要注意的一点就是我们需要把输出文件output的filename设置成[name]。否则就会报错。
4、解析、抽离css文件,分离多个css文件
打包css文件,我们会用到style-loader(解析css,变成style标签插进html)、css-loader(把css变成一个模块,插到style便签)、less-loader、less、stylus、stylus-loader、node-sass、sass-loader等等。
抽离css文件,通过link的方式引入。我们会用到extract-text-webpack-plugin@next,新版本加了一个@next,是比较稳定的;webpack还新提供了一个mini-css-extract-plugin,这个插件有望取代extract-text-webpack-plugin。但是目前还不稳定。
下载好以后,我们在plugins中添加插件,配置filename(抽离的css文件名),在loader中修改use;
如果不想打包到一个css文件中,我们可以分离它,我们可以分3步,①、分别new一个实例;②、在module中分别配置相对应的插件;③、在plugins中引入。打包之后我们就会看到css下就会有两个css文件。
但同样它会出现一个问题,就是在不会热更新了,上面是上线环境用的,开发环境我们需要重新配置,只需要两步,这样他就不会以link的方式,而是以style的方式插入html中。
上面说的是 extract-text-webpack-plugin@next,而 mini-css-extract-plugin的用法简单,但是它的缺点就是不能分离打包。只能打包成一个css文件。
它的用法与上面不同的是,只需在use中添加一个MiniCssTractPlugin.loader;
5、清除没用的css。
如果我们引入框架的样式库,比如bootstrap、mui等等UI库,会用很多用不到样式,我们可以用purifycss-webpack 、purify-css、glob插件去清除;用法也简单。一般情况下,我们放在HtmlWebpackPlugin后面。
6、原封不动的发布一个文件到线上,拷贝插件;
如果我们有这样的需求,我们想要把一个文件原封不动的拷贝到打包的build文件中,我们会用到copy-webpack-plugin插件,它接受一个数组,可以拷贝多个文件或文件夹,数组中是多个对象,对象中常用的参数有from和to。
结语
领取专属 10元无门槛券
私享最新 技术干货