css文件单独打包到dist文件夹后面，生成单独的css 文件
打包css文件，并把css文件单独打包出来到dist文件夹中，打包后的html会自动引入打包后的css,js文件
这种打包方式，需要 CSS样式抽离之mini-css-extract-plugin插件
步骤：
1.安装： npminstallmini-css-extract-plugin-D
2. 引入变量 var MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 单独打包后的 .css 插件 ， 新版本都采用这个
3.模块配置
module: { //文件加载器 loader
/* 单独打包 分离 css 和 js 文件插件开始 */
rules: [
{
test: /\.css$/,
use : [
MiniCssExtractPlugin.loader,
{ loader: "css-loader" }
]
},
/* 单独打包 分离 css 和 js 文件插件结束 */
]
},
4. 插件配置:注意，分离打包js和css文件的时候，，html插件在注册使用的时候，不能引入入口里的js文件名，否则，还是会打包成单独一个js
plugins: [
new MiniCssExtractPlugin({ // 压缩打包css 文件插件
filename: "css/[name].css" // 打包后最终生成的 dist 文件里面的 打包后的 css 文件
}),
new htmlWebpackPlugin({ // 打包 A.html 文件插件
minify:{
minimize:true,//是否打包为最小值
removeAttrbuteQuotes:true,//去除引号
removeComments:true,//去掉注释
collapseWhitespace:true,//去掉空格
minifyCss:true,//压缩css
removeEmptyElements:false,//清理内容为空的元素
},
template:"./htmlDist/cn/A.html" , // 引入需要打包的 html 文件 ，并生成到 最终的dist 文件夹里面去，
// title:'A.html', // 最终生成的 文件名
// chunks:['js/a'], //需要引入的js文件名称,就是入口里面，自己命名的结果
filename: "A.html", //生成html文件的文件名，默认是index.html
hash:true , //引入产出的资源时加上哈希避免缓存
inject: true,
}),
]
webpack.config.js配置如下
const path=require('path'); //调用node.js中的路径
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); // 清除旧的出口文件，使用 有hash 值的新文件
var htmlWebpackPlugin = require('html-webpack-plugin'); // 打包 html 插件
var MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 单独打包后的 .css 插件 ， 新版本都采用这个
// var ExtractTextPlugin = require('extract-text-webpack-plugin'); // 抽离 css 文件打包插件 ; 这个版本引进被废弃
module.exports={
// mode:"development" , //开发模式，没有对js等文件压缩，默认生成的是压缩文件
mode : 'production' ,
entry:{ // 单个 js 打包
'js/a':'./htmlDist/cn/js/A.js' , // 分页打包成 css
'js/b':'./htmlDist/cn/js/B.js' , // 分页打包成 css
},
output:{
// __dirname 表示webpack.config.js 这个配置文件的位置
// filename:'[name].js', //输入的文件名是什么，生成的文件名也是什么，默认配置
filename:'[name].[chunkhash:8].js',//增加8位的哈希值，生成新的动态文件 ，
path:path.resolve(__dirname,'dist') //指定生成的文件目录
},
plugins:[
new CleanWebpackPlugin() , // 使用清除旧文件的插件
new MiniCssExtractPlugin({
filename: 'css/[name].css', // 打包分离后的文件名
}),
new htmlWebpackPlugin({ // 打包 A.html 文件插件
minify:{
minimize:true,//是否打包为最小值
removeAttrbuteQuotes:true,//去除引号
removeComments:true,//去掉注释
collapseWhitespace:true,//去掉空格
minifyCss:true,//压缩css
removeEmptyElements:false,//清理内容为空的元素
},
template:"./htmlDist/cn/A.html" , // 引入需要打包的 html 文件 ，并生成到 最终的dist 文件夹里面去，
// title:'A.html', // 最终生成的 文件名
// chunks:['js/a'], //需要引入的js文件名称
filename: "A.html", //生成html文件的文件名，默认是index.html
hash:true , //引入产出的资源时加上哈希避免缓存
inject: true,
}),
new htmlWebpackPlugin({ // 打包 B.html 文件插件
minify:{
minimize:true,//是否打包为最小值
removeAttrbuteQuotes:true,//去除引号
removeComments:true,//去掉注释
collapseWhitespace:true,//去掉空格
minifyCss:true,//压缩css
removeEmptyElements:false,//清理内容为空的元素
},
template:"./htmlDist/cn/B.html" , // 引入需要打包的 html 文件 ，并生成到 最终的dist 文件夹里面去，
// title:'A.html', // 最终生成的 文件名
// chunks:['js/a'], //需要引入的js文件名称
filename: "B.html", //生成html文件的文件名，默认是index.html
hash:true , //引入产出的资源时加上哈希避免缓存
inject: true,
}),
],
devServer: { // 本地服务器配置
contentBase: './dist', //默认本地服务器所在的根目录
historyApiFallback: true, //是否跳转到index.html
inline: true, //源文件改变时刷新页面
port: 8084 , //端口号，默认8080
hot: true,
},
module: { //文件加载器 loader
/* 单独打包 分离 css 和 js 文件插件开始 */
rules: [
{
test: /\.css$/,
use : [
MiniCssExtractPlugin.loader,
{ loader: "css-loader" }
]
},
/* 单独打包 分离 css 和 js 文件插件结束 */
]
},
performance: { // 就是为了加大文件允许体积，提升报错门栏。
hints: "warning", // 枚举
maxAssetSize: 500000, // 整数类型(以字节为单位)
maxEntrypointSize: 500000, // 整数类型(以字节为单位)
assetFilter: function(assetFilename) {
// 提供资源文件名的断言函数
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
},
watch:true , // 时时监控
}
注意：这种打包，会生成单独的 多个 css ,js 文件，并且，html 页面会自动引入 css ,js 文件，(会全部引入)
css文件单独打包到dist文件夹后面，生成单独的css 文件 相关文章
linux 文件上传下载
1、简述 通常，利用SSH管理远程Linux服务器时，经常需要与本地交互文件。当然，我们可以利用FTP方式，比如通过Filezilla客户端软件。不过直接使用SSH软件(SecureCRT、Xshell)自带的上传和下载功能无疑使最方便快捷的。通常SSH软件支持的文件传输协议主要有
quartz 任务错过处理， java读取resource下文件，JSONObject、String、Map互相转换，Array、List、Set互转实例
quartz 任务错过处理 [来源1] [来源2] 采用StatefulJob,使jobDetails顺序执行,只有前一次job运行完成后，才会运行本次job; 而多个jobDetails可以并行,互不影响，因为它们是多个线程各自运行; // 设置错失触发后的调度策略 withMisfireHandlingInstructionDoN
vue添加水印
创建watermark.js文件 let watermark = {}let setWatermark = (str) = { let id = '1.23452384164.123412415' if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)) } let can = document.createElement('c
css readonly和disabled的区别
readonly表示“只读”，一般表示对于文字内容只读，即不可更改内容，对于非文字的表单“只读”与“不只读”似乎没有啥区别； disabled表示“使残废，使无效”，都残废了，那还管你有没有文字内容，都得残掉。 1、readonly和disabled作用元素的范围不同 那么
【RobotFramework】使用RequestLibrary编写通过表单方式提交xlsx文件的测试用例
最近小组成员碰到一个需求，需要使用Robot Framework的RequestLibrary库实现通过表单的方式提交xlsx到接口的测试用例。研究了一下RequestLibrary的相关文档，RequestLibrary是可以支持这样的操作的。 RequestLibrary的官方文档现在建议使用Post On Session来
Java操作Word(docx), 填充模板文件并转为pdf
Java操作Word('docx'), 填充模板文件并转为pdf 1. pom相关依赖 工具poi-tl (操作word文档模板) + jacob (将操作后的word模板转为pdf) !-- poi-tl的pom依赖 -- dependency groupIdcom.deepoove/groupId artifactIdpoi-tl/artifactId version1.9.1/version/dep
上传本地文件到gitee
上传本地文件夹到gitee 基本准备 需要在gitee上创建相应的仓库 需要有git的客户端 配置git工具与基本信息 在桌面中直接 git bash here 打开指令框。进行配置 // gitee用户名git config --global user.name "Serendipitychen"//gitee账户邮箱git config --glo
GO学习-(13) Go语言基础之文件操作
Go语言文件操作 本文主要介绍了Go语言中文件读写的相关操作。 文件是什么 计算机中的文件是存储在外部介质(通常是磁盘)上的数据集合，文件分为文本文件和二进制文件。 打开和关闭文件 os.Open() 函数能够打开一个文件，返回一个 *File 和一个 err 。对得到
【史上最全】Hadoop 核心 - HDFS 分布式文件系统详解(上万字建议收藏)
1. HDFS概述 Hadoop 分布式系统框架中，首要的基础功能就是文件系统，在 Hadoop 中使用 FileSystem 这个抽象类来表示我们的文件系统，这个抽象类下面有很多子实现类，究竟使用哪一种，需要看我们具体的实现类，在我们实际工作中，用到的最多的就是HDFS(分布
sed替换配置文件
sed -r -e "s#(.*ip: ).*#199.199.10.102#g" application.ymlsed -r -e "s#(.*ip: ).*#\1199.199.10.102#g" application.ymlsed -r -e "s#(ip: ).*#\1199.199.10.102#g" application.ymlsed -r -e "s#(ip: ).*#\1199.199.10.102#g" -e "s#(url: jdbc:mysql:/
