详解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 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
用js实现的页面关键字密度查询代码
Dec 27 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
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
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
用于table内容排序
2006/07/21 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
python 初始化一个定长的数组实例
2019/12/02 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
极简的HTML5模版
2015/07/09 HTML / CSS
Java里面有没有全局变量?为什么?
2015/02/06 面试题
致200米运动员广播稿
2014/02/06 职场文书
意向书范本
2014/07/29 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
初二数学教学反思
2016/02/17 职场文书
《迟到》教学反思
2016/02/24 职场文书
小学语文教学反思范文
2016/03/03 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
springboot用户数据修改的详细实现
2022/04/06 Java/Android