npx=>0配置,webpack4.0+

愿你能遇到一个城市,容得下你尽情嬉闹。

前言

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。

结语

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180527G0ZKJQ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券