webpack3 打包css、less和图片

怼烎@ 2021-07-24 17:27 462阅读 0赞

**css 处理**
    
    	1、在主入口文件引入写好的css文件
    	import 'css路径'
    
    	2、安装css相关依赖
    		cnpm install -D css-loader@1.0.0 style-loader@0.21.0
    	
    	3、在webpack.config.js文件中配置
    		在module->rules:[xx]中添加
    			{
    				test:/\.css$/,
    				use:[
    				"style-loader",
    				"css-loader"
    				]
    			}
    			
    **图片处理**
    
    	1、安装图片依赖:
    	 cnpm intall -D file-loader@1.1.11 url-loader@1.0.1
    
    	2、配置webpack.config.js配置
    		在module->rules:[xx]中添加
    			{
    				test:/\.(png|jpg|jfif|gif)$/,
    				use:"url-loader?limit=2048"
    				
    				//limit表示大于2兆压缩
    			}
    	3、react中引入图片语法
    		import xx from '图片路径'
    
    		<img src=xx />
    
    **less和Sass处理**
    
    	1、安装依赖
    		cnpm install --save-dev less@3.8.0 less-loader@4.1.0
    
    	2、配置webpack.config.js配置
    		在module->rules:[xx]中添加
    			{
    				test:/\.less$/,
    				use:["style-loader","css-loader","less-loader"]
    			}
    			
        3、react中引入less
        	import "less路径"
        	
        4、若要将css文件单独提取出来放在css文件夹里
        	（1）安装依赖
        		cnpm install webpack webpack-cli -D
        		cnpm install -D extract-text-webpack-plugin@2.1.0
        	 (2)在webpack.config.js中设置
        	 	1、引入插件
        	 	var ExtractTextPlugin = require("extract-text-webpack-plugin");
        	 	
        	 	2、修改module中的css配置中的use为
        	 	
    	    	 	use:ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: "css-loader"
                    })
                    
                3、添加plugins插件
    				new ExtractTextPlugin("/css/app.css");
    				设置的路径即为dist目录下,生成css文件夹,然后放入app.css文件

代码示例:

**webpack.config.js文件**

// var path=require('path');
    
    module.exports={ 
    	// entry:path.resolve(__dirname,"/src/app.js"),
    	entry:__dirname+"/src/app.js",
    	output:{ 
    		filename:'boundle.js',
    		// path:path.resolve(__dirname,"/dist")
    		path:__dirname+"/dist"
    		
    	},
    
    	module:{ 
    			rules:[{ 
    					test:/\.json$/,
    					use:"json-loader"
    				},
    				{ 
    					test:/\.(js|jsx)$/,
    					use:"babel-loader",
    					exclude:/node_modules/
    
    				}
    				,
    				{ 
    					test:/\.css$/,
    					use:[
    					"style-loader",
    					"css-loader"
    					]
    
    				}
    				,
    				{ 
    					test:/\.(png|jpg|jfif|gif)$/,
    					use:"url-loader?limit=2048"//图片大于两兆进行压缩
    					//
    				},
    				{ 
    					test:/\.(less$)/,
    					use:["style-loader","css-loader","less-loader"]
    				}
    			]
    		}
    }

**主入口js文件:**

// var hello=require('./hello.js');
    // document.getElementById('root').appendChild(hello());
    
    
    import React from 'react'
    import ReactDOM from 'react-dom'
    import "./app.css"
    import Img from "./image/hh.jpg"
    import Header from "./header/index.jsx"
    import "./header/index.less"
    
    class App extends React.Component{ 
      render(){ 
        return(
        <div>
          <div className="container">aaaaaa<Header /></div>
          <img src={ Img}/>
          </div>
    
        )
      }
    }
    
    // 渲染
    ReactDOM.render(<App />,document.getElementById("root"))

**jsx(代表是react的js文件)文件:**

import React from "react"
    import ReactDOM from "react-dom"
    
    export default class Header extends React.Component{ 
    	render(){ 
    		return (
    			<div className="header">header</div>	
    		)
    	}
    }