webpack4 多带带抽离打包 css 的新实现

MASAILA 发布于2019-08-23 14:39 / 1950人阅读

摘要：我是拉丁小毛，欢迎大家关注我哦，一起交流，共同进步。有问题可以邮我哦

webpack4 多带带抽离打包 css 的新实现 前言

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

file-loader

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

传统的处理图像

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

处理 css 【本文重点】

const path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: {
        app: "./src1/index.js",
        print: "./src1/print.js"
    },
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [
            { // loader 图片
                test: /.(png|svg|jpg|gif)$/,
                use: ["file-loader"]
            },
            { // 处理字体
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    "file-loader"
                ]
            },
            {
                // 多带带打包出 css
                test: /.css$/,
                use: ["file-loader"]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(["dist"]),
        new HtmlWebpackPlugin({ 
            title: "webpack4 extract css methord of new",
            template: "./src1/index.html",
            filename: "index.html",
            minify: {
                collapseWhitespace: true
            },
            hash: true
        })
    ],
    mode: "production"
};

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

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

声明

原创手敲不易，转载请注明出处，谢谢。我是拉丁小毛，欢迎大家关注我哦，一起交流，共同进步。有问题可以邮我哦(util.you.com@gmail.com)

云服务器 GPU云服务器 JS轻松实现CSS设置抽离懒中抽离 webpack4

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100942.html

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

摘要：我是拉丁小毛，欢迎大家关注我哦，一起交流，共同进步。有问题可以邮我哦 webpack4 单独抽离打包 css 的新实现前言之前我们使用的打包 css 无非两种方式：① 将 css 代码打包进入口 js 文件中；② 使用第三方插件(extract-text-webpack-plugin)实现【注意，该插件在 webpack4 中已经不推荐使用，而且会出现各种莫名其妙的 bug】正是...

Scorpion 2019-08-30 15:55 评论0 收藏0
CSS Module

摘要：样式变多后，命名将更加混乱。缺点是不能利用成熟的预处理器或后处理器，和伪类处理起来复杂。经过这样混淆处理后，名基本就是唯一的，大大降低了项目中样式覆盖的几率。就只能使用预处理器自己的语法来做样式复用了。一前言CSS 是前端领域中进化最慢的一块。由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展，CSS 被远远甩在了后面，逐渐成为大型项目工程化的痛点。也...

mingzhong 2019-08-29 16:06 评论0 收藏0
进击webpack4 （优化篇）

摘要：进击基础篇一进击基础篇二配置一进击基础篇三配置二不解析不依赖第三方模块的模块有一些第三方模块，它本身不依赖于其他模块，比如，，不去编译这些库，会使得打包更加快速是个正则或者包含正则的数组不去解析忽略进击webpack 4 （基础篇一）进击webpack4 （基础篇二：配置一）进击webpack4 （基础篇三：配置二）不解析不依赖第三方模块的模块 noParse 有一些第三方模块...

isaced 2019-08-23 15:30 评论0 收藏0
webpack4 系列教程(九): CSS Tree Shaking

摘要：按照我们的仿真的环境，最终之后的效果应该是打包后的文件不含有样式类。如果忘记了它的用法，请查看系列教程六处理系列教程五处理所以，我们的文件如下安装完相关插件后，我们需要在的配置中引用第三部分定义的代码。教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步原文地址有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料本次课程的代码目录(如下图所示)：s...

赵连江 2019-08-29 16:36 评论0 收藏0
webpack4 系列教程(九): CSS Tree Shaking

摘要：按照我们的仿真的环境，最终之后的效果应该是打包后的文件不含有样式类。如果忘记了它的用法，请查看系列教程六处理系列教程五处理所以，我们的文件如下安装完相关插件后，我们需要在的配置中引用第三部分定义的代码。教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步原文地址有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料本次课程的代码目录(如下图所示)：s...

superw 2019-08-23 11:40 评论0 收藏0