webpack插件

Posted 2021-01-03 2oe

插件

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  错误信息提示