webpack配置一个简易的vue开发环境

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


const PATH = {
    app:path.join(__dirname,'src/main.js'),
    build:path.join(__dirname,'./dist')
}

module.exports = {
    mode : "development",
    // 入口文件配置
    entry : {
        app:PATH.app
    },
    // 出口文件配置
    output :{
        filename : "[name].js",
        path:PATH.build
    },
    // 模块打包的配置
    module:{
        rules : [
            {
                // 编译vue文件
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                // 打包一css/scss结尾的文件
                test:/\.(css|scss)$/,
                // loader的执行顺序是从右到左，从下到上
                use:["style-loader","css-loader","scss-loader"]
                // 安装 ： npm install npm install --save-dev style-loader css-loader  sass-loader node-sass
            },
            {
                test:/\.(js|jsx)$/,
                use:{
                    // babel-loader 编译js
                    loader:"babel-loader",
                    // 将es6编译成es5
                    options:{
                        // 安装 ： npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
                        presets:["@babel/env","@babel/react"]
                    }
                }
            }
        ]
    },
    // 插件
    plugins : [
        // 安装 npm install html-webpack-plugin -D
        // 模板文件
        new HtmlWebpackPlugin({
            filename:"index.html",
            template:"./src/index.html"
        }),

        // 可以编译vue文件 ， 需要先安装  npm install -D vue-loader vue-template-
        // 引入 const VueLoaderPlugin = require('vue-loader/lib/plugin');
        new VueLoaderPlugin()
    ],
    devServer:{
        // 跨域配置
        proxy:{
            "/api":{
                target:"http:qq.com",
                changeOrigin:true
            }
        }
    }

    // 构建一个服务器
    // 步骤一安装： npm install webpack-dev-server -D
    // 步骤二直接启动： npx webpack-dev-server
}

配置了webpack-dev-server服务器后可以在package.json文件中配置scripts项，如下：

"scripts": {
    "dev": "webpack-dev-server"
},

然后可以使用 npm run dev 启动项目!