Webpack5 处理 CSS文件

1、背景Webpack 本身仅能处理Js文件无法识别CSS文件及代码。因此需在webpack.config.js文件中进行单独处理。2、基础框架搭建1、搭建简单项目框架执行npm install -y指令生成package.json文件执行npm install webpack webpack-cli html-webpack-plugin指令安装webpack相关依赖执行npm install babel-loader指令安装babel编辑处理js文件及相关文件根目录创建public文件创建public/index.html文件根目录创建src目录创建src/index.js文件根目录创建webpack.config.js文件2、配置webpack.config.js文件const path require(path); const HtmlWebpackPlugin require(html-webpack-plugin); module.exports { mode: development, // development | production | none entry: ./src/index.js, output: { path: path.resolve(__dirname, dist), filename: js/main.js, clean: true, }, devServer: { static: path.join(__dirname, public), // 静态文件目录用于托管HTML文件等 open: true, port: 8080, hot: true, }, plugins: [ new HtmlWebpackPlugin({ template: ./public/index.html, filename: index.html, // 包后的html文件名称 inject: head, }), ], module: { rules: [], }, };3、配置package.jsn文件{ name: webpack-less, version: 1.0.0, description: , main: index.js, scripts: { test: echo \Error: no test specified\ exit 1, build: webpack }, keywords: [], author: , license: ISC, dependencies: { html-webpack-plugin: ^5.6.3, webpack: ^5.100.1, webpack-cli: ^6.0.1 } }4、src/index.js 文件console.log(123123123);5、运行结果打开控制台进入项目目录运行npm run dev指令在根目录下 将会生成/dist目录。3、解析CSS文件1、编辑 /public/index.html 文件2、创建并编辑 /src/index.css 文件给classroot添加样式3、在入口文件 /src/index.js 中引入 index.css4、使用 style-loader css-loader 处理css文件运行npm install style-loader css-loader指令安装依赖5、配置webpack.config.js文件{ test: /\.css$/, use: [style-loader, css-loader], exclude: /node_nodules/ }6、 结果运行 npm run build指令打包在浏览器中查看 /dist/index.html。7、思考css代码已生效。不过通过打包结果来看css代码被会被嵌入到/dist/main.js文件中随着项目的复杂程度提升css代码量会大幅度增加如采用上述方案/dist/main.js 的文件体积会越加庞大。基于此情况为了方便管理我们会希望将 css代码打包成一个单独CSS文件。4、提取css代码到独立的CSS文件中1、mini-css-extract-plugin作用用于提取css文件到单独文件中2、配置1、执行npm install mini-css-extract-plugin指令安装插件2、配置webpack.config.js 文件const path require(path); const HtmlWebpackPlugin require(html-webpack-plugin); const MiniCssExtractPlugin require(mini-css-extract-plugin); module.exports { mode: development, // development | production | none entry: ./src/index.js, output: { path: path.resolve(__dirname, dist), filename: js/main.js, clean: true, }, devServer: { static: path.join(__dirname, public), // 静态文件目录用于托管HTML文件等 open: true, port: 8080, hot: true, }, plugins: [ new HtmlWebpackPlugin({ template: ./public/index.html, inject: head }), new MiniCssExtractPlugin({ filename: css/[name]_[contenthash].css, chunkFilename: css/[id]_[contenthash].css }) ], module: { rules: [ { test: /\.css$/, use: [MiniCssExtractPlugin.loader, css-loader], exclude: /node_nodules/, }, ], }, };3、运行 npm run build 指令打包在浏览器中查看效果通过上述配置可以看到css代码已经成功被提取到了单独的CSS文件之下。然而在实际项目中我们仍会觉得CSS文件体积太大。因此我们在实际的打包环节一般会对CSS代码进行进一步的压缩处理以减小CSS文件体积增加项目的运行数独。5、压缩CSS代码1、postcss-loader作用压缩CSS代码2、配置执行npm install postcss-loader autoprefixer指令安装配置在根目录创建并配置postcss.config.js文件配置webpack.config.js文件3、运行 npm run build 指令可以看到 css文件已经被单独打包至/dist/css目录下并通过link标签注入到html中6、对less的处理对less/sass的处理与对css的处理类似1、安装 less-loader2、配置 webpack.config.js文件{ test: /\.(css|less)$/, use: [ MiniCssExtractPlugin.loader, css-loader, postcss-loader, less-loader ], exclude: /node_nodules/, }