V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
damonzhaofei
V2EX  ›  问与答

webpack 输出多个 html 模版的问题

  •  
  •   damonzhaofei · 2016-03-09 13:27:26 +08:00 · 4338 次点击
    这是一个创建于 2941 天前的主题,其中的信息可能已经有所发展或是发生改变。

    https://github.com/chemdemo/webpack-bootstrap/issues/9 问题地址

    在解决多文件入口的 html 生成 发现一个问题,
    比如
    bash
    a/
    a.js
    a.html
    a.css
    b/b.js
    b.css
    b.html

    编译后输出的两个 html 里面的都包涵了 inject 了 a.js b.js 的 script
    这是我的配置:
    ```js
    'use strict';

    var path = require('path');
    var webpack = require('webpack');
    var vue = require('vue-loader');
    var glob = require('glob');
    var ExtractTextPlugin = require("extract-text-webpack-plugin");
    var HtmlWebpackPlugin = require('html-webpack-plugin');

    // path
    var staDomain = 'http://admin.corp.dajia365.com';

    var srcDir = path.resolve(process.cwd(), 'src');
    var nodeModPath = path.resolve(__dirname, './node_modules');

    var dest = 'build';
    var alias = {
    zpto: 'common/zpto/zpto',
    fetch: 'common/fetch/fetch',
    cookies:'common/util/cookies',
    store: 'common/util/store'
    };
    // get entry path
    var getEntry = function () {
    var entry = {};
    var jsDir = path.resolve(srcDir, 'app');
    glob.sync(jsDir + '/*/page/.js')
    .forEach(function (name) {
    var n = name.substring(name.lastIndexOf('src/') + 4 , name.lastIndexOf('.js'));
    entry[n] = name;
    });
    return entry;
    };

    var htmlGenerator = function () {
    var r = [];
    var entryHtml = glob.sync(srcDir + '/app/*/.html');
    var entries = getEntry();

    entryHtml.forEach(function (filePath) {
        var filename = filePath.substring(filePath.lastIndexOf('src/') + 4, filePath.lastIndexOf('.'));
    
        var re = new RegExp("(.{" + filename.lastIndexOf('/') + "})");
        var jsFile = filename.replace(re, '$1/page');
    
        var conf = {
            template: filePath,
            filename: filename + '.html'
        };
        if (jsFile in entries) {
            conf.inject = 'body';
            conf.trunks = ['lib', jsFile];
        }
        r.push(new HtmlWebpackPlugin(conf));
    });
    return r;
    

    };

    module.exports = function (options) {
    options = options || {};

    var debug = options.debug !== undefined ? options.debug : true;
    
    var config = {
        resolve:{
            root: [srcDir, './node_modules'],
            alias: Object.assign(alias, options.alias),
            extensions: ['', '.js', '.css', '.scss', '.tpl', '.png', '.jpg']
        },
        entry: Object.assign(getEntry(), {
            lib: [
                'zpto',
                'vue'
            ]
        }),
        output: {
            path:           path.resolve(options.dest || dest),
            filename:       "./[name].js",
            publicPath:     (options.domain || staDomain) + '/',
            chunkFilename:  "./[chunkhash:8].chunk.js"
        },
        module:{
            loaders:[
            {
                test: /\.vue$/,
                loader: "vue"
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'url?limit=1000&name=img/[name].[ext]'
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader','css-loader')
            }
            ]
        },
        plugins:[
            new ExtractTextPlugin('./[name].css'),
            new webpack.optimize.CommonsChunkPlugin('lib', 'lib.js', 2)
        ].concat(htmlGenerator()),
        babel: { //配置 babel
            "presets": ["es2015"],
            "plugins": ["transform-runtime"]
        },
        vue: { //vue 的配置,需要单独出来配置
            loaders: {
                js: 'babel',
                css: 'css-loader'
            }
        },
        resolveLoader: {
            root: path.join(__dirname, 'node_modules')
        },
        useMemoryFs: true,
        progress: true
    }
    var vueLoader = {
        js: 'babel',
        css: ExtractTextPlugin.extract("vue-style-loader", "css-loader"),
        sass: ExtractTextPlugin.extract("vue-style-loader", "css-loader", 'sass-loader')
    };
    if (!options.debug) {
        config.vue.loaders = vueLoader;
        config.plugins = (config.plugins || []).concat([
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: '"production"'
                }
            }),
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false
                }
            }),
            new webpack.optimize.OccurenceOrderPlugin()
        ]);
    } else {
        config.devtool = 'source-map';
    }
    
    return config;
    

    };

    部分目录树:
    ```zsh
    src
    │   ├── app
    │   │   ├── ktm
    │   │   │   ├── img
    │   │   │   │   ├── i-add.png
    │   │   │   │   ├── i-close.png
    │   │   │   │   ├── i_logo.png
    │   │   │   │   └── pic.jpg
    │   │   │   ├── index.html
    │   │   │   ├── page
    │   │   │   │   ├── index.js
    │   │   │   │   └── test.js
    │   │   │   ├── style
    │   │   │   │   ├── style.css
    │   │   │   │   └── test.css
    │   │   │   └── test.html
    │   │   └── shaibei
    │   │       ├── component
    │   │       │   ├── popup.vue
    │   │       │   └── test.vue
    │   │       ├── img
    │   │       │   ├── i_arr.png
    │   │       │   ├── i_logo.png
    │   │       │   ├── i_mi.png
    │   │       │   ├── i_p.png
    │   │       │   ├── i_password.png
    │   │       │   ├── i_password_on.png
    │   │       │   ├── i_rili.png
    │   │       │   ├── i_search.png
    │   │       │   ├── i_username.png
    │   │       │   ├── i_username_on.png
    │   │       │   ├── place_holder.png
    │   │       │   ├── shaibei_backstage_0.5_z.png
    │   │       │   └── user.jpg
    │   │       ├── index.html
    │   │       ├── page
    │   │       │   └── index.js
    │   │       └── style
    │   │           └── style.css
    

    请帮忙看下又啥问题么?

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4567 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 44ms · UTC 01:06 · PVG 09:06 · LAX 18:06 · JFK 21:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.