1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
//获取html-webpack-plugin参数的方法
var getHtmlConfig = function (name) {
return {
template: './src/view/' + name + '.html',
filename: 'view/' + name + '.html',
inject: true,
hash: true,
chunks: ['common', name]
}
}
var config = {
//使用对象配置多入口文件
entry: {
// common是公共模块文件，跟公共模块插件name同属性即可
'common': ['./src/page/common/index.js'],
'index': ['./src/page/index/index.js'],
'login': ['./src/page/login/index.js']
},
output: {
path: './dist',
// 使用[name]显示原入口文件的名字，支持路径
filename: 'js/[name].js'
},
// 加载外部变量模块，'window.jQuery'要加引号
externals: {
'jquery': 'window.jQuery'
},
module: {
// 处理css
loaders: [
{test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
{test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=100&name=resource/[name].[ext]'},
]
},
plugins: [
//提取公共模块，将独立通用模块放到js/base.js中
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
filename: 'js/base.js'
}),
//提取公共css，将打包好的文件放入css文件夹
new ExtractTextPlugin("css/[name].css"),
// HTML模板的处理
new HtmlWebpackPlugin(getHtmlConfig('index')),
new HtmlWebpackPlugin(getHtmlConfig('login'))
]
};
module.exports = config;
|
