详解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 相关文章推荐
url 特殊字符 传递参数解决方法
Jan 01 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
对比分析json及XML
Nov 28 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 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
Syphon 使用方法
2021/03/03 冲泡冲煮
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
一看就懂:jsonp详解
2015/06/01 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
js实现楼层导航功能
2017/02/23 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
Angular2 组件通信的实例代码
2017/06/23 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
Python对象与引用的介绍
2019/01/24 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
医药工作者的求职信范文
2013/09/21 职场文书
教育科学研究生自荐信
2013/10/09 职场文书
初中政治教学反思
2014/01/17 职场文书
小学生秋游活动方案
2014/02/23 职场文书
毕业设计说明书
2014/05/07 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
社会实践的活动方案
2014/08/22 职场文书
2014年部门工作总结
2014/11/12 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL