-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
110 lines (107 loc) · 4.36 KB
/
webpack.config.js
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var htmlWebpackPlugin=require("html-webpack-plugin");
var path=require('path');
var options = {
entry: [path.join(__dirname,'/Scripts/entry.js')],
output: {
path: path.join(__dirname,'/Build/'),
filename: 'Scripts/index.bundle.js',
publicPath: 'http://localhost:3000/Build/'
},
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style","css")
},
{
test: /\.(eot|woff|woff2|svg|ttf|otf)|\.(eot|woff|woff2|svg|ttf|otf)\?([\w\W]*)$/,
loader: "file" ,
query : {
limit : 10000,
// Fonts目录
name : 'Content/fonts/[name]_[hash].[ext]'
}
},
{
test:/\.(jpg|png|gif|ico)$/,
loader:"url",
query:{
limit:8192,
name:"./Content/Images/[hash:8].[name].[ext]"
}
},
{
//html模板加载器,可以处理引用的静态资源,默认配置参数attrs=img:src,处理图片的src引用的资源
//比如你配置,attrs=img:src img:data-src就可以一并处理data-src引用的资源了,就像下面这样
test: /\.html$/,
loader: "html?attrs=img:src img:data-src"
},
{
test: /bootstrap\/js\//,
loader: 'imports?jQuery=jquery'
}
]
},
resolve:{
//自动补全识别哪些后缀
extensions:['','.js','.jsx','.css'],
//模块别名定义,方便后续直接引用别名,无须多写长长的地址
alias: {
'react': path.join(__dirname, 'node_modules', 'react'),
'reactDOM':path.join(__dirname, 'node_modules', 'react-dom'),
'bootstrap':path.join(__dirname,'Scripts/Lib/bootstrap.min'),
'Hello': '../Components/Hello.js',//后续直接 require('Hello') 即可
'LeftSide':'../Components/Frame/LeftSide.js',
'MainContent':'../Components/Frame/MainContent.js'
}
},
plugins:[
// new webpack.optimize.CommonsChunkPlugin({
// name: 'vendor', // 将公共模块提取,生成名为`vendor`bundle
// //chunks: ['jquery','bootstrap','react','reactDOM'], //提取哪些模块共有的部分,名字为上面的vendor.
// minChunks: Infinity // 提取至少*个模块共有的部分
// }),
new webpack.optimize.CommonsChunkPlugin('vendor', 'Scripts/vendor.bundle.js'),
// 全局依赖jQuery
new webpack.ProvidePlugin({
$ : "jquery",
jQuery : "jquery",
"window.jQuery" : "jquery"
}),
new ExtractTextPlugin('Content/css/[name].css',{
allChunks:true
}),
new htmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
favicon:'./Content/Images/favicon.ico', //favicon路径
filename:'View/index.html', //生成的html存放路径,相对于 path
template:'./index.html', //html模板路径
//chunks:['vendor','index'], //需要引入的chunk,不配置就会引入所有页面的资源.名字来源于你的入口文件
inject:true, //允许插件修改哪些内容,包括head与body
hash:true, //为静态资源生成hash值
minify:{ //压缩HTML文件
removeComments:true, //移除HTML中的注释
collapseWhitespace:true //删除空白符与换行符
}
})
]
};
if(process.env.NODE_ENV==="production"){
options.devtool=false;
options.output.publicPath="../";
options.plugins=options.plugins.concat([
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production') //发布时添加
}
}),
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings: false
},
except: ['$super', '$', 'exports', 'require'] //排除关键字
})
]);
};
module.exports=options;