zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    代码面试最常用的10大算法
    ant google compiler 压缩
    美工资源
    面试题
    validate表单验证插件
    laypage分页
    layer弹出框小结
    Thymeleaf
    webApp开发
    grunt自动化构建工具
  • 原文地址:https://www.cnblogs.com/adoctors/p/9055507.html
Copyright © 2011-2022 走看看