webpack高级概念,CSS文件的代码分割 与压缩(系列八)
2023-09-11 14:20:08 时间
我们之前写的css文件都会被打包进js文件中,要想把css单独打包成一个css文件该怎么做呢?
这个时候就需要用到 MiniCssExtractPlugin
开发环境用不到这个功能(因为这个东西不支持热模块更新,样式更改自动替换,不用刷新页面),一般都是用在生产环境中。
安装: npm install --save-dev mini-css-extract-plugin
如何将打包成的css文件压缩呢,需要用到optimize-css-assets-webpack-plugin
安装;npm install optimize-css-assets-webpack-plugin --save-dev
webpack.dev.js,开发环境的style-loader不需要替换
const webpack = require('webpack'); const merge = require('webpack-merge'); const commonConfig = require('./webpack.common.js'); const devConfig = { mode: 'development', devtool: 'cheap-module-eval-source-map', devServer: { contentBase: './dist', open: true, port: 8080, hot: true }, module: { rules: [{ test: /\.scss$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 2 } }, 'sass-loader', 'postcss-loader' ] }, { test: /\.css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader' ] }] }, plugins: [ new webpack.HotModuleReplacementPlugin() ], // 树摇 optimization: { usedExports: true } } module.exports = merge(commonConfig, devConfig);
webpack.prod.js, 生产环境,生产环境默认有树摇功能,对css模块导入会去除,需要在package.json中配置下,禁止树摇css模块
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); const merge = require('webpack-merge'); const commonConfig = require('./webpack.common.js'); const prodConfig = { mode: 'production', devtool: 'cheap-module-source-map', module: { rules:[{ test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, //修改loader,将原来的style-lodader替换,不然没效果 { loader: 'css-loader', options: { importLoaders: 2 } }, 'sass-loader', 'postcss-loader' ] }, { test: /\.css$/, use: [
MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' ] }] }, optimization: { minimizer: [new OptimizeCSSAssetsPlugin({})] }, plugins: [ new MiniCssExtractPlugin({ //配置插件,两个属性都是可选的,配置打包后css名称 filename: '[name].css', chunkFilename: '[name].chunk.css' }) ] } module.exports = merge(commonConfig, prodConfig);
package.json, 生产环境默认有树摇功能,对css模块导入会去除,需要在package.json中配置下,禁止树摇css模块
{ "name": "lesson", "sideEffects": [ "*.css" ], "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev-build": "webpack --config ./build/webpack.dev.js", "dev": "webpack-dev-server --config ./build/webpack.dev.js", "build": "webpack --config ./build/webpack.prod.js" },
index.js入口文件
import './style.css'; import './style1.css'; console.log('hello world');
style.css
body {
background: green;
}
style1.css
body { font-size: 100px; }
这样打包(npm run build)之后,css会被单独打包成一个css文件。并且代码是压缩的
相关文章
- DVWA之File Inclusion(文件包含)
- Thrift 文件的格式及可用的数据类型
- kubernetes ConfigMap 文件映射详解
- 渗透测试-任意文件上传及客户端绕过案例
- Linux常用基础命令:目录和文件的管理命令
- Web 在线文件管理器学习笔记与总结(6)jQuery UI 预览图片
- 在python中读写matlab文件
- 在Linux中,没有文件创建时间的概念。只有文件的访问时间、修改时间、状态改变时间
- CentOS下递归遍历文件夹下所有文件,查找指定字符
- .md 文件编辑
- Nginx访问PHP文件的File not found错误处理,两种情况
- php命令行按模板生成应用的入口文件
- 手把手学习Vue3.0:开发工具WebStorm和Vue模板文件介绍
- webpack高级概念,webpack与浏览器的缓存,打包文件hash命名(系列九)
- yarn : 无法加载文件 C:Users1AppDataRoamingnpmyarn.ps1,因为在此系统上禁止运行脚本