webpack插件
阿新 • • 發佈:2018-09-01
code filename req ntp mon dex oss 引入 lac
插件
plugins:[
new ExtractTextPlugin.extrct({
})
//創建html
new HtmlWebpackPlugin({
title:"first page",
filename:"index.html",
template:"/index.html,
// true 顯示在body false不顯示(默認)
inject:true "body"
}),
// 熱替換
new webpack.HotModuleReplacementPlugin()
]
devtool:
"eval-source-map"
"cheap-source-map"
4.0之前:extract-text-webpack-plugin
4.0:extract-text-webpack-plugin@next
服務
devServer:{
host:‘localhost‘,
port:8080,
contentBase:".",
overlay:true,
inline:true,
hot:true,
before(app){
app.get(‘/api‘,(req,res)=>{
res.end()
})
}
}
解決問題
//function resolve(pathname{
return path.join(__dirname,pathname);
//}
resolve:{
alias:{
common:ressolve(‘src/common‘);
}
}
設置多入口文件
function entries(){
let temp = {};
let pathname = path.join(__dirname,‘src‘);
let files =fs.readdirSync(pathname);
files.map(file=>{
let pathUrl = path.join(pathname,file);
let stats = fs.statSync(pathUrl);
if(stats.isFile()){
let key = pathUrl.basename(pathUrl,‘.js‘); temp[key]=pathUrl;
}
})
return temp;
}
// 靜態設置多入口文件
<!--entry:{-->
<!-- app:resolve(‘src/app.js‘),-->
<!-- main:resolve(‘src.main.js‘)-->
<!--}-->
// 動態設置多入口文件
entry:entries()
npm i -D cross-env 跨平臺設置環境變量插件
npm i -D webpack-merge 合並
1.先引入 meige=require(webpack-merge);
npm i -D friendly-errors-webpack-plugin
new friendly-errors-webpack-plugin({
})
npm i -D node-notifier 錯誤信息提示
webpack插件