html如何打包压缩,所有css打包压缩到一个js里面

所有css打包压缩到一个js里面

打包css文件的意义：最终把css文件压缩到最终生成的js文件里，页面不需要再加载css文件，并且是压缩过的

打包css文件，安装style-loader css-loader

npm install --save-dev style-loader css-loader

在入口文件的 js文件里引入css文件，可以引入多个css文件

import '../css/a.css' ; // 引入css样式

import '../css/b.css' ; // 引入css样式

在module里面引入模块打包插件style-loader,css-loader

//文件加载器 loader

//loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)

module: {

rules: [

{ // 打包 css

test: /\.css$/, // 正则表达式，表示.css后缀的文件

use: ['style-loader','css-loader'] // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行

}

]

},

html 插件注册里面，需要配置下面这个属性，就是引入入口文件的 js

chunks:['js/a'],

具体webpack 配置如下

// 1. 这种方式，把多个 js 自动打包成默认的 main.js ，直接在 dist 文件夹里面，和生成的 html 文件同级

// 2. 而且，html 插件里，没有引入也会自动引入 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 插件 ， 新版本都采用这个

module.exports={

// mode:"development" , //开发模式，没有对js等文件压缩，默认生成的是压缩文件

mode : 'production' ,

entry:[

'./htmlDist/cn/js/A.js',

'./htmlDist/cn/js/B.js',

],

output:{

// __dirname 表示webpack.config.js 这个配置文件的位置

// filename:'[name].js', //输入的文件名是什么，生成的文件名也是什么，默认配置

filename:'[name].[chunkhash:8].js',//增加8位的哈希值，生成新的动态文件 ，

path:path.resolve(__dirname,'dist') //指定生成的文件目录

},

plugins:[

new CleanWebpackPlugin() , // 使用清除旧文件的插件

new htmlWebpackPlugin({ // 打包 cn-index.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({ // 打包 cn-index.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: [

{ // 打包 css

test: /\.css$/, // 正则表达式，表示.css后缀的文件

use: ['style-loader','css-loader'] // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行

},

{ // 打包 html 里面的 img 图片

test: /\.(htm|html)$/i,

use: 'html-withimg-loader'

},

{ // 打包 css 里面的 img 图片

test: /\.(png|svg|jpg|gif)$/,

// use: ['file-loader'],

use:[

{

loader:'url-loader',

options: {

name: 'images/[name].[ext]',

// 这里limit属性的作用就是将小于8192B(8.192K)大小的图片转成base64格式，而大于这个大小的图片将会以file-loader的方式进行打包处理

// 如果不写limit属性，那么url-loader就会默认将所有图片转成base64

// limit: 102400

// file-loader 默认使用了最新版本，返回的是 [object module] ，会导致 打包图片 失败，添加这个

esModule:false

}

}

]

},

]

},

performance: { // 就是为了加大文件允许体积，提升报错门栏。

hints: "warning", // 枚举

maxAssetSize: 500000, // 整数类型(以字节为单位)

maxEntrypointSize: 500000, // 整数类型(以字节为单位)

assetFilter: function(assetFilename) {

// 提供资源文件名的断言函数

return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');

}

},

watch:true , // 时时监控

}

所有css打包压缩到一个js里面 相关文章

css文件单独打包到dist文件夹后面，生成单独的css 文件

打包css文件，并把css文件单独打包出来到dist文件夹中，打包后的html会自动引入打包后的css,js文件 这种打包方式，需要 CSS样式抽离之mini-css-extract-plugin插件 步骤： 1.安装： npminstallmini-css-extract-plugin-D 2. 引入变量 var MiniCssExtractPlug

css readonly和disabled的区别

readonly表示“只读”，一般表示对于文字内容只读，即不可更改内容，对于非文字的表单“只读”与“不只读”似乎没有啥区别； disabled表示“使残废，使无效”，都残废了，那还管你有没有文字内容，都得残掉。 1、readonly和disabled作用元素的范围不同 那么

P3916 图的遍历

一个节点的解,即其所有子节点解的最大值,所以一开始想要dfs+记忆化,交上去发现完全不对,因为没有说数据里没有环. 由于我太弱,没有想到如何dfs带环图. 对于一个节点,可以对其所有父节点的解进行更新,使其不小于该节点编号. 故此,编号为N的节点的父节点,及其父

CSS-基本选择器

css基本选择器 标签选择器 标签选择器(元素选择器)是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。 语法: body{ background-color:blue; } 标签选择器{ ?属性：属性值 ?... ?} 作用:标签选择器(元素选择器)是

打包构建与性能优化

一，运行npm run build, 会自动生成dist文件夹，有两个静态的js资源 1.，chunk-vendors.js是第三方的插件的js文件，app.js是自己定义的组件等写的文件，哈希的文件，如果跟新文件，浏览器有缓存，不需要用户再去请求，直接用本地资源 增量发布 2.，vue-cli3,

多个 js ,多个 html 同时打包流程

webpack 配置： const path=require('path'); //调用node.js中的路径const {CleanWebpackPlugin} = require('clean-webpack-plugin'); // 清除旧的出口文件，使用 有hash 值的新文件var htmlWebpackPlugin = require('html-webpack-plugin'); // 打包 html

CSS Flex 弹性布局使用