webpack 打包css、less和图片

**css 处理**

	1、在主入口文件引入写好的css文件
	import 'css路径'

	2、安装css相关依赖
		cnpm install -D [email protected] [email protected]
	
	3、在webpack.config.js文件中配置
		在module->rules:[xx]中添加
			{
				test:/\.css$/,
				use:[
				"style-loader",
				"css-loader"
				]
			}
			
**图片处理**

	1、安装图片依赖:
	 cnpm intall -D [email protected] [email protected]

	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 [email protected] [email protected]

	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 [email protected]
    	 (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>	
		)
	}
}