const path = require('path');
const htmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
	mode:'development',
    entry:path.join(__dirname,"./src/index.js"),
    output:{
  	  path:path.join(__dirname,"./dist"),
  	  filename:"bundle.js"
    },
    plugins:[
	    //当设置这个插件后，会在生成的页面中导入bundle.js，这里会在由src下index.html生成的index.html
	    //中导入bundle.js
	    new htmlWebpackPlugin({
	    	//指定模板页面，去生成内存中的页面
	    	template:path.join(__dirname,"./index.html"),
	    	//生成的页面（内存中）
    	    filename:"index.html",
            inject:'body',
            minify:{
                removeComments:true,
                collapseWhitespace:true
            },
            title:"首页"//chunks:[]//单页面配置这一项会出错，导入不了bundle.js
        }),
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']  // 处理资源所使用的loader, 要注意loader的顺序，从右向左执行
            },
            {
            	test:/\.less$/,
            	use:["style-loader","css-loader","less-loader"]
            },
            {
            	test:/\.scss$/,
            	use:["style-loader","css-loader","sass-loader"]
            },
            {
                test: /\.styl$/, 
                use: ['style-loader', 'css-loader', 'stylus-loader']
            },
            {
            	test:/\.js$/,
            	use:"babel-loader",
            	include: path.join(__dirname, 'src'),
                exclude: path.join(__dirname, 'node_modules')
            },
            {
            	test:/\.(jpg|png|gif|bmp|jpeg)$/,
            	use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 7361,
                        name: './src/images/[name].[ext]'
                    }
                }]
            },
  	        {
  	        	test:/\.(ttf|eot|svg|woff|woff2)$/,
  	        	use:"url-loader"
  	        },
  	        {
  	        	test:/\.vue$/,
  	        	use:"vue-loader"
  	        }
        ]
    },
    resolve: {
        extensions: ['.css', '.js', '.json', '.vue'],//引入文件时这些后缀的文件可省后缀名
        alias: {
            '@': 'src',//层级太深时引入文件用别名代替

            //webpack中使用vue，要这样设置，不然导入的vue为runtime模式，功能不全，出错
  	        //要把import vue的路径改掉（默认路径在node_modules/vue下的package.json中main项设置）
  	        //或者直接import Vue from "./node_modules/vue/dist/vue.js"
  	        //import Vue from "vue";
            "vue$":"vue/dist/vue.js"
        }
    }
}