webpack 输出多个 html 模版的问题

2016-03-09 13:27:26 +08:00
 damonzhaofei

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

请帮忙看下又啥问题么?

4503 次点击
所在节点    问与答
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/262170

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX