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字典探测用户名工具
Oct 05 Javascript
Javascript 读后台cookie代码
Sep 15 Javascript
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
css值转换成数值请抛弃parseInt
Oct 24 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
JS delegate与live浅析
Dec 21 Javascript
JavaScript中的原型和继承详解(图文)
Jul 18 Javascript
JavaScript中两个字符串的匹配
Jun 08 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 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
PHP 图像尺寸调整代码
2010/05/26 PHP
php tp验证表单与自动填充函数代码
2012/02/22 PHP
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
CURL状态码列表(详细)
2013/06/27 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
python简单实现操作Mysql数据库
2018/01/29 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
python gdal安装与简单使用
2019/08/01 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
什么是会话Bean
2015/05/14 面试题
企业管理部经理岗位职责
2013/12/24 职场文书
中学生运动会口号
2014/06/07 职场文书
工作证明英文模板
2014/10/21 职场文书
先进典型发言材料
2014/12/30 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
详解在OpenCV中如何使用图像像素
2022/03/03 Python
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏