使用webpack.loader处理CSS

最新推荐文章于 2020-12-26 16:23:55 发布
最新推荐文章于 2020-12-26 16:23:55 发布
阅读量249 收藏
点赞数
分类专栏： 个人 学习日常 文章标签： css javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42275589/article/details/106143103
版权
本文介绍了webpack中的loader概念，特别是在处理CSS时的作用。当需要将scss转换为css时，loader扩展了webpack的功能。详细讲解了如何在webpack配置中安装和使用css-loader和style-loader，确保CSS正确加载并应用到DOM中。
摘要由CSDN通过智能技术生成

什么是loader

loader是webpack中一个核心概念，原本webpack是处理js代码的，但是业务有时会需要将scss转换为css之类的。这时原有的webpack功能已经不够了，可以给webpack扩展对应的loader。

使用loader

  1. 在js中引用css
require("./css/my.css");

此时直接跑webpack会针对css文件提示 “You may need an appropriate loader to handle this file type.”

  1. 通过npm安装loader
npm install --save-dev css-loader
npm install --save-dev style-loader
  1. 在webpack.config.js中的module关键字下进行配置

                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  不重名的彩笔
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
vue webpack压缩代码_webpack不混淆、不压缩指定js文件

				
			

			

				

					weixin_31092009的博客
				

				

					12-30
					
					5622
					
				

			

		

		

			
				
在项目中使用了mozilla/pdf.js，在使用中需要设置GlobalWorkerOptions.workerSrc，代码如下import PDFJS from 'pdfjs-dist'import workerSrc from 'pdfjs-dist/build/pdf.worker.js'PDFJS.GlobalWorkerOptions.workerSrc = workerSrc;cons...

			
		

	



                

              
                



	

		

			

				
					
webpack 合并压缩_webpack前端项目调试环境安装入门：webpack.config.js禁用UglifyJs只合并JavaScript不压缩混淆代码...

				
			

			

				

					weixin_39575007的博客
				

				

					12-19
					
					355
					
				

			

		

		

			
				
webpack是目前比较流行的前端build工具，本质上是一个模块打包器。合并压缩JavaScript,css,图片等。目前有很多开源项目使用webpack进行打包，下面介绍的是如何编绎这些开源项目。webpack安装webpack目前的版本较多，各个版本使用上区别也较大，一般在项目的 package.json 中会指明依赖的webpack版本，只需要在项目目录下执行npm install 即可。...

			
		

	



                


  
              

                


	

		

			

				
					
webpack-loader处理css样式表

				
			

			

				

					上海 彭彭
				

				

					08-21
					
					203
					
				

			

		

		

			
				
我们想在main.js  导入咱们的样式 ，
import './CSS/index.css'

在 css 目录下创建 inex.css
然后把 index.html 的style 放到这个文件里
*{
    padding: 0;
    margin: 0;
}
.form{
    width: 500px;
    margin: 100px auto 0;
}
table{
    ...

			
		

	





	

		

			

				
					
webpack打包后css命名冲突问题

				
			

			

				

					weixin_34018169的博客
				

				

					01-18
					
					1774
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	



		

			
		



	

		

			

				
					
webpack4.0-TypeScript的打包配置-13

				
			

			

				

					memedadexixaofeifei的博客
				

				

					01-09
					
					201
					
				

			

		

		

			
				
安装配置TypeScript ，安装TypeScript对应的第三方库

如lodash：npm i @types/lodash --sace-dev

查看TypeScript支持的第三方库

https://github.com/DefinitelyTyped/DefinitelyTyped

https://microsoft.github.io/TypeSearch/


npm ins...

			
		

	





	

		

			

				
					
webpack(7)_CSS_使用style-loader和css-loader

				
			

			

				

					renzhongrui的博客
				

				

					07-30
					
					8065
					
				

			

		

		

			
				
style-loader


安装style-loader 
npm install style-loader --save-dev
安装css-loader 
npm install css-loader --save-dev


			
		

	





	

		

			

				
					
webpackbase.js webpack.dev.js webpack.prod.js  webpack.config.js

				
			

			

				

					海阔天空
				

				

					12-26
					
					238
					
				

			

		

		

			
				
这里是引用
let HtmlWebpackPlugin= require(“html-webpack-plugin”);

const path = require(‘path’);
//处理html的插件
let MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
let VueLoaderPlugin = require(‘vue-loader/lib/plugin’);
module.exports = {
//bundle.854a.

			
		

	





	

		

			

				
					
webpack.js.org：Webpack文档的存储库等等！

				
			

			

				

					02-03
				

			

		

		

			
				
webpack.js.org  指南，文档和所有webpack内容。 内容进度 既然我们已经涵盖了许多缺少的文档积压工作，我们将开始大量审查站点内容的每个部分，以对它们进行适当的排序和结构化。 下列问题应该可以很好地了解事物的...

			
		

	





	

		

			

				
					
webpack.zip

				
			

			

				

					01-28
				

			

		

		

			
				
2. **Loader 示例**：Webpack 的加载器用于转换模块，使非JavaScript文件（如CSS、图片、字体等）能在浏览器环境中运行。Loader demo 可能包含了各种常见的Loader实例，例如：  - `babel-loader`：将ES6+语法转换为...

			
		

	





	

		

			

				
					
webpack-obfuscator, web service的javascript混淆插件插件.zip

				
			

			

				

					09-17
				

			

		

		

			
				
webpack-obfuscator, web service的javascript混淆插件插件 web service的 javascript混淆插件插件 安装使用NPM安装软件包并将它的添加到你的devDependencies:npm install --save-dev webpack-obfuscator用法：

			
		

	





	

		

			

				
					
webpack压缩js

				
			

			

				

					08-22
				

			

		

		

			
				
压缩js 到页面，并且可以适当混淆加密以达到保护js代码的作用

			
		

	





	

		

			

				
					
ppt课件-第10章 使用webpack.zip

				
			

			

				

					03-22
				

			

		

		

			
				
5. **Loaders**：Loaders 用于转换不同类型的模块，例如Babel Loader将ES6/7代码转换为浏览器可执行的ES5代码，style-loader和css-loader处理CSS。  6. **Plugins**：Webpack 插件可以扩展Webpack的功能，如...

			
		

	





	

		

			

				
					
显微镜下的webpack4入门

				
			

			

				

					weixin_34200628的博客
				

				

					10-12
					
					117
					
				

			

		

		

			
				
前端的构建打包工具很多，比如grunt，gulp。相信这两者大家应该是耳熟能详的，上手相对简单，而且所需手敲的代码都是比较简单的。然后webpack的出现，让这两者打包工具都有点失宠了。webpack比起前两者打包工具，对于前端程序员JS编程能力的要求还是挺高的。不过需要兼容ie8及以下的小伙伴们，就不要考虑webpack了，他很傲娇地不兼容！
webpack 前期准备
webpack，这是一个组...

			
		

	





	

		

			

				
					
webpack4打包

				
			

			

				

					Callback_heaven
				

				

					12-28
					
					536
					
				

			

		

		

			
				
webpack 4不再需要配置文件，下面来测试一下：

首先创建一个目录：test

然后使用cmd初始化


npm init -y

引入webpack4


npm i webpack --save-dev

继续引入webpack-cli


npm i webpack-cli --save-dev

这个时候我们的文件夹是这样的：



然后修改package.json，加入build脚...

			
		

	





	

		

			

				
					
webpack打包压缩混淆_webpack打包性能优化

				
			

			

				

					weixin_39901332的博客
				

				

					12-20
					
					1313
					
				

			

		

		

			
				
1. 使用 gzip 压缩打包后的 js 文件这个方法优化浏览器下载时的文件大小(打包后的文件大小没有改变)webpack.config.prod.js 中var  CompressionWebpackPlugin  =  require(‘compression-webpack-plugin‘);// 在 pligins 中添加new  CompressionWebpackPlugin({ //...

			
		

	





	

		

			

				
					
Webpack——使用uglify-js 压缩打包JS代码

				
			

			

				

					七汐 的胡言乱语
				

				

					06-26
					
					2855
					
				

			

		

		

			
				
一、webpack 插件机制介绍：

插件可以完成更多loader不能完成的功能。插件的使用一般是在webpack的配置信息 plugins选定中指定。Webpack本身内置了一些常用的插件，还可以通过npm安装第三方插件。

二、uglify-js介绍：

ugligy-js是一个用npm安装的JavaScript代码压工具，我们在grunt和gulp中经常使用。

用npm命令进行安装：


...

			
		

	





	

		

			

				
					
webpack中的代码压缩&&混淆机制

				
			

			

				

					ding1885的博客
				

				

					07-30
					
					3410
					
				

			

		

		

			
				
压缩
删除 Javascript 代码中所有注释、跳格符号、换行符号及无用的空格，缩短变量名称从而压缩 JS 文件大小。并且不同作用域的变量名是可以重复的，类似a,b,c可以反复出现。

混淆
经过编码将变量和函数原命名改为毫无意义的命名，以防止他人窥视和窃取 Javascript 源代码。让我们的代码尽可能的不可读，常见的做法有：分离变量，增加无意义的代码，打乱控制流。
...

			
		

	





	

		

			

				
					
webpack   代码混淆

				
			

			

				

					m0_38066007的博客
				

				

					10-29
					
					4991
					
				

			

		

		

			
				
webpack是如何进行代码混淆的。这里用到了一个插件。

uglifyjs-webpack-plugin：https://www.npmjs.com/package/uglifyjs-webpack-plugin



npm install uglifyjs-webpack-plugin --save-dev



基中有两个子属性：

minimize 正常情况下开发环境为false,...

			
		

	





	

		

			

				
					
使用webpack5从0搭建。 webpack配置分为三个文件webpack.dev.js webpack.common.js webpack.pro.js webpack.dev.js 开发环境配置 webpack.common.js 是公共配置文件 webpack.pro.js 生产环境配置 package.json 配置三个命令 serve 启动  对应配置webpack.dev.js build打包 对应配置webpack.pro.js 要求配置babel，eslint，dev-server, css-loader,scss-loader,post-loader,style-loader,css压缩，JS压缩，file-loader url-loader,clean-webpack-plugin, js多进程打包，

					
最新发布

				
			

			

				

					06-06
				

			

		

		

			
				
以上是一个基本的webpack5项目的配置过程，其中包含了babel、eslint、dev-server、css-loader、scss-loader、post-loader、style-loader、css压缩，JS压缩，file-loader、url-loader、clean-webpack-plugin、js多...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值