webpack4 单独抽离打包 css 的新实现
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 的新实现的更多相关文章
- webpack react 单独打包 CSS
webpack react 单独打包 CSS webpack require css的方法,默认会把css 打入到js文件中,加载顺序有问题,如果需要打出独立的css文件 操作步骤: step1: 安 ...
- webpack4 系列教程(五): 处理CSS
这节课讲解webpack4中打包css的应用.v4 版本和 v3 版本并没有特别的出入. >>> 本节课源码 >>> 所有课程源码 教程所示图片使用的是 githu ...
- webpack打包css
1.第一种方式 1.安装css-loader和style-loader $ cnpm install css-loader style-loader --save-dev 2.引用的时候使用css-l ...
- webpack4 系列教程(一): 打包JS
webpack 本身就是为了打包js所设计,作为第一节,介绍怎么打包js. 1. 检验webpack规范支持 webpack支持es6, CommonJS, AMD. 创建vendor文件夹,其中mi ...
- gulp打包css/image/Less/Sass
其他的和打包前一篇随笔(打包js) http://www.cnblogs.com/teersky/p/7251329.html 相同,本篇文章主要写gulpFile.js的配置: 安装CSS打包插件: ...
- css css3新特性
css css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...
- Webpack打包css后z-index被重新计算的解决方法
发现问题 最近在使用 Webpack 打包 css 文件时,发现了一个问题,发现打包后的 z-index 值跟源文件 z-index 不一致. 如下图,左侧是源文件,右侧是打包后的文件: 即使加上 ! ...
- webpack打包将配置文件单独抽离不压缩打包
webpack.config.js: plugins: [ //提取公共模块 new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', ch ...
- 使用webpack打包css和js
1.安装webpack. npm install webpack -g 2.创建一个文件夹app. 3.新建文件test.js. require("!style-loader!css-loa ...
随机推荐
- javascript中的this使用场景
刚接触js不久时对this总是感到无比迷茫,以下是来自js设计模式与实践里的总结 this总是指向一个对象,有时指向全局对象,有时指向构造对象,有时指向DOM对象 1. 作为对象的方法调用 做为对象的 ...
- Asp.Net Mvc: 应用BindAttribute
环境: Windows 2008, VS 2008 SP1, Asp.Net Mvc RC1 ----------------------------------------------------- ...
- kafka brokers配置参数详解
基本配置如下: -broker.id-log.dirs-zookeeper.connect Topic-level配置以及其默认值将在下面讨论. Property Default Descriptio ...
- Hibernate课程 初探一对多映射4-1 inverse属性
1 <Set>节点的inverse属性默认由one方来维护(默认值为false).将inverse属性修改为true则由多方来维护.
- 零基础逆向工程34_Win32_08_线程控制_CONTEXT结构
线程控制 实验 挂起线程 ::SuspendThread(hThread); 恢复线程 ::ResumeThread(hThread); 终止线程 (这里讲了同步调用与异步调用) 方式一: 此方法结束 ...
- linux文件按照行数切割
公司小站的nginx服务器日志一直没有管理 到发现的时候已经有50G+的logs文件 查看起来十分不便 只能将其切割 接下来分享 具体方法 split -l 5000(行数) -a 5(增加文件名上限 ...
- 解决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 ...
- Debug view 是个好工具
有时候不用 VS 调试, 在 代码里面加入 Debug.Writeline(" Debug information!!"); 这个时候打开 debug view 就可以检测出输出 ...
- centos7.4 系统安装指导
centos7 系统安装指导 安装前规划 下载安装文件 安装过程设置 安装后系统基本设置 安装前规划 CentOS 7.x系列只有64位系统,没有32位. 生产服务器建议安装CentOS-7-x86_ ...
- python3基础14(有关日期的使用2)
#!/usr/bin/env python# -*- coding:utf-8 -*-import timeimport datetime,shutil,osimport calendar print ...