Webpack资源配置下载

webpack项目中安装：
1. npm init (一直回车)
2. 或 npm init -y

开发阶段依赖
1. npm install webpack webpack-cli --save-dev

2. 或 npm install webpack webpack-cli -D
	./node_modules/bin/webpack
	或npx webpack
	或在package.json中，“script”:{
				"build":"webpack"	
			}
	终端：npm run build

入口与出口：
1. npx webpack --entry ./src/main.js --output-path ./build

2. 或 在package.json中，“script”:{
				"build":"webpack"	
			}
	在package.json同级加webpack.config.js（进口与出口的配置）,
		//导入
		const path = require('path');
		//导出
		module.exports = {
				entry:"./src/main.js",
				output:{
    				// 绝对路径
    				// path:"\Users\NDC\Desktop\02_learn_webpack\01_basic_webpack\build"
    					path: path.resolve(__dirname,"./build"),
    					filename:"bundle.js"
				}
		}

3. 或 在package.json中，“script”:{
				"build":"webpack --config why.config.js"	
			}
	在package.json同级加why.config.js,
		//导入
		const path = require('path');
		//导出
		module.exports = {
				entry:"./src/main.js",
				output:{
    				// 绝对路径
    				// path:"\Users\NDC\Desktop\02_learn_webpack\01_basic_webpack\build"
    					path: path.resolve(__dirname,"./build"),
    					filename:"bundle.js"
				}
		}

终端：npm run build

webpack资源：
css-loader只会解析：
npm install css-loader -D
下载后在webpack.config.js的module.exports中添加
module:{
rules:[
{
test:/.css$/,//,正则表达式
// 1.loader的写法（语法糖）
// loader:“css-loader”

            				//2.完整写法
            				// use: "css-loader"
            				use: [
                					"css-loader"
            				]
            				// 带参数
            				// use: [
            				//     {loader:"css-loader",options:{}}
            				// ]
        				}
    				]
			}

	npm install style-loader -D
	下载后在webpack.config.js的module.exports中添加
		module:{
    				rules:[
        					{
            				test:/\.css$/,//,正则表达式
            				// 1.loader的写法（语法糖）
            				// loader:"css-loader"

            				//2.完整写法
            				// use: "css-loader"
            				use: [
				//这里的执行顺序是倒着的，先执行css-loader,在执行style-loader
                					"style-loader",
                					"css-loader"
            				]
            				// 带参数
            				// use: [
            				//     {loader:"css-loader",options:{}}
            				// ]
        				}
    				]
			}

	npm install less -D
	//找到node_modules下的bin下的less，将./test.less打包成demo.css
	npx lessc ./test.less demo.css

	npm install less-loader -D
	下载后在webpack.config.js的module.exports中添加
		module:{
    				rules:[
        					{
            				test:/\.css$/,//,正则表达式
            				// 1.loader的写法（语法糖）
            				// loader:"css-loader"

            				//2.完整写法
            				// use: "css-loader"
            				use: [
				//这里的执行顺序是倒着的，先执行css-loader,在执行style-loader
                					"style-loader",
                					"css-loader"
            				]
            				// 带参数
            				// use: [
            				//     {loader:"css-loader",options:{}}
            				// ]
        					},
				{
            				test:/\.less$/,
            				use:[
                					"style-loader",
                					"css-loader",
                				// lessc只是把less文件转成css文件，还得进一步的加载
                					"less-loader"
           					 ]
       					 }
    				]
			}

	npm install postcss postcss-cli -D
	//自动添加浏览器前缀插件
	npm install autoprefixer -D
	//找到node_modules下bin下postcss,使用autoprefixer插件，输出为demo.css,输入为test.css
	npx postcss --use autoprefixer -o demo.css test.css
	npm install postcss-loader -D
	下载后在webpack.config.js的module.exports中添加
		module:{
    				rules:[
        					{
            				test:/\.css$/,//,正则表达式
            				// 1.loader的写法（语法糖）
            				// loader:"css-loader"

            				//2.完整写法
            				// use: "css-loader"
           					 use: [
                				//这里的执行顺序是倒着的，先执行css-loader,在执行style-loader
               				 "style-loader",
                				"css-loader",
                				{
                    				loader:"postcss-loader",
                   				 option:{
                        				postcssOption:{
                            			plugins:[
                                			require("autoprefixer")
                            			]
                        				}
                   				 }
                				}
                
            				]
            			// 带参数
            			// use: [
            			//     {loader:"css-loader",options:{}}
            			// ]
        				},
        				{
            			test:/\.less$/,
            			use:[
               			 "style-loader",
               			 "css-loader",
                			// lessc只是把less文件转成css文件，还得进一步的加载
                			"less-loader"
            			]
        				}
    				]
				}
		或下载后在webpack.config.js的module.exports中添加
		module:{
    				rules:[
        					{
            				test:/\.css$/,//,正则表达式
            				// 1.loader的写法（语法糖）
            				// loader:"css-loader"

            				//2.完整写法
            				// use: "css-loader"
           					 use: [
                				//这里的执行顺序是倒着的，先执行css-loader,在执行style-loader
               				 "style-loader",
                				"css-loader",
                				
                    				loader:"postcss-loader",
                   				
                   				 }
                				}
                
            				]
            			// 带参数
            			// use: [
            			//     {loader:"css-loader",options:{}}
            			// ]
        				},
        				{
            			test:/\.less$/,
            			use:[
               			 "style-loader",
               			 "css-loader",
                			// lessc只是把less文件转成css文件，还得进一步的加载
                			"less-loader"
            			]
        				}
    				]
				}
		在package.json同级加postcss.config.js
			module.exports ={
					plugins:[
    						require("autoprefixer")
					]   
			}


npm install postcss-preset-env -D（可以将颜色十六进制转成rgb，例如#12345678，后两位表示透明度）
	在package.json同级加postcss.config.js
		module.exports ={
				plugins:[
    					require("postcss-preset-env")
				]   
		}

加载图片资源
	file-loader:
		npm install file-loader -D
	{
            	// test:/\.(jpeg|jpg|png|gif|svg)$/,
            		test:/\.(jpe?g|png|gif|svg)$/,
            		use: "file-loader"
        		}

	npm install url-loader -D
	下载后在webpack.config.js的module.exports中module的rules中：
	 module:{
    			rules:[{
            			// test:/\.(jpeg|jpg|png|gif|svg)$/,
            			test:/\.(jpe?g|png|gif|svg)$/,
            			use: {
                				// loader:"file-loader",
               			 	loader:"url-loader",
                				option:{
                    					// outputPath:"img",
                    					name:"img/[name]-[hash:6].[ext]"
                				}
            			}
        			} ]
	}