2019-10-15 最新 webpack.config.js

const path = require("path");
const webpack = require("webpack");
const htmlWebpack = require("html-webpack-plugin");
const uglifyjsWebpack = require("uglifyjs-webpack-plugin");
const { VueLoaderPlugin } = require('vue-loader');

module.exports={
    entry:"./mian.js",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"index-[hash:5].js"
    },
    // mode:development,
    module:{
        rules:[
            {
                test:/\.css$/,
                use:["style-loader","css-loader"]
            },
            {
                test:/\.less$/,
                use:["style-loader","css-loader","less-loader"]
            },
            {
                test:/\.(png|jpg|gif|jpeg|bmp)$/,
                use:["url-loader?limit=7654&name=[hash:8]-[name].[ext]"]
            },
            {
                test:/\.(ttf|eot|svg|woff|woff2)$/,
                use:["url-loader"]
            },
            {
                test:/\.scss$/,
                use:["style-loader","css-loader","sass-loader"]
            },
            {
                test:/\.vue$/,
                use:["vue-loader"]
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env',"@babel/preset-react"],
                        plugins: ['@babel/plugin-transform-runtime',"@babel/plugin-transform-arrow-functions", "@babel/plugin-proposal-class-properties" ]
                    }
                }
            }
        ]
    },
    plugins:[
        new htmlWebpack({
            filename:"index.html",
            template:"./index.html"
        }),
        new VueLoaderPlugin(),
        new uglifyjsWebpack(),
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer:{
        contentBase:path.join(__dirname,"./index.html"),
        compress:true,
        port:8080,
        hot:true,
        proxy:{
             '/api': {

                target: 'https://c.y.qq.com/',

                changeOrigin: true,

                pathRewrite: {'^/api' : ''} 

              }


        }
    },
    resolve:{
        alias:{
            //可以改变安装包默认指向的js文件
            "vue$":"vue.dist/vue.js" //修改vue被导入时候的包的路径
        }
    }
}