1 当前目录

2 webpack.config.js 配置

const webpack = require('webpack'),

      htmlWebpackPlugin = require('html-webpack-plugin'),

      path = require('path');

module.exports = {

    entry: {

      main: './src/script/main.js',

      a: './src/script/a.js',

      b: './src/script/b.js',

      c: './src/script/c.js'

    },

    output: {

        path: path.resolve(__dirname, './dist'),

        filename: 'js/[name]-[chunkhash].js',

        publicPath: 'http://cdn.com/'

    },

    plugins: [

        new htmlWebpackPlugin({

            filename: 'a.html',

            template: 'index.html',

            inject: 'body',

            title: 'this is a',

            excludeChunks: ['b', 'c']  //不包括的chunks

        }),

        new htmlWebpackPlugin({

            filename: 'b.html',

            template: 'index.html',

            inject: 'body',

            title: 'this is b',

            excludeChunks: ['a', 'c']

        }),

        new htmlWebpackPlugin({

            filename: 'c.html',

            template: 'index.html',

            inject: 'body',

            title: 'this is c',

            excludeChunks: ['a', 'b']

        })

    ]

};

4 根目录模板 index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title><%= htmlWebpackPlugin.options.title %></title>

    <!--将mian.js写在页面里面

        去掉不带publicPath的内容如 http://cdn.cn/

        compilation.assets[].source()

     -->

    <script type="text/javascript">

        <%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>

    </script>

</head>

<body>

    <!--如果chunk有main.js就不引入 因为上面引入了??????-->

    <% for(var key in htmlWebpackPlugin.files.chunks){ %>

       <% if(key !== 'main'){ %>

            <script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks.entry %>"></script>

       <% } %>

    <% } %>

</body>

</html>

5 打包

6 查看变化

6.1 a.html

6.2 b.html

6.3 c.html

webpack2使用ch5-多页面设置 内部js和引入js的更多相关文章

  1. JS动态引入js,CSS——动态创建script/link/style标签

    一.动态创建link方式 我们可以使用link的方式.如下代码所示. 二.动态创建style方式 但是,这样的话,需要加载整个css文件,但是那样有可能浪费一个http请求并占用一个服务器请求数,并等 ...

  2. JS动态引入js、CSS动态创建script/link/style标签

    一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.create ...

  3. js中引入js

    第一个js文件(被引入的js文件),文件名one.js,内容如下 function alertInOne(){    alert('in one');} 第二个js文件,文件名two.js,内容如下 ...

  4. js里面引入js

    document.write('<script src="http://js.xcar.com.cn/bbs/sidebar/js/publicSidebar.js"> ...

  5. JS - 解决引入 js 文件无效的问题

    增加 type 即可  <script type="text/javascript" src="....js"></script>

  6. 微信JS初始化--微信JS系列文章（一）

    概述 微信JS的使用方法,官方文档已经描述得比较清楚了,这里我就不重复介绍了,本文意在提供现成的代码,供大家快速迭代开发,以及补充一下官方文档描述得不够清楚的地方,避免大家踩相同的坑. 微信JS初始化 ...

  7. 模板内部不支持原生js的方法？》》artTemplate模版方法注册window全部事件方法

    我的模板中出现了: {{parseInt(hasshakenum)}} 结果报错: Template Error resultPageTMP Render Error parseInt is not ...

  8. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  9. 如何使用 require.js ，实现js文件的异步加载，避免网页失去响应，管理模块之间的依赖性，便于代码的编写和维护。

    一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...

随机推荐

  1. java8 去掉 perm 用 Metaspace 来替代

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt266 正如大家所知,JDK 8 Early Access版已经提供下载.这使 ...

  2. [js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解

    在这之前,我已经分享过组件与组件的通信机制以及父子组件之间的通信机制,而我们的vuex就是为了解决组件通信问题的 vuex是什么东东呢? 组件通信的本质其实就是在组件之间传递数据或组件的状态(这里将数 ...

  3. 关于SpringMVC项目报错:java.io.FileNotFoundException: Could not open ServletContext resource [/WEB-INF/xxxx.xml]

    关于SpringMVC项目报错:java.io.FileNotFoundException: Could not open ServletContext resource [/WEB-INF/xxxx ...

  4. 团队作业3——需求改进&系统设计

    Deadline: 2017-4-21 22:00PM,以博客发表日期为准 评分基准: 按时交 - 有分,检查的项目包括后文的四个方面 需求&原型改进 系统设计 Alpha任务分配计划 测试计 ...

  5. 搭建JSP开发环境

    所谓"工欲善其事,必先利其器",要进行JSP网站开发,首先需要把整个开发环境搭建好. JSP开发运行环境 -开发工具包JDK(Java Develop Kit),即Java开发工具 ...

  6. 团队作业4——第一次项目冲刺（Alpha版本）4th day

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 计时功能已经完成,然后24点的代码如何在游戏界面与界面组件联系上正在进行. 四.困难与问题 1.在安卓框架与java代码的结合 ...

  7. 201521123122 《java程序设计》第八周实验总结

    201521123122 <java程序设计>第八周实验总结 1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 List中指定元素的删除(题目4- ...

  8. 201521123009 《Java程序设计》第7周学习总结

    1. 本周学习总结 2. 书面作业 Q1:ArrayList代码分析 1.1 解释ArrayList的contains源代码 //contains()方法 public boolean contain ...

  9. 201521123068 《java程序设计》 第7周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 //contains ...

  10. animation实现动画效果

    CSS3 animation 属性 CSS 参考手册 实例 使用简写属性,将动画与 div 元素绑定: div { animation:mymove 5s infinite; -webkit-anim ...