打包成单独的HTML文件,【WEBPACK】分离css单独打包
时间:2018-11-21 00:58:56
这篇文章非常非常早了,webpack4下已经无法用了, 最新可以看这里webpack实战场景系列
CHANGELOG
2018-02-08 14:46:06
刚看了下,网上查了 webpack单独打包css,找到的文章,本文比较靠前,但是由于写的比较混乱,因此重新整理一下内容,更通俗易懂一点。
2018-02-01 14:45:23
由于这篇文章只写了如何把CSS打包成一个CSS文件,没有讲解如何打包成多个CSS文件,经简友提点,这里添加上了 打包成多个CSS文件的方法。
2016-05-17 11:55
刚学习webpack,记录一下webpack如何单独打包css
零、介绍
以下是个人项目中总结出来的一些基本知识,记录在这里,加深自己的印象,也让大家能够更快速方便的了解webpack,并且使用它。能力所限,有错误或者问题,请帮忙指出。
webpack 把所有的资源都当成了一个模块, CSS,Image, JS 字体文件 都是资源, 都可以打包到一个 bundle.js 文件中.
image.png
webpack基本的使用很简单,但是要方方面面都讲解的话内容很多,因此这边主要讲解一下 如何使用webpack单独打包css。
至于打包出来,怎么加hash值,怎么替换html中的引用路径,怎么上传到CND可以使用gulp来实现。【有兴趣后面在写一篇文章】
一、extract-text-webpack-plugin 用法
单独打包css,在webpack需要使用一个插件,extract-text-webpack-plugin
1. 安装extract-text-webpack-plugin
// use npm
npm install extract-text-webpack-plugin --save-dev
// or use yarn
yarn add extract-text-webpack-plugin
2. 配置
加载器里面写好插件的配置(使用什么加载器),在webpack的 plugins 里面设置抽离出来的CSS文件名叫什么。
var Ex = require('extract-text-webpack-plugin');
// ...省略
module: {
loaders: [{
test: /\.less/,
loader: Ex.extract('style-loader', 'css-loader','less-loader') // 单独打包出CSS,这里配置注意下
}]
},
plugins: [
new Ex("【name】.css")
]
下面放两个实际使用例子,方便大家理解
二、单页面应用,把JS里面的CSS单独打包
打包一个文件,只需要常规的在入口的js文件引用 css文件即可, 打包成多个CSS文件,可以设置多个CSS入口,让webpack用 loader去打包。 和分割单独打包js文件一样。下面有两个例子。
// webpack 1.x 配置 【早期使用的配置,那时候是1.x】
/* 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: './index.js',
output: {
filename: 'index.js'
},
module: {
loaders: [{
test: /\.less/,
loader: Ex.extract('style-loader', 'css-loader','less-loader') // 单独打包出CSS,这里配置注意下
}]
},
plugins: [
new Ex("【name】.css")
]
}
三、webpack如何打包多个CSS文件
2. 配置文件添加对应配置
下面直接提供一个完成的多入口CSS打包配置
// webpack 3.x 的配置
var path = require('path')
var glob = require('globby')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
// CSS入口配置
var CSS_PATH = {
css: {
pattern: ['./src/**/[^_]*.less', '!./src/old/**/*.less'],
src: path.join(__dirname, 'src'),
dst: path.resolve(__dirname, 'static/build/webpack'),
}
}
// 遍历除所有需要打包的CSS文件路径
function getCSSEntries(config) {
var fileList = glob.sync(config.pattern)
return fileList.reduce(function (previous, current) {
var filePath = path.parse(path.relative(config.src, current))
var withoutSuffix = path.join(filePath.dir, filePath.name)
previous[withoutSuffix] = path.resolve(__dirname, current)
return previous
}, {})
}
module.exports = [
{
devtool: 'cheap-module-eval-source-map',
context: path.resolve(__dirname),
entry: getCSSEntries(CSS_PATH.css),
output: {
path: CSS_PATH.css.dst,
filename: '[name].css'
},
module: {
rules: [
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
use: ['css-loader', 'postcss-loader', 'less-loader']
})
}
]
},
resolve: {
extensions: ['.less']
},
plugins: [
new ExtractTextPlugin('[name].css'),
]
},
// 如果还需要打包js,则可以在这里增加一个单独打包js的处理【根据自己需求来】
// {
// entry:{},
// output:{},
// ... 省略
// }
]
可能有同学还在使用webpack1.x,所以这里在贴一下webpack1.x 的简单配置
// webpack 1.x 版本
// ...其他配置和webpack3.x一样
module: {
loaders: [
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader","css-loader","postcss-loader","less-loader")
},
]
}
plugins: [
new ExtractTextPlugin('[name].css'),
]
// ...其他配置和webpack3.x一样
打包成单独的HTML文件,【WEBPACK】分离css单独打包相关推荐
- 如何将一个html网页打包,webpack分离css单独打包的方法
本文介绍了webpack分离css单独打包的方法,分享给大家,具体如下: CHANGELOG 2018-02-08 14:46:06 刚看了下,网上查了 webpack单独打包css,找到的文章,本文 ...
- webpack分离css单独打包
原文地址为: webpack分离css单独打包 CHANGELOG 2018-02-08 14:46:06 刚看了下,网上查了 webpack单独打包css,找到的文章,本文比较靠前,但是由于写的比较 ...
- webpack如何将css文件分离的,详解webpack分离css单独打包
这篇文章只写了如何把css打包成一个css文件,没有讲解如何打包成多个css文件,经简友提点,这里添加上了 打包成多个css文件的方法. 瞎扯 webpack 把所有的资源都当成了一个模块, css, ...
- webpack 分离css html,webpack分离css并单独打包的方法
这篇文章主要介绍了webpack分离css单独打包的方法,内容挺不错的,现在分享给大家,也给大家做个参考. 本文介绍了webpack分离css单独打包的方法,分享给大家,具体如下: CHANGELOG ...
- php程序打包exe文件下载,手把手教你把前端代码打包成msi和exe文件
本文主要介绍Electron应用如何打包成msi和exe文件. 由于介绍Electron打包成msi和exe的文章很少,官方的文档也一笔带过,在研究的过程中踩了很多坑,所以写下此文,给其他人一个参考. ...
- python打包成二进制文件_pyinstall python文件打包成二进制exe文件
pycharm + python3 + win7 1 pip install pyinstall (官网) 2 准备 .py 文件 3 具体例子 from PyQt5.QtWidgets impor ...
- Java Maven项目打包成可执行jar文件
在pom文件中添加一下内容 <build><plugins><plugin><!-- Build an executable JAR --><gr ...
- 将exe和dll文件打包成单一的启动文件
将exe和dll文件打包成单一的启动文件 当我们用 VS 或其它编程工具生成了可执行exe要运行它必须要保证其目录下有一大堆dll库文件,看起来很不爽,用专业的安装程序生成软件又显得繁琐,下面这个 ...
- 使用压缩软件将exe和dll文件打包成一个exe启动文件
问题:以搜狗输入法的截图软件为例,如何将exe和dll文件打包成一个的exe可执行文件,即将该软件目录下的文件合并成一个可以独立运行的exe文件 解决:通过压缩软件,本文我使用的软件是2345好压.( ...
最新文章
- 如何开启win10内置Linux子程序
- 刚刚,“达摩院2020十大科技趋势”正式发布!
- 神经网络到底是如何实现分类的---共振参考系假设
- ThreadLocal可以解决并发问题吗
- 实数序列频谱的共轭对称性(DFT与IDFT仿真实现)
- 前端开发知识点解答-JavaScript-面试
- 沥青防水卷材行业调研报告 - 市场现状分析与发展前景预测
- html论坛注册代码,Discuz!论坛代码大全和HTML代码大全 | 穆小刚营销博客
- 图片云存储(腾讯云 七牛云)
- 嫌我们理科生不够浪漫?你有一份音乐数学入门指南待查收
- logstash安装 window版
- 第三方cookie是如何窥视你的?
- Educational Codeforces Round 51 (Rated for Div. 2).B. Relatively Prime Pairs(水题)
- 使用源码部署CITA(Ubuntu18.0.4 | VMware)
- Terraform 基础 定义阿里云资源 VPC、安全组
- Linux按键响应测试
- upx壳的一些简单脱壳,望大牛勿喷。
- 从硬盘中安装ubuntu 18,04
- 【美股接口】新浪港股、美股行情接口
- 甘谷县职业中等专业学校学生厌学原因调查及对策