webpack3 插件

怼烎@ 2021-07-24 21:04 440阅读 0赞

插件(plugins)
    
    **服务器运行自动打开浏览器插件**
    	1、安装
    		cnpm install -D open-browser-webpack-plugin@0.0.5
    
    	2、在webpack.config.js中配置
    		(1)引入插件
    			var xx=require("open-browser-webpack-plugin")
    
    		(2)和module同级,写入
    		plugins:[
    			new xx({
    			url:"http://localhost:8080/"
    		})
    
    **html模板插件(使得打包后)**
    	1、安装
    		cnpm install -D html-webpack-plugin@3.2.0
    		
    	2、在webpack.config.js中配置
    		(1)引入插件
    			var xx=require("html-webpack-plugin")
    
    		(2)和module同级,在plugins:[]中添加
    
    			new xx({
    
    			//找到不是dist中的html文件,运行后自动放在dist下面
    			template:__dirname+'/src/下要被打包放到dist下的html文件'
    		})
    
    内置插件省略后缀名
    	 和module同级,添加
    
    	 	resolve:{
    			extensions:['.js','.jsx','xx后缀名']
    		},

代码示例:  
webpack.config.js文件

// var path=require('path');
    var browserOpen=require("open-browser-webpack-plugin");
    var htmlTemp=require("html-webpack-plugin")
    
    
    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"
    		
    	},
    	//内置插件省略文件js和jsx后缀名
    	resolve:{ 
    		extensions:['.js','.jsx']
    	},
    
    	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"]
    				}
    			]
    		}
    		,
    	plugins:[
    		new browserOpen({ 
    			url:"http://localhost:8080/"
    		}),
    		new htmlTemp({ 
    			template:__dirname+'/src/index.temp.html'
    		})
    
    	]
    }

省略了js后缀名的的主入口js文件；

import React from 'react'
    import ReactDOM from 'react-dom'
    import "./app.css"
    import Img from "./image/hh.jpg"
    import Header from "./header/index"
    import "./header/index.less"