详解webpack分离css单独打包

 更新时间:2017年06月21日 10:45:13   转载 作者:那年、仲夏  
这篇文章主要介绍了详解webpack分离css单独打包,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

这篇文章只写了如何把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')
 ]
}

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

相关文章

  • 微信小程序开发之tabbar图标和颜色的实现

    微信小程序开发之tabbar图标和颜色的实现

    这篇文章主要介绍了微信小程序开发之tabbar图标和颜色的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • js实现自动播放匀速轮播图

    js实现自动播放匀速轮播图

    这篇文章主要介绍了js实现自动播放匀速轮播图,带匀速运动函数封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • Javascript 引擎工作机制详解

    Javascript 引擎工作机制详解

    我们需要引入几个相关的概念:执行环境栈、全局对象、执行环境、变量对象、活动对象、作用域和作用域链等,这些概念正是JS引擎工作的核心组件。这篇文章的目的不是孤立的为你讲解每一个概念需要的朋友可以参考下
    2016-11-11
  • jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)

    jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)

    本文主要介绍了jquery自定义插件结合baiduTemplate.js实现异步刷新的具体实例,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • Bootstrap组件(一)之菜单

    Bootstrap组件(一)之菜单

    本文主要给大家介绍bootstrap组件的知识,涉及到bootstrap, 组件, 字体图标, 上拉菜单的相关知识,非常具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-05-05
  • react koa rematch 如何打造一套服务端渲染架子

    react koa rematch 如何打造一套服务端渲染架子

    这篇文章主要介绍了react koa rematch 如何打造一套服务端渲染架子,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • JS暴虐查找法简洁版

    JS暴虐查找法简洁版

    有过相关经验的朋友都知道,Jscript的效率毕竟有限,在数组中查找数据时如果用常规的算法来做执行起来会很慢。
    2008-07-07
  • webpack多入口多出口的实现方法

    webpack多入口多出口的实现方法

    这篇文章主要介绍了webpack多入口多出口的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • JavaScript基础知识之方法汇总结

    JavaScript基础知识之方法汇总结

    本文给大家分享了javascript基础知识,包括数组的方法,函数的方法,数字的方法,对象的方法,字符串的方法,常规方法,正则表达式方法,本文介绍的非常详细,具有参考价值特此分享供大家参考
    2016-01-01
  • Three.js开发实现3D地图的实践过程总结

    Three.js开发实现3D地图的实践过程总结

    这篇文章主要给大家介绍了关于利用Three.js开发实现3D地图的实践过程,文中通过示例代码介绍的非常详细,对大家学习或者使用three.js具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11

最新评论