插件(plugins)
**服务器运行自动打开浏览器插件**
1、安装
cnpm install -D [email protected]
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 [email protected]
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"
