二、webpack的loader配置

html-css015

二、webpack的loader配置,第1张

webpack打包的时候只认识 .js 文件,但我们开发中肯定不仅仅只是js文件,如 .html 、 .css 、 .jpg 等,webpack提供了很多 loader 来打包不同类型的文件。

对于加载css文件来说,我们需要一个可以读取css文件的loader,这个loader最常用的是 css-loader 。

webpack.config.js

css-loader 只是负责将.css文件进行解析,并不会将解析之后的css插入到页面中,如果我们希望再完成插入style的操作,那么我们还需要另外一个loader,就是 style-loader

* 注意: 因为loader的执行顺序是从右向左(或者说从下到上,或者说从后到前的),所以我们需要将styleloader写到css-loader的前面。

其实 style-loader 做的事情很简单,就是在动态创建了一个 style 标签,把 css-loader 处理的css内容放到style标签内,然后在插入到页面的 head 标签内。

安装less工具将less文件转为css文件。

使用 less-loader ,来自动使用less工具转换less到css

安装

使用

在 这里 可以查询浏览器的占有率。

Browserslist 是一个在不同的前端工具之间,共享目标浏览器和Node.js版本的配置

方案一:在 package.json 中配置:

方案二:在根目录新建 .browserslistrc 文件

方案一和方案二配置的条件都是 or 关系, 如果要同时满足条件用 and

PostCSS 是一个通过JavaScript来转换样式的工具,这个工具可以帮助我们进行一些CSS的转换和适配,比如自动添加浏览器前缀、css样式的重置,但是实现这些工具,我们需要借助于PostCSS对应的插件。

可以在 这里 查询到css样式添加规则。

因为我们需要添加前缀,所以要安装autoprefixer:

命令行直接使用使用postcss工具,并且制定使用autoprefixer:

在webpack中使用postcss就是使用 postcss-loader 来处理的。

安装

配置

第一种方案:

webpack.config.js

第二种:

也可以将plugin封装出来,在根目录新建 postcss.config.js 文件:

webpack.config.js

事实上,在配置postcss-loader时,我们配置插件并不需要使用autoprefixe,我们可以使用另外一个插件: postcss-preset-env 。

postcss-preset-env也是一个postcss的插件,它可以帮助我们将一些现代的CSS特性,转成大多数浏览器认识的CSS,并且会根据目标浏览器或者运行时环境添加所需的polyfill,也包括会自动帮助我们添加autoprefixer(所以相当于已经内置了autoprefixer)。

安装

使用

将 autoprefixer 替换成 postcss-preset-env 就行了:

有些插件直接写字符串就行,会自动requre:

问题复现:

假如 main.js 里面引入了 src/index.css ,而 src/index.css 里使用 @import 引入了 src/test.css ,就会出现 src/test.css 文件里的样式不会被 postcss 所处理,这时候就需要配置:

webpack.config.js

要处理jpg、png等格式的图片,我们也需要有对应的loader: file-loader

安装

配置

webpack.config.js

图片资源加载方式:

有时候我们处理后的文件名称按照一定的规则进行显示,比如保留原来的文件名、扩展名,同时为了防止重复,包含一个hash值等。这个时候我们可以使用 PlaceHolders 来完成,webpack给我们提供了大量的PlaceHolders来显示不同的内容。

介绍几个最常用的placeholder:

自定义图片打包名字和输出路径:

webpack.config.js

url-loade r和file-loader的工作方式是相似的,但是可以将较小的文件,转成base64的URI。

安装

配置

和file-loader用法很相似

在webpack5之前,加载这些资源我们需要使用一些loader,比如raw-loader 、url-loader、file-loader,在webpack5之后,我们可以直接使用 资源模块类型(asset module type) ,来替代上面的这些loader。

注意: asset module type 打包的图片资源如果用require不需要 .detault

asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。

自定义输出文件和文件名

webpack5 的[ext]已经包含了 .

第一种写法:

这种写法包含所有的assetModule的定义,不推荐。

webpack.config.js

第二种写法:

webpack.config.js

asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。

webpack.config.js

asset 可以实现url-loader的limit效果。

我们可以选择使用file-loader来处理,也可以选择直接使用webpack5的资源模块类型来处理。

文接上回,继续看 webpack 的插件:这里默认你已经搭建出来一个 React 框架。我就是在这个基础上演示的。

mini-css-extract-plugin作用: 该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中文件过大和因为文件大网络请求超时的情况。

extract-text-webpack-plugin 是 mini-css-extract-plugin 的前身,不过前者在 webpack4 算是废了。

安装依赖:

然后引入,配置提出 css 样式,重命名 css 文件。

其中上面的 rules 还可以修改变成这样:

打包出来的 index.css将会插入 index.html 里面的 head 标签里面。

现在如果使用下面的样式:

其中 transform: rotate(45deg) 是 css3 的样式。我们想批量给它增加前缀。这时就得使用 autoprefixer 。但是还的用一个 loader 来处理,这个 loader 就叫 postcss-loader 。

安装依赖:

配置时 postcss-loader 执行顺序必须保证在 css-loader 之前。

完成之后 在webpack.config.js 同级目录下新建 post.config.js 输入内如下:

打包之前的 css 样式为:

经过插件处理之后为:

如果你不想新建一个 post.config.js 文件的话可以这样配置:

处理的效果是完全和分开写一样的。

这里需要注意的是在 HtmlWebpackPlugin 插件里面的配置压缩 css 参数只对自己创建的模板有效,所以这里引包的 css 并没有压缩。我们还的专门配置 压缩 css 的插件。它就是 optimize-css-assets-webpack-plugin 。 terser-webpack-plugin 是对打包的 JS 进行压缩的。

安装依赖:

注意: 使用 optimize-css-assets-webpack-plugin 插件和 terser-webpack-plugin 插件的时候 webpack 的 mode (模式)一定的是 生产模式(production)

简单配置就能压缩 css 和 JS 了。还是很有用的,压缩完成明显文件变小了。

友情提示:

是的;

因为各个浏览器都自带默认样式,而且默认样式还不一样。这样在写css的时候,你会发现,很难兼容所有浏览器。

有些浏览器自带padding值margin值。