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 我哦

来源:https://segmentfault.com/a/1190000017856783

webpack4 单独抽离打包 css 的新实现的更多相关文章

  1. webpack react 单独打包 CSS

    webpack react 单独打包 CSS webpack require css的方法,默认会把css 打入到js文件中,加载顺序有问题,如果需要打出独立的css文件 操作步骤: step1: 安 ...

  2. webpack4 系列教程(五): 处理CSS

    这节课讲解webpack4中打包css的应用.v4 版本和 v3 版本并没有特别的出入. >>> 本节课源码 >>> 所有课程源码 教程所示图片使用的是 githu ...

  3. webpack打包css

    1.第一种方式 1.安装css-loader和style-loader $ cnpm install css-loader style-loader --save-dev 2.引用的时候使用css-l ...

  4. webpack4 系列教程(一): 打包JS

    webpack 本身就是为了打包js所设计,作为第一节,介绍怎么打包js. 1. 检验webpack规范支持 webpack支持es6, CommonJS, AMD. 创建vendor文件夹,其中mi ...

  5. gulp打包css/image/Less/Sass

    其他的和打包前一篇随笔(打包js) http://www.cnblogs.com/teersky/p/7251329.html 相同,本篇文章主要写gulpFile.js的配置: 安装CSS打包插件: ...

  6. css css3新特性

    css  css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...

  7. Webpack打包css后z-index被重新计算的解决方法

    发现问题 最近在使用 Webpack 打包 css 文件时,发现了一个问题,发现打包后的 z-index 值跟源文件 z-index 不一致. 如下图,左侧是源文件,右侧是打包后的文件: 即使加上 ! ...

  8. webpack打包将配置文件单独抽离不压缩打包

    webpack.config.js: plugins: [ //提取公共模块 new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', ch ...

  9. 使用webpack打包css和js

    1.安装webpack. npm install webpack -g 2.创建一个文件夹app. 3.新建文件test.js. require("!style-loader!css-loa ...

随机推荐

  1. javascript中的this使用场景

    刚接触js不久时对this总是感到无比迷茫,以下是来自js设计模式与实践里的总结 this总是指向一个对象,有时指向全局对象,有时指向构造对象,有时指向DOM对象 1. 作为对象的方法调用 做为对象的 ...

  2. Asp.Net Mvc: 应用BindAttribute

    环境: Windows 2008, VS 2008 SP1, Asp.Net Mvc RC1 ----------------------------------------------------- ...

  3. kafka brokers配置参数详解

    基本配置如下: -broker.id-log.dirs-zookeeper.connect Topic-level配置以及其默认值将在下面讨论. Property Default Descriptio ...

  4. Hibernate课程 初探一对多映射4-1 inverse属性

    1 <Set>节点的inverse属性默认由one方来维护(默认值为false).将inverse属性修改为true则由多方来维护.

  5. 零基础逆向工程34_Win32_08_线程控制_CONTEXT结构

    线程控制 实验 挂起线程 ::SuspendThread(hThread); 恢复线程 ::ResumeThread(hThread); 终止线程 (这里讲了同步调用与异步调用) 方式一: 此方法结束 ...

  6. linux文件按照行数切割

    公司小站的nginx服务器日志一直没有管理 到发现的时候已经有50G+的logs文件 查看起来十分不便 只能将其切割 接下来分享 具体方法 split -l 5000(行数) -a 5(增加文件名上限 ...

  7. 解决Pandoc wasn't found.pdflatex not found on PATH

    解决nbconvert failed: Pandoc wasn't found.解决nbconvert failed: pdflatex not found on PATH 问题1描述 500 : I ...

  8. Debug view 是个好工具

    有时候不用 VS 调试, 在 代码里面加入 Debug.Writeline(" Debug information!!");  这个时候打开 debug view 就可以检测出输出 ...

  9. centos7.4 系统安装指导

    centos7 系统安装指导 安装前规划 下载安装文件 安装过程设置 安装后系统基本设置 安装前规划 CentOS 7.x系列只有64位系统,没有32位. 生产服务器建议安装CentOS-7-x86_ ...

  10. python3基础14(有关日期的使用2)

    #!/usr/bin/env python# -*- coding:utf-8 -*-import timeimport datetime,shutil,osimport calendar print ...