详解webpack分离css单独打包


Posted in Javascript onJune 21, 2017

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

瞎扯

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

但是有时候需要把样式 单独的打包成一个文件, 然后放到 CND上, 然后缓存到浏览器客户端中

一、extract-text-webpack-plugin 使用方法

这个操作很简单的,只需要一个插件就好了,就是extract-text-webpack-plugin

1. 安装extract-text-webpack-plugin

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

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

首先require一下

var ExtractTextPlugin = require("extract-text-webpack-plugin");

plugins里面添加

new ExtractTextPlugin("styles.css"),

实例:

plugins: [
  new webpack.optimize.CommonsChunkPlugin('common.js'),
  new ExtractTextPlugin("styles.css"), 
],

modules里面对css的处理修改为

{
 test: /\.css$/,
  loader: ExtractTextPlugin.extract("style-loader","css-loader")
},

千万不要重复了,不然会不起作用的

我这里如下:

module: {
  loaders: [
   {
   test: /\.css$/,
    loader: ExtractTextPlugin.extract("style-loader","css-loader")
  },
   {
   test: /\.scss$/,
    loader: "style!css!sass"
  },
   {
   test: /\.less$/,
    loader: "style!css!less"
  },
 ]
},

3. 在引入文件里面添加需要的css,【举例如下】

require('../less/app.less');
require('./bower_components/bootstrap-select/dist/css/bootstrap-select.min.css');
require('./bower_components/fancybox/source/jquery.fancybox.css');

二、如何把CSS打包成一个文件, 和 把CSS打包成多个文件

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

// 使用webpack 打包单独的postcss语法的css文件
/* 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: './【path】/index.js',
 /* index.js 里 require('./【name】.css');就好 我在看看文档是不是直接不用引入js文件 */
 output: {
  filename: 'index.js'
 },
 module: {
  loaders: [{
  test: /\.css$/,
  loader: Ex.extract('style-loader', 'css-loader!postcss-loader') /*这里的写法注意下 */
  }]
 },
 postcss: function() {
  return [autoprefixer, cssnext, precss, cssnano]
 },
 plugins: [
  new Ex("【name】.css")
 ]
 }

 // 使用webpack 打包单独的多个postcss语法的css文件
var precss = require('precss');
var cssnext = require('cssnext');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var Ex = require('extract-text-webpack-plugin');
var webpack = require('webpack');


module.exports = {
 entry: {
 ac1: './src/actother.css',
 ac2: './src/index.css'
 },
 output: {
 filename: "[name].css"
 },
 module: {
 loaders: [{
  test: /\.css$/,
  loader: Ex.extract('style-loader', 'css-loader!postcss-loader')
 }]
 },
 postcss: function() {
 return [autoprefixer, precss, cssnano, cssnext]
 },
 plugins: [
 new Ex('[name].css')
 ]
}

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

Javascript 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
jQuery 解析xml文件
Aug 09 Javascript
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
jQuery对val和atrr("value")赋值的区别介绍
Sep 26 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 #Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 #Javascript
基于jquery日历价格、库存等设置插件
Jul 05 #jQuery
详解Angular 自定义结构指令
Jun 21 #Javascript
详解Angular2 之 结构型指令
Jun 21 #Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 #Javascript
Angular.JS中指令ng-if的注意事项小结
Jun 21 #Javascript
You might like
mysql+php分页类(已测)
2008/03/31 PHP
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
基于jquery的一个图片hover的插件
2010/04/24 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
javascript 回调函数详解
2014/11/11 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
js简易版购物车功能
2017/06/17 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
Python学习笔记之While循环用法分析
2019/08/14 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
2014年政府采购工作总结
2014/12/09 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
仙境之桥观后感
2015/06/16 职场文书
如何在Python项目中引入日志
2021/05/31 Python
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android