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. Project 3:N级魔方阵

    魔方阵:由n*n个数字所组成的n阶方阵,具有各对角线,各横列与纵行的数字和都相等的性质,称为魔方阵.而这个相等的和称为魔术数字.若填入的数字是从1到n*n,称此种魔方阵为n阶正规魔方阵. 目标:输入一 ...

  2. webarchive文件转换成htm文…

    原文地址:webarchive文件转换成htm文件作者:xhbaxf Mac OS X系统带有文件转换功能,可以把webarchive文件变成html文件.方法是:   Step 1: 建立一个文件夹 ...

  3. 【★】EIGRP终极解析！

    EIGRP的思维导图 如图,我想采用一种全新的"框架式"教学法,或者叫"盖楼",旨在利用抽象的外部接口,分类分层地介绍各个机制之间的关系.其实任何学习到最后都 ...

  4. 【Alpha阶段】第四次 Scrum Meeting

    每日任务 1.本次会议为第 四次 Meeting会议: 2.本次会议在上午09:35,大课间休息时间在禹州楼召开,召开本次会议为20分钟,分析完善接下来的任务: 一.今日站立式会议照片 二.每个人的工 ...

  5. 201521123007《Java程序设计》第7周学习总结

    1. 本周学习总结 2. 书面作业 1. ArrayList代码分析 1.1 解释ArrayList的contains源代码 以下是ArrayList的contains源代码: public bool ...

  6. 201521123004《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 接口 接口(interface)就是方法声明和常量值的集合 实现接口的类叫接口的 ...

  7. 201521123055 《Java程序设计》第4周学习总结

    1. 本章学习总结 2. 书面 Q1.注释的应用使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) Q2.面向对象设计 2.1 将在网上商城购物或者在班级博客进行 ...

  8. 201521123064 《Java程序设计》第2周学习总结

    1. 本章学习总结 1.学会使用码云管理代码,包括将本地的代码上传至码云,和将码云上的项目保存至本地. 2.将码云上项目保存至本地的过程中,若eclipse窗口中已有同名项目,则导入的过程中可能会出错 ...

  9. 201521123032 《Java程序设计》第2周学习总结

    1. 本周学习总结 本周java回顾了各种数据类型,在java中使用浮点型会不精确,改用double行就好.学习了string的类型,string的对象是不可变的,创建之后不能再修改,在string的 ...

  10. 201521123075 《Java程序设计》第1周学习总结

    1. 本周学习总结 (1)Java不仅是程序语言,还是一种标准规范,代表着解决问题的方案.Java是一个面向对象的编程语言,熟悉后相对于c++更方便,其一大特色就是能够跨平台运行. (2)Java发展 ...