var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin'); // 自动产出html
var openBrowserWebpackPlugin = require('open-browser-webpack-plugin'); //自动打开浏览器
var ExtractTextPlugin = require("extract-text-webpack-plugin"); //css 文件单独加载
var webpack = require('webpack');
// 我感觉 这个函数 有两个用处
// 1, 能够编写假数据 使用
// 2, 还能 模拟用户 找不到 所找的文件，让它返回到 404 页面
function rewriteUrl(replacePath){
return function(req,options){
req.url = req.path.replace(options.path,replacePath);
}
}
// var jqueryPath = path.join(__dirname,'lib/jquery.js')
var jqueryPath = path.resolve('lib/jquery.js')
module.exports = { //导出一个对象
//设置入口文件
// 入口文件的绝对路径
// path.resolve() /Users/zhangzhenguo/muip/webpack-api
// path.resolve('src/index.js') /Users/zhangzhenguo/muip/webpack-api/src/index.js
entry:{ // 入口文件
index:path.resolve(__dirname, 'src/index.js'),
vendor: ['jquery'], // 把 jquery 文件 抽取出来，让它形成缓存
a:path.resolve('src/a.js'),
b: path.resolve('src/b.js')
},
//设置输出
output:{
path: path.resolve(__dirname, 'build'),// 设置输出目录
filename: '[name].[hash].js' //输出动态文件名
},
// 如何解析不同后缀的文件
resolve:{ // json
// 自动补全后缀，注意第一个必须是空字符串，后缀一定以点开头
extensions:['','.js','.css','.jsx','.json','.less'] ,// 指定文件扩展名,在引用是就不需要写全，自动补全
alias:{ // 配置别名可以加快 webpack 查找模块的速度 ，可以是 json
// 如果每当 引入 jquery 模块的时候，它会直接jqueryPath,二必须要从 node_modules文件夹中按模块的查找规则查找
'jquery':jqueryPath
}
},
// 指定 webpack-dev-server 的配置项
devServer:{
inline:true, // 设置自动刷新
port:8081, // 配置端口号，默认 8080 ，
contentBase:'./build', //配置webpack-dev-server 打开端口，去打开哪个文件
// 模拟 后台接口
proxy:[ // 数组
// 这里 对 proxy 做重要说明
/*
1，
path:/\/api\/(.+)/, // 指定用来匹配请求URL的正则（就是我要访问 的路径）
// 将此请求转发给哪个服务器
target:'http://localhost:8081', // 请求转发给谁 ，为什么转发给它，因为我们只有这一个服务，只能这样
rewrite:rewriteUrl('\/$1\.json'), //这是个函数， 转换路径，把原路径转成目标路径
changeOrigin:true // 修改来源路径（true）
2，
// 我感觉 这个函数 有两个用处
// 1, 能够编写假数据 使用
// 2, 还能 模拟用户 找不到 所找的文件，让它返回到 404 页面
function rewriteUrl(replacePath){
return function(req,options){
req.url = req.path.replace(options.path,replacePath);
}
}
3， 访问的方式 http://localhost:8081/api/aaaaa
这个路径访问 呈现 Cannot GET /aaaaa.json 这个结果意思是 无法处理，但你会发现 路径变了
变成 /aaaaa.json 了，也就是说 我们访问上面的端口时 变成这个路径了
首先 我们要知道 我们 静态文件根目录这个 http://localhost:8081/ 指向的是 build
为什么是 build ,因为 是我们 自己制定的 contentBase:'./build' 服务器 打开的目录是 build
因此 这个就是 文件 静态目录。 我们 只要在 build 文件夹 中建 aaaaa.json
数据写 {"name":12,"age":25} ,这时 我们再次 访问 http://localhost:8081/api/aaaaa
会发现 得到了 数据 页面打印出 {"name":12,"age":25}。
*/
{
path:/\/api\/(.+)/, // 指定用来匹配请求URL的正则（就是我要访问 的路径）
// 将此请求转发给哪个服务器
target:'http://localhost:8081', // 请求转发给谁 ，为什么转发给它，因为我们只有这一个服务，只能这样
rewrite:rewriteUrl('\/$1\.json'), //这是个函数， 转换路径，把原路径转成目标路径
changeOrigin:true // 修改来源路径（true）
}
]
},
//配置模块,json形式
module:{
loaders:[ // 指定不同文件加载器，数组形式
{ //json
// 点 需要 转移 \
test:/\.js$/, // 指定要处理那些文件,正则
loader:'babel-loader' // 指定加载器 , -loader 其实是可以省略的
},
{
test:/\.less$/, // 如果是 less 文件如何加载
// ! 分割符，把不同的 loader 分割开
loader:ExtractTextPlugin.extract("style-loader", "css-loader!less-loader") // 从右往左执行，先把 less =》 css =》 style
},
{
test:/\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
// .(woff|woff2|ttf|svg|eot) 以点 woff 或者 woff2 或者 ttf 或者 svg 或者 eot 结尾的文件
test: /\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/, // 图标 如何加载，这些内容可以看 bootstrap 字体图标 有哪些后缀的图标
// ?limit=8192 解释
loader: 'url?limit=8192' // 指定加载器，图标 用 url 加载， limit 指定图标加载的大小(8k 左右)
},
{
test:/\.(png|jpg)$/, // 以点 png 或者 jpg 结尾的文件
loader:'url?limit=8192' //指定url加载器加载，加载器加载 不大于 8192，
// 也就是说 小于 8k 以外联 形式存在
// 大于 8k 时 变成 base64 ，DataURL -》 图片被转换成base64编码的字符串形式，并存储在URL中
},
{
test:/jquery\.js$/, // 如果 遇到jquery.js 为结尾的 脚本
loader:'expose?jQuery' // 就暴露 jQuery 这个 全局对象，也就是 挂在到了 window下来，
// 访问 window.jQuery 能够得到 jquery 这个方法
/*
<script>
console.log(window.jQuery)
</script>
*/
}
],
//如果你 确定一个模块中没有其它新的依赖 就可以配置这项，webpack 将不再扫描这个文件中的依赖
noParse: [jqueryPath],
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new HtmlWebpackPlugin({
title: 'zhufeng-react',//标题
template: './src/index.html', //模板文件,从哪个文件 拷贝过来的
filename:'./index.[hash].html' //产出后的文件名称，生成之后的一个文件
}),
new HtmlWebpackPlugin({
title: 'zhufeng-react',//标题
template: './src/a.html', //模板文件,从哪个文件 拷贝过来的
filename:'./a.[hash].html',
chunks:['a','common.[hash].js']
}),
new HtmlWebpackPlugin({
title: 'zhufeng-react',//标题
template: './src/b.html', //模板文件,从哪个文件 拷贝过来的
filename:'./b.[hash].html',
chunks:['b','common.[hash].js']
}),
new openBrowserWebpackPlugin({ url: 'http://localhost:8081' }), // 自动打开浏览器的地址是
new ExtractTextPlugin("bundle.css"), // css 文件单独加载 配置的，它就能实现 index.html 中的 css ,用link 单独引用
//从index中分离出来,不再包含在打包出来的index.js中,会成生一个zfvendor.js文件
//让它形成缓存，如果没有这句话，vendor只是一个普通的入口文件而矣,有了此语句会把vendor中的模块
// 上面那个 更好
// new webpack.optimize.CommonsChunkPlugin('vendor', 'zfvendor.js'),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.optimize.MinChunkSizePlugin({
compress: {
warnings: false
}
}),
// 查找相等或近似的模块，避免在最终生成的文件中出现重复的模块
new webpack.optimize.DedupePlugin(),
// 按引用频度来排序 ID，以便达到减少文件大小的效果
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.AggressiveMergingPlugin({
minSizeReduce: 1.5,
moveToParents: true
})
]
}