• home > tools > Bundler > webpackTheory >

    webpack多页面配置

    Author:[email protected] Date:

    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({
      // 本地模板文件的位置,支持加载器(如handlebars、ejs、undersore、html等),如比如 handlebars!src/index.hbs;
      template: './src/index.html',
      // 输出文件的文件名称,默认为index.html,不配置就是该文件名;
      // 也可以为输出文件指定目录位置(例如'html/index.html')
      filename: './index.html',
      chunks: ['index', 'vendor', 'commons', 'manifest'],
      // 插入位置:
          // 1、true或者body:所有JavaScript资源插入到body元素的底部
          // 2、head: 所有JavaScript资源插入到head元素中
          // 3、false: 所有静态资源css和JavaScript都不会注入到模板文件中
      inject: true,
      // 是否将错误信息输出到html页面中
      showErrors: true,
      // 是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值
      hash: false,
      // 添加特定的 favicon 路径到输出的 HTML 文件中。
      favicon: '',
      minify: {
        // 移除注释,默认值false
        removeComment: true,
        // 压缩html内的样式,默认值false
        minifyCSS: true,
        /* // 清理内容为空的元素 默认值false
        removeEmptyElements: false,
        // 移除多余空格
        collapseWhitespace: false,
        // 压缩html内的js,默认值false
        minifyJS: true,
        // 区分大小写的方式处理自定义标签内的属性。默认值false,转成全小写
        caseSensitive: false,
        // 去掉style和link标签的type属性。默认值false
        removeStyleLinkTypeAttributes: false */
      }
    })

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