webpack插件

插件

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插件

服务

最新文章

热门文章