详解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 相关文章推荐
js cookies实现简单统计访问次数
Nov 24 Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
javascript获取url上某个参数的方法
Nov 08 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
JavaScript 是什么意思
Sep 22 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
Vue触发式全局组件构建的方法
Nov 28 Javascript
elementUI中Table表格问题的解决方法
Dec 04 Javascript
十分钟教你上手ES2020新特性
Feb 12 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
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
聊天室php&mysql(六)
2006/10/09 PHP
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
5款Javascript颜色选择器
2009/10/25 Javascript
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
独特的python循环语句
2016/11/20 Python
使用python编写监听端
2018/04/12 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
通信专业个人自我鉴定
2013/10/21 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers