home > tools > Bundler > webpack >

webpack多页面配置

author:zhoulujun@live.cn    hits:

webpack,yeoman上面的构建 都是单页面应用但是,我向多页面,不同入口地址进入,然后,就悲剧地无法访问:只是,需要我们在entry:配置en

webpack,yeoman上面的构建 都是单页面应用

但是,我向多页面,不同入口地址进入,然后,就悲剧地无法访问:

只是,需要我们在entry:配置

entry:{
  // index: './index.js',
  app: './index.js',
  comp:'./comp.js',
  comp2:'./comp2.js'
},

dist dev 环境都要加上

同时,out 输出;多文件输出!

output: {
  path: path.resolve('./dist/assets'),
  filename: '[name].js',
  publicPath: './assets/'
},

输出页面配置

每多一个html,就多new HtmlWebpackPlugin配置

new HtmlWebpackPlugin({
  template: './src/index.html',//本地模板文件的位置,支持加载器(如handlebars、ejs、undersore、html等),如比如 handlebars!src/index.hbs;
  filename: './index.html',//输出文件的文件名称,默认为index.html,不配置就是该文件名;此外,还可以为输出文件指定目录位置(例如'html/index.html')
  chunks: ['index','vendor','commons','manifest'],
  inject: true,//1、true或者body:所有JavaScript资源插入到body元素的底部2、head: 所有JavaScript资源插入到head元素中3、false: 所有静态资源css和JavaScript都不会注入到模板文件中
  showErrors: true,//是否将错误信息输出到html页面中
  hash: false,//是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值
  favicon: '',//添加特定的 favicon 路径到输出的 HTML 文件中。
  minify: {
    caseSensitive: false,
    removeComment: true,//移除注释
    collapseWhitespace: false//移除多余空格
  }
})

转载本站文章《webpack多页面配置》, 请注明出处:https://www.zhoulujun.cn/html/tools/Bundler/webpack/2016_1118_7899.html