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
请帮忙看下又啥问题么?