zoukankan      html  css  js  c++  java
  • webpack2使用ch5-多页面设置 内部js和引入js

    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

  • 相关阅读:
    Core Animation简介
    objective-c 常用函数、变量
    NSString判断纯数字
    自定义对话框AlterView
    IOS 6 自动布局 入门-1(IOS中autolayout和之前版本autoresize的差异)
    真机调试问题 错误集合
    block使用小结、在arc中使用block、如何防止循环引用
    View和viewController的生命周期
    IOS侧滑和webview
    Linker Error、MRC与ARC、导航条背景
  • 原文地址:https://www.cnblogs.com/easyweb/p/6673968.html
Copyright © 2011-2022 走看看