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 select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
javascript操作referer详细解析
Mar 10 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 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检测文件编码的方法示例
2014/04/25 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
用Python进行行为驱动开发的入门教程
2015/04/23 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
24岁生日感言
2014/01/13 职场文书
接受捐赠答谢词
2014/01/27 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
2014年派出所工作总结
2014/11/21 职场文书
学校学期工作总结
2015/08/13 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
Python基本知识点总结
2022/04/07 Python
原生JS实现分页
2022/04/19 Javascript
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL