webpack css打包为一个css
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: 0;
padding: 0;
}
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、效果
更多专业前端知识,请上 【猿2048】www.mk2048.com
webpack css打包为一个css相关推荐
- css网格_一个CSS网格可以全部统治
css网格 The case for using one CSS grid for your entire website 在整个网站上使用一个CSS网格的情况 CSS网格与Flexbox (CSS ...
- 打包html js为一个文件,在vue-cli中如何将所有js以及css打包成一个js文件
这样的需求不是很合理啊.具体参考楼上回答. 但非要实现也可以. 1.再怎么样,我也建议提取css建议.不然等待JS加载完,才显示样式.用户明显可以看出样式缺失,然后才有样式. 提取使用的插件是用的ex ...
- webpack 打包html中css样式如果处理,webpack中单独打包css样式
这次给大家带来webpack中单独打包css样式,webpack中单独打包css样式的注意事项有哪些,下面就是实战案例,一起来看一下. 零.介绍 以下是个人项目中总结出来的一些基本知识,记录在这里,加 ...
- CSS文件引入另一个CSS文件
1在HTML中引入css的其中的两个方法 1.1 使用链接式 <link href="style.css" rel="stylesheet" type=& ...
- webpack4.0 css压缩js压缩 css 样式添加前缀
webpack.config.js配置文件 /*webpack 是node写出来的node的写法*/ let path = require("path"); let HtmlWeb ...
- css初识:样式的引用、css复合选择器、css书写规范、css背景
引入CSS样式表 CSS可以写到那个位置? 是不是一定写到html文件里面呢? 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: ...
- html如何打包压缩,所有css打包压缩到一个js里面
所有css打包压缩到一个js里面 打包css文件的意义:最终把css文件压缩到最终生成的js文件里,页面不需要再加载css文件,并且是压缩过的 打包css文件,安装style-loader css-l ...
- Webpack安装及打包js、css文件示例
什么是Webpack Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.Webpack 可以将多种静态资源 js.css ...
- 翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案
原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者: Anthony Gore 译者: 蜗牛 ...
最新文章
- js隐藏或显示某区域
- Oracle 数据库 Database Express Edition 11g Release 2 (11.2) 错误解决集锦(安装方面)
- 基础知识:元组、字典、集合
- SpringMVC拦截器之介绍和搭建环境
- 未声明spire。它可能因保护级别而不可访问_信息系统安全:访问控制技术概述...
- linux限制单个ip频繁连接,限制单个IP并发TCP连接的方法
- 极光推送java demo_极光推送- 3 分钟 Demo - 极光文档
- 教授坦言:只要不退休,就始终会面临考核压力;如何帮助学生迈过毕业论文这道槛,已成为职业负荷之一...
- opencv16-Sobel算子
- 32 - III. 从上到下打印二叉树 III
- 修改系统提供视图类的显示字体
- 今天我离开了工作四年的大宇
- [C/C++] ccpuid:CPUID信息模块 V1.02版,支持Mac OS X,支持纯C,增加CPUF常数
- tp5 mysql 使用ignore_tp5数据库配置操作
- 总纲篇:塑胶材料选型、模具工艺、注塑工艺指导
- 自主证件采集录入系统-嵌入式护照阅读器
- 阿里云心选“小眯眼摄像头”视频监控天猫精灵可控手机远程wifi高清
- IOS系统历届版本大回顾(iOS7)
- SqlServer Tigger
- java hex_使用java实现hex和ascii码的转换
热门文章
- android 号码查联系人,Android联系人查询
- 基于VS的连连看小游戏
- python装饰器class_Python中的各种装饰器详解
- php faker 中文,使用faker 生成中文测试数据
- 2018-2019-2 20165221 【网络对抗技术】-- Exp9 Web安全基础
- 关于CUDA和CuDNN配置的小问题
- Java----前端验证之验证码额实现
- centos6.8升级python3.5.2
- android listview使用自定义的adapter没有了OnItemClickListener事件解决办法
- 对PostgreSQL SPI例子的学习