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 操作cookies及正确使用cookies的属性
Oct 15 Javascript
扩展JavaScript功能的正确方法(译文)
Apr 12 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
详解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
基于文本的留言簿
2006/10/09 PHP
用PHP制作的意见反馈表源码
2007/03/11 PHP
PHP 验证码的实现代码
2011/07/17 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
浅谈php调用python文件
2019/03/29 PHP
Firefox中autocomplete="off" 设置不起作用Bug的解决方法
2011/03/25 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
Python中常见的数据类型小结
2015/08/29 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
Python中Threading用法详解
2017/12/27 Python
Python 移动光标位置的方法
2019/01/20 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
python3.8下载及安装步骤详解
2020/01/15 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
给校长的一封建议书
2014/03/12 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
python分分钟绘制精美地图海报
2022/02/15 Python