const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin=require('vue-loader/lib/plugin') //webpack4要加 3不用

module.exports = {
    mode: "development",

    entry: {
        main: "./src/index.js" //入口文件
    },
    output: {
        path: path.join(__dirname, './dist'), //打包出口文件
        // path:path.resolve('./dist'),
        // filename: "bundle.js"
        filename: "[name].[hash:12].js" //main.0b7f4ea3f618.js 不会覆盖旧版本
    },
    // 配置插件plugin
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "./src/index.html"), //自己写的页面
            filename: "index.html", //经过webpack打包生成在dist->文件夹下的页面也叫index.html
            minify: {
                removeAttributeQuotes: true // 移除属性的引号使得文件体积更小。
            }

        }),
        new VueLoaderPlugin() //webpack4要加 3不用
    ],
    // 配置第三方模块module加载规则
    module: {
        rules: [
            // css模块
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'] //从右到左加载
            },
            // 图片模块file-loader  url-loader(适用于小图片)
            // url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl打包进css文件，大于limit的还会使用file-loader进行copy
            // 1kb=1000B 字节
            {
                test: /\.(jpg|png|gif|bmp|jpeg)$/,
                use: ["url-loader?limit=30000&name=[hash:8]-[name].[ext]"] //30kb
            },
            // 字体文件
            {
                test: /\.(ttf|woff|woff2|eot|svg)$/,
                use: ["url-loader"]
            },

            // less打包
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            //sass打包
            {
                test: /\.(sass|scss)$/,
                use: ["style-loader", "css-loader", "sass-loader"]
            },
            // js文件打包
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            // vue文件打包 webpack4要加
            {
                test: /\.vue$/,
                use: 'vue-loader',
              
            },


        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json', '.vue'], // 表示，这几个文件的后缀名，可以省略不写
        alias: { // 表示别名
            '@': path.join(__dirname, './src'), // 这样，@ 就表示 项目根目录中 src 的这一层路径
            // 'vue$':'vue/dist/vue.js'  //指定vue包的引入路径
        }
    },



}