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 ...
随机推荐
- 【转】android ViewPager,ViewFlipper,ViewFlow实现左右滑动
转自:http://blog.csdn.net/zhouyuanjing/article/details/8290454 开篇 首页只是作为ViewPager,ViewFlipper,ViewFlow ...
- 启动和停止GlassFish Server
您可以使用NetBeans IDE或命令行启动和停止GlassFish Server. 使用NetBeans IDE启动GlassFish Server 单击“服务”选项卡. 展开服务器. 右键单 ...
- kafka存储机制以及offset
1.前言 一个商业化消息队列的性能好坏,其文件存储机制设计是衡量一个消息队列服务技术水平和最关键指标之一.下面将从Kafka文件存储机制和物理结构角度,分析Kafka是如何实现高效文件存储,及实际应用 ...
- react- 相关
生命周期方法 组件的生命周期分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM React 为每个状态都提供了两种处理函数 ...
- ArcGIS 10.2之地图服务的发布、使用
2.发布地图服务 2.1 地图服务器的建立 打开ArcCatalog,在左侧的GIS Servers下,双击Add ArcGIS Server, 弹出添加界面,选择,Administer GIS服务项 ...
- Android开发之——依赖冲突Program type already present
前言 实际开发中,为了提高开发速度和效率,总避免不了引用第三方提供的依赖和类库,如果含有相同依赖的类库被我们引用时,而他们的版本又不相同,就有可能会导致一系列问题和异常,本文结合本人时间总结和他人经验 ...
- Azure 进阶攻略 | 电脑跑分你会,但虚拟机存储性能跑分的正确姿势你造吗?
想学生时代,小编最爱做的就是研究电脑硬件,然后给自己.朋友和童鞋装机.装好后呢?当然要第一时间跑分了!各种跑分软件运行一遍,不断优化,不断测试.终于得到一个满意成绩,截图分享到网上显摆一下.当年为啥就 ...
- ansible使用1-安装&配置
参考文档 http://docs.ansible.com https://github.com/leucos/ansible-tuto 控制机安装 ansible控制机通过ssh控制远程主机,远程主机 ...
- Do not set "root" as "NOPASSWD" in sudoers file
cat /etc/sudoers root ALL=(ALL)ALL: ALL do not change it to root ALL=(ALL)NOPASSWD: ALL Since ...
- aaS软件的必要特征分析,一定是多租户特性吗
本篇文章讲述了SaaS软件的必要特征一定是多租户特性?对于许多小型企业来说,SaaS是采用先进技术的最好途径,它消除了企业购买.构建和维护基础设施和应用程序的需要 课课家教育平台提醒各位:本篇文章纯干 ...