webpack4 单独抽离打包 css 的新实现

红太狼 2022-03-27 07:12 314阅读 0赞

### webpack4 单独抽离打包 css 的新实现 ###

#### 前言 ####

> 之前我们使用的打包 css 无非两种方式：① 将 css 代码打包进 入口 js 文件中；② 使用第三方插件(extract-text-webpack-plugin)实现【注意，该插件在 webpack4 中已经不推荐使用，而且会出现各种莫名其妙的 bug】  
> 正是基于对以上两种方式缺点的思考，结合我的实际使用过程，我认为以后我们应该完全摒弃掉上述两种方式，这里推荐一种一种新的实现方式：file-loader

#### file-loader ####

> 我先给个 file-loader 的使用说明吧(传送门： [https://github.com/webpack-co...][https_github.com_webpack-co...]；  
> 在我们的传统认知中 file-loader 大多是用来处理 图像元素的，其实如果你认真看过上面的那个传送门的话，才明白我们一直以来是被被误导了，下面我给出几个官方的使用例子吧. [webpack4+vue打包简单入门][webpack4_vue]

##### 传统的处理图像 #####

module.exports = {
      module: {
        rules: [
          {
            test: /\.(png|jpg|gif)$/,
            use: [
              {
                loader: 'file-loader',
                options: {},
              },
            ],
          },
        ],
      },
    };

##### 处理 css 【本文重点】 #####

上面这个代码是我亲自实测过的，大家可以放心借鉴，使用了 file-loader 来处理 css 后，就不再需要额外的插件了，当然了，如果你需要指定输出的 css 文件名和路径，可以这么写 `user: ['file-loader?name=[name].bundle[hash].css']`等，这里的写法就是类似 get 方式的传参那样，`?`符号后面带参数名即可

> 仅供参考，如果你有什么更好的建议可以 contact 我哦

来源：[https://segmentfault.com/a/1190000017856783][https_segmentfault.com_a_1190000017856783]

[https_github.com_webpack-co...]: https://github.com/webpack-contrib/file-loader%29
[webpack4_vue]: http://www.jqhtml.com/22602.html
[https_segmentfault.com_a_1190000017856783]: https://segmentfault.com/a/1190000017856783