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 相关文章推荐
纯js实现背景图片切换效果代码
Nov 14 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
详解node和ES6的模块导出与导入
Feb 19 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 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网页显示各种语法错误
2013/09/23 PHP
php GUID生成函数和类
2014/03/10 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
Javascript 作用域使用说明
2009/08/13 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
bootstrap模态框示例代码分享
2017/05/17 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
python脚本监控docker容器
2016/04/27 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
python实现经纬度采样的示例代码
2020/12/10 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
联强国际笔试题面试题
2013/07/10 面试题
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
三八妇女节标语
2014/10/09 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
销售工作决心书
2015/02/04 职场文书
后勤个人工作总结
2015/02/28 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫
Go并发4种方法简明讲解
2022/04/06 Golang