详解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 相关文章推荐
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
单元选择合并变色示例代码
May 26 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 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数据源表结构图示
2008/06/05 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
PHP session 会话处理函数
2016/06/06 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
Python对象体系深入分析
2014/10/28 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
Python实现翻转数组功能示例
2018/01/12 Python
python如何为创建大量实例节省内存
2018/03/20 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
python pandas修改列属性的方法详解
2018/06/09 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
python判断输入日期为第几天的实例
2018/11/13 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
python安装requests库的实例代码
2019/06/25 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
什么造成了Java里面的异常
2016/04/24 面试题
大门门卫岗位职责
2013/11/30 职场文书
小区门卫管理制度
2014/01/29 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
详解Java实践之适配器模式
2021/06/18 Java/Android