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. HTML转义字符串

    HTML字符实体(Character Entities),转义字符串(Escape Sequence) 为什么要用转义字符串? HTML中<,>,&等有特殊含义(<,> ...

  2. UICollectionView中Cell左对齐 居中 右对齐 等间距------你想要的，这里都有

    支持靠左,居中,靠右,等间距对齐. 靠左等间距.png 居中等间距.png 靠右等间距.png #import <UIKit/UIKit.h> typedef NS_ENUM(NSInte ...

  3. 使用github出了些问题?fatal: unable to access;Failed connect to github.com:8087;

    使用github出了些问题?fatal: unable to access;Failed connect to github.com:8087; No error 我今天使用git push orig ...

  4. 团队作业7---Alpha冲刺之事后诸葛亮

    一.设想与目标 1.我们的软件要解决什么问题? 我们的软件主要是帮助老师解决通过博客地址收集博客的相关信息来对学生对课程的认真与努力程度进行评定的问题,主要就是根据采集到的各项博客数据作为评分项,构建 ...

  5. 搭建JSP开发环境

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

  6. 通过修改my.ini配置文件来解决MySQL 5.6 内存占用过高的问题

    打开后台进程发现mysql占用的内存达到400+M. 修改一下my.ini这个配置文件的配置选项是可以限制MySQL5.6内存占用过高这一问题的,具体修改选项如下: performance_schem ...

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

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点 1.2 可选:使用常规方法总结其他上课内容. 1.接口不是类,不能使用new进行实例化; 2.接口可以扩展; 3.接口中可以包含 ...

  8. 201521123045 《Java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  9. 201521123116 《java程序设计》第十二周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 Q1.字符流与文本文件:使用 PrintWriter(写),BufferedReader(读) ...

  10. Servlet一些基础

    Servlet 是一套规范,规定了如何通过Java代码来开发动态网站,并由 javax.servlet 和 javax.servlet.http 两个包中的类来实现. servlet是一个服务器端组建 ...