# Webpack

// 下包：
    extract-text-webpack-plugin@next   // 样式的抽离

const path = require('path');
const htmlwebpackplugin = require('html-webpack-plugin'); // 新建html页面
// 将多个样式表打包为一个样式表
const ExtractTexPlugin = require('extract-text-webpack-plugin')  // 样式的抽离

function entries(){
	let temp = {};
	let pathname = path.join(__dirname,'src');
	let files = fs.readdirSync(pathname);
	files.map(file =>{
		let pathUrl = path.join(pathname,file);
		ley stats = fs.statSync(pathUrl);
		if(stats.isFile()){
			let key = path.basename(pathUrl,'.js');
			temp[file] = pathUrl;
		}
	})
}
module.exports = {
	mode:'development',  // 解决警告
	// 单入口文件
	entry:path.join(__dirname,'src/app.js'),
	// 多入口文件
	// entry:{
	//   app:path.join(__dirname,'src/app.js'),
	//   app2:path.join(__dirname,'src/app2.js')
	// }
	output:{
			path:path.join(__dirname,'dist'),
			filename:'buildle.js'
	},
	// webpack文件解析器，用来解析各种loader
	module:{
		rules:[
			{
				test:/\.css$/,
				loader:ExtractTextPlugin.extract({  // 样式的抽离
						fallback:'style-loader',
						use:'css-loader'
				})
			},
			{
				test:/\.(jpg|png|gif)/,
				loader:'url-loader' 
			},
			{
				test:/\.(sass|scss)$/,
				loader:[
						"style-loader",
						"css-loader",
						"sass-loader"
				]
			}
		]
	},
	resolve:{
		alias:{
			common:path.join(__dirname,'src/....');
		}
	}
	devServer:{ // 起服务
		host:"localhost",
		port:8080,
		contentBase:'.',   // 基准路径  . 根目录 //本地服务器所加载的页面所在的目录
		overlay:true, // 将错误显示在页面中
		inline:true, // 当源文件发生改变是自动刷新页面
		hot:true,   // 模块的热替换
		stats:'errors-only',  // 只打印错误
		compress:true  // 当他为true时对所有的服务器资源采用gzip压缩
		before(app){
				app.get('/api',(req,res)=>{
						res.end()
				}) 
		}
	}
	plugins:[
		new webpack.HotModuleReplacementPlugin(), // 模块的热替换
		new ExtractTextPlugin('common.css'),  //  common.css 目标目录
		new HtmlWebpackPlugin({    // 新建html
			title:"my first page",
			filename:"index.html",
			template:"./index.html",
			inject:true // 默认false,true显示在body中
		})
	],
	// devtool:"eval-source-map"   无map文件
	devtool:"cheap-source-map"  // 有map的压缩文件
}  

// sass需要两个包
// node-sass    sass-loader

// 引入: 
	// 单：
	import Utils from './js/app.js'
	// 多：
	import {PI,username,test} from './js';
// 抛出：
	// 单：
	export default utils
	// 多：
	export const PI = 3.14;
	// 多：
	export let a = 6;

webpack.optimize.commonsChunkPlugin   // 实现多个文件中公共代码的提取

setup()  // 为服务的中间件,可以对请求进行拦截

proxy()  // 用来做代理的，可以将请求代理到别的服务

hot()  // 模块的热加载

contentBase()  // 用来定义静态文件的地址

webpack.ensure()  // 实现文件的懒加载