webpack外掛程式

標籤：ase   不顯示   merge   ali   變數   resolve   靜態   word   var   

外掛程式

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-plugin4.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-pluginnew friendly-errors-webpack-plugin({    })npm i -D node-notifier  錯誤資訊提示

webpack外掛程式