style-loader,styleloader pitch

webpack常用loader和plugin

webpack是一个模块打包器（module bundler），提供了一个核心，核心提供了很多开箱即用的功能，同时它可以用loader和plugin来扩展。webpack本身结构精巧，基于tapable的插件架构，扩展性强，众多的loader或者plugin让webpack显得很复杂。

webpack常用配置包括：devtool、entry、 output、module、resolve、plugins、externals等，本文主要介绍下webpack常用的loader和plugin

一般loader的使用方式分为三种：

1：在配置文件webpack.config.js中配置

2：通过命令行参数方式

3：通过内联使用

比如下面配置，可以匹配.scss的文件，分别经过sass-loader、css-loader、style-loader的处理。

sass-loader 转化sass为css文件，并且包一层module.exports成为一个js module。 style-loader 将创建一个style标签将css文件嵌入到html中。 css-loader 则处理其中的@import和url()。

官网介绍： how to write a plugin

比如我们可以在构建生成文件时，将所有生成的文件名生成到filelist.md的文件中

比如我们可以在html-webpack-plugin生成文件后刷新页面，完成热更新效果。

比如我们可以在构建完成后，打开一个提示窗口。

二、webpack的loader配置

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的资源模块类型来处理。

'style-loader，css-loader，stylus-loader'什么意思

这些都是webpack编译时用到的插件，css-loader 是处理css文件中的url()等，style-loader 将css插入到页面的style标签，stylus-loader是引入你自己写的自定义插件。

有sass-loader还需要node-sass吗

要的。因为 sass-loader 包中loader.js文件中有引包。

然而他自己的配置文件里却没有配置如下图，说以需要手动安装

其实sass官方文档里边有说明

npm 怎么查看安装style-loader完成没

1.准备:npm安装以下组件a.安装react/antd:npm install react react-dom antd --saveb.安装webpack/less:npm install webpack less --save-devwebpack根据需要选择使用-g安装c.安装babel-loader以及其他相关package:npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-devd.选择安装style-loader/css-loadernpm install style-loader css-loader --save-dev2. 配置webpack.config.js具体配置可以查看webpack提供的例子，主要依赖的是babel-loaderbabel-loader上也有webpack.config.js应该如何编写的例子，传送门: babel-loader3. 编写我们的文件(例如: demo-antd.jsx)只使用了antd提供的Button组件。只使用了antd提供的Button组件。ps: 对比import { Button } from 'antd';和import Button from 'antd/lib/button';后者不会将antd中所有的内容都引入，如果你只是需要Button这么一种组件的话，推荐使用后一种写法。4. 执行构建webpack ./demo-antd.jsx demo-antd-bundle.js将生成demo-antd-bundle.js文件5. 在页面中引入bundle文件(demo-antd-bundle.js)执行到这一步，在浏览器中查看页面可以应该可以看到一个原生样式的button元素，因为antd并没有将样式使用内联style的方式写入js文件中。这里我们暂时将问题一搁置，来看看问题二：组件库的内部机制。因为没有深入去看过antd的源代码，没法详细说明antd的在代码编写上的一些....怎么说，就是『代码为什么这样写』这个问题，有兴趣的话，可以去查看源码，正如 @陈吉浩 所说，查看github上的代码比npm下载后的代码更舒服。

css-loader和style-loader

1.开发环境安装css-loader

2.在webpack.config.js中引入css-loader(三种方法)

3.引入后npm run build，仍然无法显示样式，什么原因？

因为没有安装style-loader

1.开发环境安装style-loader

2.在webpack.config.js中引入style-loader

默认规则：引入的loader从下往上，从右往左扫描

3.引入css-loader和style-loader后npm run build，正常显示