angular - 使用 webpack 为 Angular 6 项目缩小多个 css 文件
问题描述
Angular 6 压缩了 CSS 文件,但没有缩小它。我需要缩小 CSS 文件。
目前我正在使用这些命令进行生产构建。
包.json
"build": "run-s build:client build:aot build:server",
"build:client": "ng build --prod --build-optimizer && ng run elgrocer:server",
"build:aot": "ng build --aot --prod --build-optimizer --output-hashing=all",
"build:server": "webpack -p"
webpack.config.js
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{ test: /\.ts$/, loader: 'ts-loader' }
]
},
optimization: {
minimizer: [
new UglifyJsPlugin()
]
},
plugins: [
new CompressionPlugin({
algorithm: 'gzip'
})
]
目前它像这样在 index.html 文件中添加 css 样式。
<style ng-transition="app">.sign-in[_ngcontent-sc6] {
font-size: 15px;
padding: 8px 16px;
border-radius: 100px;
}
.sign-up[_ngcontent-sc6] {
font-size: 15px;
padding: 6px 14px;
border-radius: 100px;
border: 2px solid var(--Primary-Brand-1)!important;
color: var(--Primary-Brand-1);
}
.sign-in[_ngcontent-sc6] {
background: var(--Primary-Brand-1);
}
.top-nav[_ngcontent-sc6] li[_ngcontent-sc6] {
list-style: none;
display: inline-block;
margin-left: 10px
}</style>
期望的结果
<style ng-transition="app">.sign-in[_ngcontent-sc6]{font-size:15px;padding:8px 16px;border-radius:100px;}.sign-up[_ngcontent-sc6]{font-size:15px;padding:6px 14px;border-radius:100px;border:2px solid var(--Primary-Brand-1)!important;color:var(--Primary-Brand-1);}.sign-in[_ngcontent-sc6]{background:var(--Primary-Brand-1);}.top-nav[_ngcontent-sc6]li[_ngcontent-sc6]{list-style:none;display:inline-block;margin-left:10px}</style>
解决方案
您可以使用CssMinimizerWebpackPlugin。首先安装它:
$ npm install css-minimizer-webpack-plugin --save-dev
然后将其添加到您的配置中:
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
...
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{ test: /\.ts$/, loader: 'ts-loader' }
]
},
optimization: {
minimize: true,
minimizer: [
new UglifyJsPlugin(),
new CssMinimizerPlugin()
]
},
plugins: [
new CompressionPlugin({
algorithm: 'gzip'
})
]
从您的编辑中编辑
也许您有这种行为是因为您没有在单独的文件中提取 css,因此您可以使用使用HtmlWebpackPlugin来完成这项工作:
npm install --save-dev html-webpack-plugin
在您的配置中添加插件:
var HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin(),
new CompressionPlugin({
algorithm: 'gzip'
})
]
推荐阅读
- python - Cupy Scaling 行为时间
- node.js - 为什么此 Firestore 交易冻结?
- c - 在 C 中 strtok() 适用于“,”(逗号),但不适用于空格“”。使用空格时出现段错误
- google-app-engine - Google APP Engine - 为每个连接生成新实例或有零个实例
- javascript - 未选中 Jquery 复选框
- javascript - 图像在 Angular 中被缓存
- android - 当我添加带有 id (BottomNavigationView) 的布局元素时,Android 应用程序崩溃
- python - Python中的交叉口保持秩序
- android - InputMethodManager.showInputMethodPicker 当前未选择我的应用程序中的自定义键盘时未显示
- sql-server - SQL 查询需要在 4 秒内完成