const path = require('path')
const webpack = require("webpack")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
module.exports = {
	//入口配置文件
	entry: {
		entry: "./src/main.js"
	},
	//出口文件的配置项
	output: {
		path: path.resolve(__dirname, "dist"), //输出的路径，用了Node语法
		filename: "js/[name]-[hash:8].bundle.js" //输出的文件名称
	},
	//模块：例如解读CSS,图片如何转换，压缩
	module: {
		rules: [{
				test: /\.css$/,
				use: [
					'style-loader',
					'css-loader'
				]

			},
			{
				test: /\.(eot|woff2?|ttf|svg)$/,
				use: [{
					loader: "url-loader",
					options: {
						name: "[name]-[hash:8].min.[ext]",
						limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file
						publicPath: "fonts/",
						outputPath: "fonts/"
					}
				}]
			},
			{
				test: /\.vue$/,
				use: [{
					loader: 'vue-loader',
					options: {
						preserveWhitespace: false // 不要留空白
					}
				}],
				include: [path.resolve(__dirname, 'src')]
			},
			{
			    test: /\.js$/,
			    exclude: /(node_modules)/,
			    use: {
			        loader: "babel-loader"// 转化需要的loader
			       
			    }
			},
			{
				test: /\.(png|jpg|jpeg|gif)$/,
				use: [{
					loader: "url-loader",
					options: {
						name: "[name]-[hash:8].min.[ext]",
						limit: 8 * 1024, // size <= 8KB
						outputPath: './img',
						publicPath: './img',
						esModule: false
					}
				}]
			}

		]
	},
	resolve: {
		extensions: ['.js', '.jsx', '.json']
	},
	mode: "development",
	//插件，用于生产模版和各项功能
	devServer: {
		// ...
			stats: "errors-only",
	},
	stats: "errors-only",
	plugins: [
		new HtmlWebpackPlugin({
			filename: "index.html",
			template: path.join(__dirname, "./public/index.html"),
			chunks: ["entry"]
		}),
		new webpack.HotModuleReplacementPlugin(),
		new VueLoaderPlugin(),
		new CleanWebpackPlugin(), // 所要清理的文件夹名称
		new FriendlyErrorsWebpackPlugin(),//打印日志
	],

}