1、安装

npm install extract-text-webpack-plugin --save-dev

2、项目目录:

index文件夹下的index.css:

body{
background-color: #ccc;
}
.flex-div{
display: flex;
}

index文件夹下的index2.css:

p{
text-indent: 2em;
}

index文件夹下的index-less.less:

.layer{
width: 600px;
height: 200px;
background-color: green;
> div{
width: 400px;
height: 200px;
background:url(../../img/ais.jpg);
}
.flex{
display: flex;
}
}

index文件夹下的index.js:

require('./index-less.less');
require('./index.css');
require('./index2.css');
require('../module.js');
console.log('首页-index文件');

login文件夹下的index.js:

require('./login.css');
require('../module.js');
console.log('登录页-index文件');

login文件夹下的login.css:

div{
margin:;
padding:;
}

3、webpack.config.js

//处理html模板
var htmlWebpackPlugin = require('html-webpack-plugin');
//处理共用、通用的js
var webpack = require('webpack');
//css单独打包
var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = {
// entry: './src/app.js',
entry: {
//通用模块
'common': ['./src/page/common/index.js'],
'login': ['./src/page/login/index.js'],
'index': ['./src/page/index/index.js']
},
output: {
path: __dirname + '/dist',
filename: 'js/[name].js'
},
//将外部变量或者模块加载进来
externals: {
'jquery': 'window.jQuery'
},
module: {
loaders: [{
test: /\.js$/,
//以下目录不处理
exclude: /node_modules/,
//只处理以下目录
include: /src/,
loader: "babel-loader",
//配置的目标运行环境(environment)自动启用需要的 babel 插件
query: {
presets: ['latest']
}
},
//css 处理这一块
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
//'style-loader',
{
loader: 'css-loader',
options: {
//支持@important引入css
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
//一定要写在require("autoprefixer")前面,否则require("autoprefixer")无效
require('postcss-import')(),
require("autoprefixer")({
"browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"]
})
]
}
}
}
]
})
},
//less 处理这一块
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
//'style-loader',
{
loader: 'css-loader',
options: {
//支持@important引入css
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
//一定要写在require("autoprefixer")前面,否则require("autoprefixer")无效
require('postcss-import')(),
require("autoprefixer")({
"browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"]
})
]
}
}
},
'less-loader'
]
})
},
//处理html模板
{
test: /\.html$/,
use: {
loader: 'html-loader'
}
},
//处理图片
{
test: /\.(png|jpg|gif|svg)$/i,
loaders: [
//小于8k的图片编译为base64,大于10k的图片使用file-loader
'url-loader?limit=8192&name:img/[name]-[hash:5].[ext]',
//图片压缩
'image-webpack-loader'
] }
]
},
plugins: [
new htmlWebpackPlugin({
template: 'index.html',
filename: 'index.html'
}),
// 独立通用模块到js/common.js
new webpack.optimize.CommonsChunkPlugin({
//公共块的块名称
name: 'common',
//生成的文件名
filename: 'js/common.js'
}),
new ExtractTextPlugin('css/[name].css')
]
}

4、执行

npm run webpack

5、效果

webpack css打包为一个css的更多相关文章

  1. 怎样将多个CSS文件导入一个CSS文件中

    问题: 在HTML中引入css的其中的两个方法:    导入式和链接式的目的都是将一个独立的css文件引入一个文件中,二者的区别不大,事实上,二者最大的区别在于链接式使用html的标记引入外部css文 ...

  2. 基于webpack实现多html页面开发框架二 css打包、支持scss、文件分离

    本节主要介绍webpack打包的时候CSS的处理方式 一.解决什么问题      1.CSS打包      2.CSS处理浏览器兼容      3.SASS支持      4.CSS分离成单独的文件 ...

  3. css基本概念与css核心语法介绍

    css基本概念 css是什么?不需要了解太多文字类介绍,记住css是层叠样式表,HTML是页面结构,css负责页面样式,javascrt负责静态页面的交互.CSS 能够对网页中元素位置的排版进行像素级 ...

  4. webpack打包时排除其中一个css、js文件,或单独打包一个css、js文件

    在项目中经常会需要将一些接口的配合文件或者某些样式文件,分离出来单独打包,便于后期改动,这里我以css文件为例,介绍实现两种方法: 项目目录: 如上图所示,现在我需要将项目中的scBtn.css文件单 ...

  5. 走近webpack(2)--css打包及压缩js

    前面的文章介绍了webpack的devServer以及多入口多出口文件的配置,咱们继续往下学. 在开始学习接下来的知识之前,我们先回顾一下,前文提到了webpack的简单配置方法,但是只详细说了下入口 ...

  6. webpack打包js,css和图片

    1.webpack打包默认配置文件webpack.config.js 2.打包js文件:有这个文件并配置可以直接在cmd上webpack打包,没有这个文件要在cmd上输入 webpack main.j ...

  7. 1、webpack编译打包Sass编译的css进js文件

    cnpm install css-loader --save-dev    //css-loader 是将css打包进js cnpm install style-loader --save-dev   ...

  8. 静态资源打包:一个javescript 的src引用多个文件,一个link引用多个CSS文件

    疑惑描述: 查看了淘宝网的首页源文件,看到这样的一个特殊的 <script src="http://a.tbcdn.cn/??s/kissy/1.1.6/kissy-min.js,p/ ...

  9. 翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

    原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者: Anthony Gore 译者: 蜗牛 ...

随机推荐

  1. Android Studio NDK开发浅谈

    环境: Android Studio 1.1.0 NDK-r10d 1.新建项目--->包名:com.mxl.az.ndk 新建包含native方法的类:JniOperation.class p ...

  2. Eclipse下mallet使用的方法

    Mallet是Umass大牛开发的一个关于统计自然语言处理的l的开源库,很好的一个东西.可以用来学topic model,训练ME模型等.对于开发者来说,其官网的技术文档是非常有效的. mallet下 ...

  3. bzoj 1009: [HNOI2008]GT考试 -- KMP+矩阵

    1009: [HNOI2008]GT考试 Time Limit: 1 Sec  Memory Limit: 162 MB Description 阿申准备报名参加GT考试,准考证号为N位数X1X2.. ...

  4. Codeforces Beta Round #6 (Div. 2 Only) D. Lizards and Basements 2 dfs

    D. Lizards and Basements 2 题目连接: http://codeforces.com/contest/6/problem/D Description This is simpl ...

  5. 51nod 1010 只包含因子2 3 5的数 打表

    只包含因子2 3 5的数 题目连接: http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1010 Description K的 ...

  6. linux基础命令学习 (九)文本操作

    一.head 1.语法: head [选项] [文件] 2.选项 -q 隐藏文件名 -v 显示文件名 -c<字节> 显示字节数 -n<行数> 显示的行数 3.示例 范例一:查看 ...

  7. Ext.form.ComboBox常用属性详解

    Ext.form.ComboBox常用属性详解 标签: Extjs js combo js 代码 var combo = new Ext.form.ComboBox({ store : new Ext ...

  8. 对于矩阵的理解-- by 孟岩老师

    “如果不熟悉线性代数的概念,要去学习自然科学,现在看来就和文盲差不多.” --瑞典数学家Lars Garding名著<Encounter with Mathematics>. 1. 矩阵的 ...

  9. GitHub上如何删除repository仓库

    1.选择你要删除的仓库名称点击进入. 2.看右边竖向导航栏,选择最下面的settings选项. 3.拉到最下面,看有一个delete this repository的按钮. 4.点击按钮后,会有一个弹 ...

  10. 解决kylin报错:java.lang.ArrayIndexOutOfBoundsException: -1

    报错信息: -- ::, INFO [pool--thread-] cli.DictionaryGeneratorCLI: : Building snapshot of ENERGON_DM.DM_D ...