2023年6月21日发(作者：)

Webpack提取样式打包成单独的css⽂件并做css兼容性处理以及压缩css在之前的webpack配置⽂件中，打包之后，css样式都是存在打包后的js⽂件的当中，且以字符串的形式存在。这样不利于我们对css兼容各浏览器的处理等操作。所以，我们必须将打包的css独⽴出来⼀个单独的⽂件。独⽴css⽂件配置需要⽤到⼀个插件：mini-css-extract-pluginnpm i mini-css-extract-plugin -D接着我们在的最上⽅引⼊此插件：const MiniCssExtractPlugin = require('mini-css-extract-plugin')在此配置⽂件中，凡是⽤到插件的，都需要在此⽂件导出的plugins中进⾏new对象，例如：//提取css成单独⽂件 new MiniCssExtractPlugin({ //对输出的⽂件重命名，如果不写则建⽴在项⽬build下，名称为 filename: 'css/' }),在new此对象的参数中，可写可不写，不写的话打包之后会⽣成⼀个在你的build⽬录下。写了filename之后，就会到你build⽬录下指定的css⽂件夹中，并且⽂件名为 。接着，你还需要在你的loader配置中修改⼀些配置，在之前，我们处理css⽂件是通过style-loader 和 css-loader 。使⽤style-loader 会创建style标签，将js中的样式资源插⼊进⾏，添加到head中⽣效。⽽我们现在是要将样式独⽴出⼀个⽂件出来，所以不能再使⽤style-loader，需要另外⼀个loader来代替style-loader，那就是 。配置如下：module:{ rules:[ //不同⽂件必须配置不同的loader处理 { //处理css⽂件，加载相应的loader进⾏处理，test

代表匹配哪些⽂件 test:/.css$/, //使⽤哪些loader进⾏处理

需要注意的是，loader需要下载安装,

如果需要⽤到多个loader，需要⽤use

写个数组 use:[ //创建style标签，将js中的样式资源插⼊进⾏，添加到head中⽣效 // 'style-loader', //将css⽂件变成commonjs模块加载js中，⾥⾯内容是样式字符串 'css-loader', //此loader取代style-loader，作⽤：提取js中的css成单独⽂件 ,

] } ] },完成以上步骤：1. 下载 mini-css-extract-plugin 并引⼊ MiniCssExtractPlugin2. 在plugins中创建MiniCssExtractPlugin对象3. 在loader配置中，取消style-loader,添加即可实现css⽂件的独⽴。css⽂件做兼容性处理css做兼容性处理是对不同浏览器的兼容问题进⾏配置，这⾥我们需要postcss库，这个库在webpack中使⽤需要postcss-loader，并且需要postcss-preset-env插件。此插件会帮助postcss识别⼀些环境，从⽽加载指定的配置，能够让兼容性精确到浏览器的某⼀个版本。安装：npm i postcss-loader postcss-preset-env -D此时配置loader不能再继续使⽤默认⽅式配置loader，⽐如：test:/.css$/,

use:[ //使⽤loader的默认配置 // 'postcss-loader' ]我们需要修改loader的配置，看下⾯的操作：在use中，添加⼀个对象，loader指定postcss-loader，⾥⾯多加⼀个options属性。配置完成之后，还需要到⽂件中配置browserlist，配置开发环境和⽣产环境。在默认情况下，此配置会使⽤⽣产环境下的配置，如果你想改为开发环境下的配置，可在⽂件的头部声明：_ENV = 'development'//修改loader的配置 { loader: 'postcss-loader', options:{ ident:'postcss', plugins:()=>[ //postcss的插件,帮助postcss找到中browserlist⾥⾯的配置，通过配置加载指定的css兼容性样式 /** * "browserslist": { * //

⽣产环境的配置：默认情况下是根据⽣产环境指定配置 "production": [ ">0.2%", "not dead", "not op_mini all" ], //

开发环境的配置 "development": [ //兼容最近⼀个版本的 Chrome "last 1 chrome version", //兼容最近⼀个版本的 Firefox "last 1 firefox version", //兼容最近⼀个版本的Safari "last 1 safari version" ] } */ require('postcss-preset-env')() ] } }以上步骤完成之后，你再进⾏打包，你的css⽂件内如果有⼀些平台差异的样式，则会出现多出兼容性的代码。css⽂件压缩在打包时压缩css⽂件需要借助⼀个插件：optimize-css-assets-webpack-pluginnpm i optimize-css-assets-webpack-plugin -D安装完之后进⾏引⼊：const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')接着，你只需要在plugins中进⾏new OptimizeCssAssetsWebpackPlugin() 对象即可。你再进⾏打包，css⽂件会被压缩。下⾯给个的完整配置：/** *

⾸先需要初始化 npm init *

接着下载 webpack webpack-cli

依赖包 *

然后就下载需要使⽤的loader * *

使⽤ webpack

命令进⾏打包 *///

设置nodejs环境变量_ENV = 'development'/** *

提取样式打包到单独的css⽂件中，需要下载插件： mini-css-extract-plugin * npm i mini-css-extract-plugin -D * *

压缩css optimize-css-assets-webpack-plugin * npm i optimize-css-assets-webpack-plugin -D */const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')const MiniCssExtractPlugin = require('mini-css-extract-plugin')//⽤来处理绝对路径const {resolve} = require('path')//html-webpack-plugin需要下载安装才可以使⽤const HtmlWebpackPlugin = require('html-webpack-plugin')s = { //⽂件打包⼊⼝⽂件，需要在此⽂件中引⼊⼀些需要打包的⽂件 entry: './src/', //打包之后的输⼊，⽂件名和路径 output:{ //打包之后的⽂件名 filename: '', //打包输出路径，__dirname是nodejs的变量，代表着当前⽂件的⽬录绝对路径 path: resolve(__dirname,'build') }, module:{ rules:[ //不同⽂件必须配置不同的loader处理 { //处理css⽂件，加载相应的loader进⾏处理，test

代表匹配哪些⽂件 test:/.css$/, //使⽤哪些loader进⾏处理

需要注意的是，loader需要下载安装,

如果需要⽤到多个loader，需要⽤use

写个数组 use:[ //创建style标签，将js中的样式资源插⼊进⾏，添加到head中⽣效 // 'style-loader', //将css⽂件变成commonjs模块加载js中，⾥⾯内容是样式字符串 'css-loader', //此loader取代style-loader，作⽤：提取js中的css成单独⽂件 , /** * css兼容性处理，需要postcss库，这个库要在webpack中使⽤需要postcss-loader ,还需要postcss-preset-env插件， *

此插件会帮助postcss识别⼀些环境，从⽽加载指定的配置，能够让兼容性精确到浏览器的某⼀个版本 * npm i postcss-loader postcss-preset-env -D */ //使⽤loader的默认配置 // 'postcss-loader' //修改loader的配置 { loader: 'postcss-loader', options:{ ident:'postcss', plugins:()=>[ //postcss的插件,帮助postcss找到中browserlist⾥⾯的配置，通过配置加载指定的css兼容性样式 /** * "browserslist": { * //

⽣产环境的配置：默认情况下是根据⽣产环境指定配置 "production": [ ">0.2%", "not dead", "not op_mini all" ], //

开发环境的配置 "development": [ //兼容最近⼀个版本的 Chrome "last 1 chrome version", //兼容最近⼀个版本的 Firefox "last 1 firefox version", //兼容最近⼀个版本的Safari "last 1 safari version" ] } */ require('postcss-preset-env')() ] } } ] }, { test:/.less$/, use:['style-loader','css-loader', //将less⽂件编译成css⽂件，需要下载less-loader和less 'less-loader'] }, { //处理图⽚资源 test:/.(jpg|png|gif)$/, //url-loader

只能处理样式中的图⽚资源，不能处理HTML中的图⽚资源 loader: 'url-loader', options:{ //

当图⽚⼤⼩⼩于8KB的时候，将图⽚进⾏base64处理 limit: 8*1024, //处理后的图⽚名称较长，截取hash值得前⼗位，并且以原图⽚的后缀名作为后缀 name: '[hash:10].[ext]', //需要注意的是，样式中的图⽚会通过esModule进⾏解析，会和下⾯处理HTML的img的⽅式不同，会导致解析失败 //所以，需要关闭es6模块化，转成commonjs的模式 esModule: false } }, { //处理HTML中的img test: /.html$/, loader:'html-loader' }, //打包其他资源(除了html/js/css资源以外的资源) { //这个意思是除了css js html

以外的资源 exclude:/.(css|js|html|less|jpg|png|gif)$/, //如果是单个loader，可以直接使⽤loader loader: 'file-loader', options:{ name: '[hash:10].[ext]' } } ] }, //如果需要处理html资源，需要引⼊html插件 plugins: [ //此时需要创建⼀个对象才能处理Html new HtmlWebpackPlugin({ //引⼊模板 template:'./src/' }), //提取css成单独⽂件 new MiniCssExtractPlugin({ //对输出的⽂件重命名，如果不写则建⽴在项⽬build下，名称为 filename: 'css/' }), //压缩css new OptimizeCssAssetsWebpackPlugin() ], //开发环境模式 mode:'development', //正式环境 // mode:'production' //开发服务器 devServer:

⽤来⾃动化（⾃动编译，⾃动打开浏览器，⾃动刷新浏览器等等） //特点：

只会在内存中编译打包，不会有任何输出 //启动devServer指令为：npx webpack-dev-server

需要进⾏下载： npm i webpack-dev-server -D devServer: { //选择运⾏⽬录（构建后的⽬录） contentBase: resolve(__dirname,'build'), //启动gzip压缩,，进⾏优化 compress: true, //设置端⼝号 port:3000, //运⾏之后⾃动打开默认浏览器 open: true }}```

2023年6月21日发(作者：)

Webpack提取样式打包成单独的css⽂件并做css兼容性处理以及压缩css在之前的webpack配置⽂件中，打包之后，css样式都是存在打包后的js⽂件的当中，且以字符串的形式存在。这样不利于我们对css兼容各浏览器的处理等操作。所以，我们必须将打包的css独⽴出来⼀个单独的⽂件。独⽴css⽂件配置需要⽤到⼀个插件：mini-css-extract-pluginnpm i mini-css-extract-plugin -D接着我们在的最上⽅引⼊此插件：const MiniCssExtractPlugin = require('mini-css-extract-plugin')在此配置⽂件中，凡是⽤到插件的，都需要在此⽂件导出的plugins中进⾏new对象，例如：//提取css成单独⽂件 new MiniCssExtractPlugin({ //对输出的⽂件重命名，如果不写则建⽴在项⽬build下，名称为 filename: 'css/' }),在new此对象的参数中，可写可不写，不写的话打包之后会⽣成⼀个在你的build⽬录下。写了filename之后，就会到你build⽬录下指定的css⽂件夹中，并且⽂件名为 。接着，你还需要在你的loader配置中修改⼀些配置，在之前，我们处理css⽂件是通过style-loader 和 css-loader 。使⽤style-loader 会创建style标签，将js中的样式资源插⼊进⾏，添加到head中⽣效。⽽我们现在是要将样式独⽴出⼀个⽂件出来，所以不能再使⽤style-loader，需要另外⼀个loader来代替style-loader，那就是 。配置如下：module:{ rules:[ //不同⽂件必须配置不同的loader处理 { //处理css⽂件，加载相应的loader进⾏处理，test

代表匹配哪些⽂件 test:/.css$/, //使⽤哪些loader进⾏处理

需要注意的是，loader需要下载安装,

如果需要⽤到多个loader，需要⽤use

写个数组 use:[ //创建style标签，将js中的样式资源插⼊进⾏，添加到head中⽣效 // 'style-loader', //将css⽂件变成commonjs模块加载js中，⾥⾯内容是样式字符串 'css-loader', //此loader取代style-loader，作⽤：提取js中的css成单独⽂件 ,

] } ] },完成以上步骤：1. 下载 mini-css-extract-plugin 并引⼊ MiniCssExtractPlugin2. 在plugins中创建MiniCssExtractPlugin对象3. 在loader配置中，取消style-loader,添加即可实现css⽂件的独⽴。css⽂件做兼容性处理css做兼容性处理是对不同浏览器的兼容问题进⾏配置，这⾥我们需要postcss库，这个库在webpack中使⽤需要postcss-loader，并且需要postcss-preset-env插件。此插件会帮助postcss识别⼀些环境，从⽽加载指定的配置，能够让兼容性精确到浏览器的某⼀个版本。安装：npm i postcss-loader postcss-preset-env -D此时配置loader不能再继续使⽤默认⽅式配置loader，⽐如：test:/.css$/,

use:[ //使⽤loader的默认配置 // 'postcss-loader' ]我们需要修改loader的配置，看下⾯的操作：在use中，添加⼀个对象，loader指定postcss-loader，⾥⾯多加⼀个options属性。配置完成之后，还需要到⽂件中配置browserlist，配置开发环境和⽣产环境。在默认情况下，此配置会使⽤⽣产环境下的配置，如果你想改为开发环境下的配置，可在⽂件的头部声明：_ENV = 'development'//修改loader的配置 { loader: 'postcss-loader', options:{ ident:'postcss', plugins:()=>[ //postcss的插件,帮助postcss找到中browserlist⾥⾯的配置，通过配置加载指定的css兼容性样式 /** * "browserslist": { * //

⽣产环境的配置：默认情况下是根据⽣产环境指定配置 "production": [ ">0.2%", "not dead", "not op_mini all" ], //

开发环境的配置 "development": [ //兼容最近⼀个版本的 Chrome "last 1 chrome version", //兼容最近⼀个版本的 Firefox "last 1 firefox version", //兼容最近⼀个版本的Safari "last 1 safari version" ] } */ require('postcss-preset-env')() ] } }以上步骤完成之后，你再进⾏打包，你的css⽂件内如果有⼀些平台差异的样式，则会出现多出兼容性的代码。css⽂件压缩在打包时压缩css⽂件需要借助⼀个插件：optimize-css-assets-webpack-pluginnpm i optimize-css-assets-webpack-plugin -D安装完之后进⾏引⼊：const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')接着，你只需要在plugins中进⾏new OptimizeCssAssetsWebpackPlugin() 对象即可。你再进⾏打包，css⽂件会被压缩。下⾯给个的完整配置：/** *

⾸先需要初始化 npm init *

接着下载 webpack webpack-cli

依赖包 *

然后就下载需要使⽤的loader * *

使⽤ webpack

命令进⾏打包 *///

设置nodejs环境变量_ENV = 'development'/** *

提取样式打包到单独的css⽂件中，需要下载插件： mini-css-extract-plugin * npm i mini-css-extract-plugin -D * *

压缩css optimize-css-assets-webpack-plugin * npm i optimize-css-assets-webpack-plugin -D */const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')const MiniCssExtractPlugin = require('mini-css-extract-plugin')//⽤来处理绝对路径const {resolve} = require('path')//html-webpack-plugin需要下载安装才可以使⽤const HtmlWebpackPlugin = require('html-webpack-plugin')s = { //⽂件打包⼊⼝⽂件，需要在此⽂件中引⼊⼀些需要打包的⽂件 entry: './src/', //打包之后的输⼊，⽂件名和路径 output:{ //打包之后的⽂件名 filename: '', //打包输出路径，__dirname是nodejs的变量，代表着当前⽂件的⽬录绝对路径 path: resolve(__dirname,'build') }, module:{ rules:[ //不同⽂件必须配置不同的loader处理 { //处理css⽂件，加载相应的loader进⾏处理，test

代表匹配哪些⽂件 test:/.css$/, //使⽤哪些loader进⾏处理

需要注意的是，loader需要下载安装,

如果需要⽤到多个loader，需要⽤use

写个数组 use:[ //创建style标签，将js中的样式资源插⼊进⾏，添加到head中⽣效 // 'style-loader', //将css⽂件变成commonjs模块加载js中，⾥⾯内容是样式字符串 'css-loader', //此loader取代style-loader，作⽤：提取js中的css成单独⽂件 , /** * css兼容性处理，需要postcss库，这个库要在webpack中使⽤需要postcss-loader ,还需要postcss-preset-env插件， *

此插件会帮助postcss识别⼀些环境，从⽽加载指定的配置，能够让兼容性精确到浏览器的某⼀个版本 * npm i postcss-loader postcss-preset-env -D */ //使⽤loader的默认配置 // 'postcss-loader' //修改loader的配置 { loader: 'postcss-loader', options:{ ident:'postcss', plugins:()=>[ //postcss的插件,帮助postcss找到中browserlist⾥⾯的配置，通过配置加载指定的css兼容性样式 /** * "browserslist": { * //

⽣产环境的配置：默认情况下是根据⽣产环境指定配置 "production": [ ">0.2%", "not dead", "not op_mini all" ], //

开发环境的配置 "development": [ //兼容最近⼀个版本的 Chrome "last 1 chrome version", //兼容最近⼀个版本的 Firefox "last 1 firefox version", //兼容最近⼀个版本的Safari "last 1 safari version" ] } */ require('postcss-preset-env')() ] } } ] }, { test:/.less$/, use:['style-loader','css-loader', //将less⽂件编译成css⽂件，需要下载less-loader和less 'less-loader'] }, { //处理图⽚资源 test:/.(jpg|png|gif)$/, //url-loader

只能处理样式中的图⽚资源，不能处理HTML中的图⽚资源 loader: 'url-loader', options:{ //

当图⽚⼤⼩⼩于8KB的时候，将图⽚进⾏base64处理 limit: 8*1024, //处理后的图⽚名称较长，截取hash值得前⼗位，并且以原图⽚的后缀名作为后缀 name: '[hash:10].[ext]', //需要注意的是，样式中的图⽚会通过esModule进⾏解析，会和下⾯处理HTML的img的⽅式不同，会导致解析失败 //所以，需要关闭es6模块化，转成commonjs的模式 esModule: false } }, { //处理HTML中的img test: /.html$/, loader:'html-loader' }, //打包其他资源(除了html/js/css资源以外的资源) { //这个意思是除了css js html

以外的资源 exclude:/.(css|js|html|less|jpg|png|gif)$/, //如果是单个loader，可以直接使⽤loader loader: 'file-loader', options:{ name: '[hash:10].[ext]' } } ] }, //如果需要处理html资源，需要引⼊html插件 plugins: [ //此时需要创建⼀个对象才能处理Html new HtmlWebpackPlugin({ //引⼊模板 template:'./src/' }), //提取css成单独⽂件 new MiniCssExtractPlugin({ //对输出的⽂件重命名，如果不写则建⽴在项⽬build下，名称为 filename: 'css/' }), //压缩css new OptimizeCssAssetsWebpackPlugin() ], //开发环境模式 mode:'development', //正式环境 // mode:'production' //开发服务器 devServer:

⽤来⾃动化（⾃动编译，⾃动打开浏览器，⾃动刷新浏览器等等） //特点：

只会在内存中编译打包，不会有任何输出 //启动devServer指令为：npx webpack-dev-server

需要进⾏下载： npm i webpack-dev-server -D devServer: { //选择运⾏⽬录（构建后的⽬录） contentBase: resolve(__dirname,'build'), //启动gzip压缩,，进⾏优化 compress: true, //设置端⼝号 port:3000, //运⾏之后⾃动打开默认浏览器 open: true }}```