webpack分离css单独打包的方法


Posted in Javascript onJune 12, 2018

本文介绍了webpack分离css单独打包的方法,分享给大家,具体如下:

CHANGELOG

2018-02-08 14:46:06

刚看了下,网上查了 webpack单独打包css,找到的文章,本文比较靠前,但是由于写的比较混乱,因此重新整理一下内容,更通俗易懂一点。

2018-02-01 14:45:23

由于这篇文章只写了如何把CSS打包成一个CSS文件,没有讲解如何打包成多个CSS文件,经简友提点,这里添加上了 打包成多个CSS文件的方法。

2016-05-17 11:55

刚学习webpack,记录一下webpack如何单独打包css

零、介绍

以下是个人项目中总结出来的一些基本知识,记录在这里,加深自己的印象,也让大家能够更快速方便的了解webpack,并且使用它。能力所限,有错误或者问题,请帮忙指出。

webpack 把所有的资源都当成了一个模块, CSS,Image, JS 字体文件 都是资源, 都可以打包到一个 bundle.js 文件中.

webpack分离css单独打包的方法

webpack基本的使用很简单,但是要方方面面都讲解的话内容很多,因此这边主要讲解一下 如何使用webpack单独打包css。

至于打包出来,怎么加hash值,怎么替换html中的引用路径,怎么上传到CND可以使用gulp来实现。【有兴趣后面在写一篇文章】

一、extract-text-webpack-plugin 用法

单独打包css,在webpack需要使用一个插件,extract-text-webpack-plugin

1. 安装extract-text-webpack-plugin

// use npm 
npm install extract-text-webpack-plugin --save-dev

// or use yarn 
yarn add extract-text-webpack-plugin

2. 配置

加载器里面写好插件的配置(使用什么加载器),在webpack的 plugins 里面设置抽离出来的CSS文件名叫什么。

var Ex = require('extract-text-webpack-plugin');
// ...省略
module: {
 loaders: [{
  test: /\.less/,
  loader: Ex.extract('style-loader', 'css-loader','less-loader') // 单独打包出CSS,这里配置注意下
 }]
},
plugins: [
 new Ex("【name】.css")
]

稍微详细点,可以参考这个《extract-text-webpack-plugin 的使用及安装》

下面放两个实际使用例子,方便大家理解

二、单页面应用,把JS里面的CSS单独打包

打包一个文件,只需要常规的在入口的js文件引用 css文件即可, 打包成多个CSS文件,可以设置多个CSS入口,让webpack用 loader去打包。 和分割单独打包js文件一样。下面有两个例子。

// webpack 1.x 配置  【早期使用的配置,那时候是1.x】
/*  webpack.config.js  */
var precss = require('precss');
var cssnext = require('cssnext');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var Ex = require('extract-text-webpack-plugin');
module.exports = {
  entry: './index.js',
  output: {
   filename: 'index.js'
  },
  module: {
   loaders: [{
    test: /\.less/,
    loader: Ex.extract('style-loader', 'css-loader','less-loader') // 单独打包出CSS,这里配置注意下
   }]
  },
  plugins: [
   new Ex("【name】.css")
  ]
 }

三、webpack如何打包多个CSS文件

2. 配置文件添加对应配置

下面直接提供一个完成的多入口CSS打包配置

// webpack 3.x 的配置
var path = require('path')
var glob = require('globby') 
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

// CSS入口配置
var CSS_PATH = {
 css: {
  pattern: ['./src/**/[^_]*.less', '!./src/old/**/*.less'],
  src: path.join(__dirname, 'src'),
  dst: path.resolve(__dirname, 'static/build/webpack'),
 }
}

// 遍历除所有需要打包的CSS文件路径
function getCSSEntries(config) {
 var fileList = glob.sync(config.pattern)
 return fileList.reduce(function (previous, current) {
  var filePath = path.parse(path.relative(config.src, current))
  var withoutSuffix = path.join(filePath.dir, filePath.name)
  previous[withoutSuffix] = path.resolve(__dirname, current)
  return previous
 }, {})
}

module.exports = [
 {
  devtool: 'cheap-module-eval-source-map',
  context: path.resolve(__dirname),
  entry: getCSSEntries(CSS_PATH.css),
  output: {
   path: CSS_PATH.css.dst,
   filename: '[name].css'
  },
  module: {
   rules: [
    {
     test: /\.less$/,
     use: ExtractTextPlugin.extract({
      use: ['css-loader', 'postcss-loader', 'less-loader']
     })
    }
   ]
  },
  resolve: {
   extensions: ['.less']
  },
  plugins: [
   new ExtractTextPlugin('[name].css'),
  ]
 },
// 如果还需要打包js,则可以在这里增加一个单独打包js的处理【根据自己需求来】
// {
//  entry:{},
//  output:{},
//  ... 省略
// }
]

可能有同学还在使用webpack1.x,所以这里在贴一下webpack1.x 的简单配置

// webpack 1.x 版本
// ...其他配置和webpack3.x一样
module: {
  loaders: [
    {
      test: /\.less$/,
      loader: ExtractTextPlugin.extract("style-loader","css-loader","postcss-loader","less-loader")
    },
  ]
}
plugins: [
 new ExtractTextPlugin('[name].css'),
]
// ...其他配置和webpack3.x一样

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
权威JavaScript 中的内存泄露模式
Aug 13 Javascript
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
仿微博字符限制效果实现代码
Apr 20 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
JS call()及apply()方法使用实例汇总
Jul 11 Javascript
Element el-button 按钮组件的使用详解
Feb 01 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 #Javascript
webpack 样式加载的实现原理
Jun 12 #Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 #Javascript
webpack项目轻松混用css module的方法
Jun 12 #Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 #Javascript
用vue快速开发app的脚手架工具
Jun 11 #Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 #Javascript
You might like
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
JavaScript 基础篇(一)
2012/03/30 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
python程序变成软件的实操方法
2019/06/24 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
python实现两个文件夹的同步
2019/08/29 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
求职简历的自我评价
2014/01/31 职场文书
英文求职信范文
2014/05/23 职场文书
初中毕业感言300字
2015/07/31 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript
Python Django项目和应用的创建详解
2021/11/27 Python
MySQL七大JOIN的具体使用
2022/02/28 MySQL