webpack4 打包样式文件

￡神魔★判官ぃ 2021-07-24 17:58 429阅读 0赞

1、添加loader
    	(1)下载对应loader包
    	(2)下载后,使用时要注意顺序
    		style-loader,	创建style标签,将js中的css样式资源添加到style标签中生效
    			options:
    				insertAt:'top'  插入位置优先级在上方
    		css-loader,		css文件变成commonjs模块,里面内容是样式字符串
    		less-loader,	将less文件编译成css文件
    	
    	css文件:
            use: [
              'style-loader', 
              'css-loader', 
            ] 
            
    	less文件:
            use: [
              'style-loader',
              'css-loader', 
              'less-loader', 
            ]
    		还需要下载less,sass需要下载sass和sass-loader
    		
    2、若将css文件抽离成单独文件(因为less等最后会被编译成css,所以只用处理css文件即可)
    	1、下载
    		cnpm install -D mini-css-extract-plugin
    		
    	2、配置
    		const  MiniCssExtractPlugin= require('mini-css-extract-plugin');
    		
    		module:{
    			rules:[
    				{
    					test: /\.css$/,  匹配文件名
    			        use: [	使用哪些loader
    			          MiniCssExtractPlugin.loader, //取代style-loader,提取js中的css为单独文件,故不再需要style-loader来创建style标签
    			          'css-loader', //css文件变成commonjs模块,里面内容是样式字符串
    			        ] 
    				}
    			]
    		},
    		plugins:[
    			new MiniCssExtractPlugin(
    				{
    					filename:'xx/打包后的样式路径.css'	如'src/css/build.css'
    					其他参数:
    					chunkFilename:'[id].css'  异步加载代码块名称
    				}
    			)  
    		]
    		
    3、若要兼容不同的浏览器
    	1、下载
    		cnpm install -D postcss-loader postcss
    		
    	2、配置
    		在css的处理块中添加loader
    		使用方式一:创建postcss.config.js
    			module.exports = {
    			  plugins: [
    			    [],
    			  ],
    			}
    		使用方式二:直接在webpack.config.js中使用
    			方式一:
    				使用postcss-preset-env,内部包含了autoprefixer实现添加前缀
    		        use: [ 使用哪些loader
    				  'xx',	
    		          {
    		            loader: 'postcss-loader',
    		            ident: 'postcss',
    		            options: {
    		              postcssOptions: {
    		                plugins: [['postcss-preset-env',{}]]
    		              }
    		            }
    		          }
    		        ] 
    				
    				postcss-loader默认在生产环境下运行,在开发模式下运行需要在文件首部修改运行环境
    					process.env.NODE_ENV='development'
    		      方式二:
    		      	使用autoprefixer,使用前需下载
    		      	 {
    		           loader: "postcss-loader",
    		            options: {
    		              postcssOptions: {
    		                plugins: [
    		                  [
    		                    "autoprefixer",
    		                    {
    		                      overrideBrowserslist: [ 或者如3中的配置
    		                          "Android 4.1",
    		                          "iOS 7.1",
    		                          "Chrome > 31",
    		                          "ff > 31",
    		                          "ie >= 8",
    		                          "> 1%", // 必须大于 1% 用户使用的浏览器
    		                          //'last 2 versions', // 所有主流浏览器最近的 2个版本
    		                      ],
    		                    },
    		                  ],
    		                ],
    		              },
    		            },
    		          }
    	      	
         3、添加兼容配置
    	     方式一:
    		     在package.json中添加配置,和devDependencies同级配置，更多配置查看browserslist官网
    		       "browserslist":{
    			    "development":[ 开发模式配置
    			      "last 1 chrome version",		兼容最近版本的谷歌浏览器
    			      "last 1 firefox version",
    			      "last 1 safari version"
    			    ],
    			    "production":[	生产模式配置
    			      ">0.2%",				适配市面上百分之99.8的浏览器
    			      "not dead",			不适配死掉的浏览器
    			      "not op_mini all"		排除所有的op_mini浏览器
    			    ]
    			  }
    			  
    		方式二:
    			创建.browserslistrc文件,配置内容如方式一
    	  
    4、压缩css文件
    	webpack5也可使用 css-minimizer-webpack-plugin 
    	1、下载
    		cnpm install -D optimize-css-assets-webpack-plugin
    		
    	2、配置
    		const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
    			
    		plugins: [
    		   new OptimizeCssAssetsPlugin(); 默认配置即可压缩
    		   new OptimizeCssAssetsPlugin({
    		      assetNameRegExp: /\.css$/g,	匹配所有css资源文件
    		      cssProcessor: require('cssnano'), css预处理器,需要下载
    		      cssProcessorPluginOptions: {	传递给cssProcessor的插件选项
    		        preset: ['default', { discardComments: { removeAll: true } }], 移除注释
    		      },	
    		      canPrint: true	是否能打印信息
    		    })
    		],
    
    5、将px转行成rem
    	1、下载
    		cnpm install -D px2rem-loader
    		cnpm install -S lib-flexible@0.5.1	用于计算不同宽高比的根元素font-size大小
    	2、配置
    		use: [ 
    		  'xx',	
    	      { 该loader放在最下面
                loader: 'px2rem-loader', 会将px改变成remUnit转换的rem,但不会改变页面的font-size,即页面实际px为转换后的rem*fontsize
                options: {
                  remUnit: 75, 		初始稿的10分之一,代表设计稿为750,1rem=75px,
                  remPrecision:8,   精确的小数点位数
                }
              }
            ] 
    		通过在css样式末尾添加/*no*/,不将px转换成rem
    			如:boder:solid 1px red; /*no*/
    			
    	3、引入flexible库
    		方式一:手动script引入lib-flexible库中的flexible.js文件,因为需要打开时就计算,位置需要前置,如在title标签后
    		方式二:配置静态资源内联进html文件里(推荐)
    			如在title标签后:
    			<script><%= require('raw-loader!babel-loader!../node_modules/lib-flexible/flexible.js') %></script>
    			若返回结果是个对象
    			<script><%= require('raw-loader!babel-loader!../node_modules/lib-flexible/flexible.js').default %></script>
    
    6、内联css
    	方式一:style-loader即可
    		style-loader是css-in-js需要加载js后才能写入到style中,有一定的延迟性
    		html-inline-css-webpack-plugin是将css提取出来,再写入到html中,html网页源代码中已经内联好css了，没有延迟性了
    		
    	方式二:使用html-inline-css-webpack-plugin
    		使用前奏:
    			首先使用mini-css-extract-plugin将css提取打包成一个独立的css chunk文件。
    			然后使用html-inline-css-webpack-plugin读取打包好的css chunk内容注入到页面
    			原本引入css资源地址,现在实现了css内联
    		(1)下载
    			cnpm i -D html-inline-css-webpack-plugin
    			
    		(2)配置
    			const HTMLInlineCSSWebpackPlugin = require ( "html-inline-css-webpack-plugin" ). default ;
    			plugins: [
    			    new HTMLInlineCSSWebpackPlugin(),
    		    ]
    
    7、使用tree shaking去掉无用的css代码
    	(1)下载
    		cnpm i purgecss-webpack-plugin -D		必须配置mini-css-extract-plugin一起使用
    	(2)配置
    		plugins:[
    			new MiniCssExtractPlugin({ filename: 'css/build.css' }),
    		    new PurgeCSSPlugin({
    		      paths: ['绝对路径'],
    		      paths:使用glob.sync或globyy来简化操作,
    		      如:paths: glob.sync(`绝对路径/src/**/*`,  { nodir: true }),
    		      可设置白名单来限制删除样式(https://www.purgecss.cn/whitelisting.html#%E6%8C%87%E5%AE%9A%E9%80%89%E6%8B%A9%E5%99%A8)
          		  whitelist:[],
    		      whitelistPatterns: [/red$/],
    		      whitelistPatternsChildren: [/blue$/]
    		    }),
    		]

代码示例:

const path = require('path')
    
    module.exports = { 
      entry: './src/index.js',
      output: { 
        filename: 'build.js',
        path:path.resolve(__dirname,'build')
      },
      module: { 
        rules: [//创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。
          { 
            test: /\.css$/, //匹配文件名
            use: [//使用哪些loader
              'style-loader', //创建style标签,将js中的css样式资源添加到style标签中生效
              'css-loader', //css文件变成commonjs模块,里面内容是样式字符串
            ] 
          },
          { 
            test: /\.less$/,
            use: [
              'style-loader',
              'css-loader', 
              'less-loader', //将less文件编译成css文件
            ]
          }
        ]
      },
      //插件
      plugins: [
        
      ],
      mode:'development'
    }

单独抽离css代码示例:

const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const  MiniCssExtractPlugin= require('mini-css-extract-plugin');
    
    module.exports = { 
      entry: './src/js/index.js',
      output: { 
        filename: 'src/js/build.js',
        path:path.resolve(__dirname,'build')
      },
      module: { 
        rules: [//创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。
          { 
            test: /\.css$/, //匹配文件名
            use: [//使用哪些loader
              // 'style-loader', //创建style标签,将js中的css样式资源添加到style标签中生效
              MiniCssExtractPlugin.loader, //取代style-loader,提取js中的css为单独文件
              'css-loader', //css文件变成commonjs模块,里面内容是样式字符串
            ] 
          },
          { 
            test: /\.less$/,
            use: [
              'style-loader',
              'css-loader', 
              'less-loader', //将less文件编译成css文件
            ]
          },
          { 
            test: /\.(jpg|png|gif|jfif)$/,
            loader:'url-loader', //依赖于file-loader
            options: { 
              //图片小于8kb,会处理成base64,即减少请求数量,增大图片体积(请求速度会变慢cn)
              limit: 8 * 1024,
              esModule: false,  //不采用es6模式解析,否则会和html-loader采用的commonjs模式冲突
              name: '[name].[ext]',
              outputPath:'src/images'
            }
          },
          { 
            test: /\.html$/,
            loader:'html-loader', //处理html文档中的img,负责引入图片,交给url-loader处理
          },
          { 
            // exclude:/\.xx$/
            test: /\.(ttf|eot|svg|woff|woff2)$/,
            loader: 'file-loader',
            options: { 
              name: '[name].[ext]',
              outputPath:'src/icon'
            },
            // 
            
          }
        ]
      },
      //插件
      plugins: [
        new HtmlWebpackPlugin({ 
          template:'./src/index.html' //将模板复制成指定文件
        }), //默认传键html文件,并引入打包输出的资源,默认为基本结构
        new MiniCssExtractPlugin({ 
          filename: 'src/css/build.css'
        })
      ],
      mode: 'development',
      //自动化,自动编译、打开浏览器和自动刷新等
      devServer: { 
        // contentBase:['xx','xx',...]
        contentBase: path.resolve(__dirname, 'build'), //提供内容的目录
        //启动gzip压缩
        compress: true,
        port: 3000, //监听端口号
        open:true, //自动打开浏览器
      }
    }

css兼容性和压缩代码示例:

兼容结果:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/69be51178205472e950ccfaaef9b8df1.png