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. css中使用变量

    2017年3月,微软宣布 Edge 浏览器将支持 CSS 变量.这个重要的 CSS 新功能,所有主要浏览器已经都支持了. 声明css变量的时候,变量名前面要加两根连词线(--).变量名大小写敏感,-- ...

  2. 改变input光标颜色与输入字体颜色不同

    设置input css: color #ffd600text-shadow 0px 0px 0px #bababa -webkit-text-fill-color initial input, tex ...

  3. 自上而下，逐步揭开PHP解析大整数的面纱

    遇到的问题 最近遇到一个PHP大整数的问题,问题代码是这样的 $shopId = 17978812896666957068; var_dump($shopId); 上面的代码输出,会把$shopId转 ...

  4. MIT6.828课程JOS在macOS下的环境配置

    本文将介绍如何在macOS下配置MIT6.828 JOS实验的环境. 写JOS之前,在网上搜寻JOS的开发环境,很多博客和文章都提到"不是32位linux就不好配置,会浪费大量时间在配置环境 ...

  5. ASP.NET Core Web服务器 Kestrel和Http.sys 特性详解

    ASP.NET Core Web服务器 Kestrel和Http.sys 特性详解 1.1. 名词解释 1.2. Kestrel基本工作原理 1.2.1. Kestrel的基本架构 1.2.2. Ke ...

  6. base(function strchr)

    函数原型:extern char *strchr(char *str,char character) 参数说明:str为一个字符串的指针,character为一个待查找字符.        所在库名: ...

  7. JS学习五(js中的事件)

    [JS中的事件分类] 1.鼠标事件 click/bdlclick/onmouseover/onmouseout 2. HTML事件 onload/onscroll/onsubmit/onchange/ ...

  8. 201521123119《Java程序设计》第6周学习总结

    1. 本周学习总结 2. 书面作业 Q1.clone方法 Q1.1 Object对象中的clone方法是被protected修饰,在自定义的类中覆盖clone方法时需要注意什么? 只能在本类内部或者和 ...

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

    1. 本章学习总结 这个星期感觉有点醉,整个人都有点迷茫,仿佛突然失去了方向,连java也难以平复所带来的焦躁的情绪.再加上认为周四早上是没有课的,所以忘记去上了.最近总感觉像咸鱼一样,无所事事,想打 ...

  10. 201521123060 《Java程序设计》第12周学习总结

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