webpack -- 多页面简单小例

有时单页面并不能满足我们的业务需求,就需要去构建多页面应用,以下为简单小例:

entry:{
    index:'./src/module/index/index.js',
    student:'./src/module/student/index.js',
    b:'./src/b.js'
},
output:{
    path:path.resolve(__dirname,'dist'),
    filename:'js/[name].[chunkhash].js'      //可能会有很多js
    
},
plugins:[
    new htmlPlugin({
        filename:'index.html',     //输出的html文件名
        minify:{
            removeAttributeQuotes:true
        },
        hash:true,
        chunks:['index','b'],       //打包时只打包index和b的js文件,见entry,
        //注意使用chunks时模板index.html文件里面不允许有script标签,即使注释掉也会报错 
        template:'./index.html'     //模板文件
    }),
    new htmlPlugin({
        filename:'student.html',
        minify:{
            removeAttributeQuotes:true
        },
        hash:true,
        chunks:['student'],             
        template:'./index.html'
    }),
    new extractTextPlugin('css/[name].[chunkhash].css'),       //生成多个css文件,避免污染
    //其他插件
],

上面的代码还有很多需要完善跟优化的地方,待续……

项目地址:https://github.com/adoctors/webpack-morepage-demo1

猜你喜欢

转载自www.cnblogs.com/adoctors/p/9055507.html