将本来镶嵌在bundle.js的css转到外面来,我们需要用到一个插件:extract-text-webpack-plugin

使用方法:

1.安装

npm i extract-text-webpack-plugin -D

2.配置

let extractPlugin = require('extract-text-webpack-plugin');

//....
plugins:[
new extractplugin('css/index.css')
],
module:{
rules:[
{
text: /\.scss$/,
use: extractPlugin.extract({
use: ['css-loader','sass-loader'],
fallback: 'style-loader'
})
}
]
}

在plugins只是new了一个插件实例,loader部分的fallback就是将style-loader的输出接口接到index.css上。

这样我们就可以将css的代码都取出来放在css/index.css里面了,同时插件能自动添加index.css的引入到html的头部

webpack打包提取css到独立文件的更多相关文章

  1. webpack 提取css成单独文件

    webpack 提取css成单独文件 // 用来拼接绝对路径的方法 const {resolve} = require('path') const HtmlWebpackPlugin = requir ...

  2. ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler

    ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler, 使用<link type="text/css" rel="Stylesheet" ...

  3. Webpack 2 视频教程 013 - 自动分离 CSS 到独立文件

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  4. vue webpack打包后.css文件里面的背景图片路径错误解决方法

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  5. webpack打包时排除其中一个css、js文件,或单独打包一个css、js文件

    在项目中经常会需要将一些接口的配合文件或者某些样式文件,分离出来单独打包,便于后期改动,这里我以css文件为例,介绍实现两种方法: 项目目录: 如上图所示,现在我需要将项目中的scBtn.css文件单 ...

  6. webpack 打包出多个HTML文件,多个js文件,图片文件放置到指定文件夹中

    一.webpack.config.js简单代码 const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { ...

  7. gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号

    参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...

  8. asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度

    介绍 使用许多小得JS.CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维 护性,这是一个很好的实践.但这样做反过来却损失了网站的性能.虽然你应该将你的Javascript代码写在小文件中 ...

  9. vue webpack 打包后css背景图路径问题

    最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题 奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微 ...

随机推荐

  1. 对 JavaScript 中的5种主要的数据类型进行值复制

    定义一个函数 clone(),可以对 JavaScript 中的5种主要的数据类型(包括 Number.String.Object.Array.Boolean)进行值复制 使用 typeof 判断值得 ...

  2. 8、Dockerfile介绍和最佳实践

    一.Dockerfile 概念 1.Dockerfile是什么 Docker 镜像是一个特殊的文件系统,除了提供容器运行时所需的程序.库.资源.配置等文件外,还包含了一些为运行时准备的一些配置参数(如 ...

  3. stl源码剖析 详细学习笔记stack queue

    // //  stack.cpp //  笔记 // //  Created by fam on 15/3/15. // // //---------------------------15/03/1 ...

  4. resource fork, Finder information, or similar detritus not allowed

    1.关闭当前项目和Xcode 2.打开终端或者iterm cd ~/Library/Developer/Xcode/DerivedData/ 3. xattr -rc . 4.重新打开项目 5.如果不 ...

  5. gulp:入门简介

    本文是gulp的入门级介绍,主要内容包括什么是gulp,gulp与grunt有什么区别,gulp可以解决grunt存在的哪些问题,以及一个简单的说明例子. 什么是gulp gulp的官方定义非常简洁: ...

  6. 关于Java开发一职的经验

    本人为大四软件工程学生,由于准备不充分也没有前人指点,去年10月份才赶上秋招节奏,然后签下了一家比较起来还行的公司.所以不太期望大家有求职意愿但苦于不知作何准备,所以特列以下知识点检索供大家查阅.如果 ...

  7. kudu 存储引擎简析

    本文由  网易云发布. 1 概述 本文主要介绍kudu底层存储引擎的数据组织方式,先看整体结构如下: 一张表会分成若干个tablet , 每个tablet 包括MetaData 元信息及若干个RowS ...

  8. 1. Python3 环境搭建

    Python3 环境搭建 开门见山,其他关于Python发展史.语言类型.优缺点等等 可以自己去百度百度,这里就不多说了.其实基本想要学这门语言的时候,你已经了解差不多了!!! Python的运行环境 ...

  9. CodeMirror mode编写

    Writing CodeMirror Modes Modes typically consist of a single JavaScript file. This file defines, in ...

  10. ElasticSearch5.6.1 + 中文分词(IK)

    在安装ElasticSearch 需要先安装java 的 jdk 可以通过  命令来确认是否已经安装了 java -version 如果没有安装可以使用 yum 直接安装通过. 先通过命令查看yum源 ...