vue中webpack的详解

//html

const HtmlWebPackPlugin=require("html-webpack-plugin");

//清空dist

const CleanWebPackPlugin=require("clean-webpack-plugin");

//分离css

const MiniCssExtractPlugin=require("mini-css-extract-plugin");

//压缩JS

const TerserWebPackPlugin=require("terser-webpack-plugin");

//处理文件的绝对路径

const path=require("path");

//body-parser中间件，处理post请求传过来的参数

const bodyParser=require("body-parser");

webpack.config.js

//html
const HtmlWebPackPlugin = require("html-webpack-plugin");
//清空dist
const CleanWebPackPlugin = require("clean-webpack-plugin");
//分离css
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//压缩JS
const TerserWebPackPlugin = require("terser-webpack-plugin");
//处理文件的绝对路径
const path = require("path");
//body-parser中间件，处理post请求传过来的参数
const bodyParser = require("body-parser");

// const VueLoaderPlugin = require("vue-loader/lib/plugin");
const { VueLoaderPlugin } = require("vue-loader")


module.exports = {
    //入口文件
    entry: "./src/index.js",
    //出口配置
    output: {
        filename: "assets/[name].[hash:6].[ext].js", //生成文件的名字
        path: path.join(__dirname, "dist") //生成文件的路径
    },
    //加载模块，配置各种模块
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        }, {
            test: /\.(sass|scss|css)$/,
            use: ["style-loader", "css-loader", "css-loader"]
        }, {
            test: /\.(jpe?g|png|gif|svg)$/,
            use: [{
                loader: "url-loader",
                options: {
                    limit: 10240,
                    name: "assets/[name].[hash:6].[ext]"
                }
            }]
        }, {
            test: /\.(eot|ttf|svg|woff2?)$/i,
            use: ["url-loader"]
        }]
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        //通过webpack 设置文件夹别名，方便查找文件
        alias: {
            "@": path.join(__dirname, "src")
        }
    },
    //插件
    plugins: [
        new VueLoaderPlugin(),
        //打包前清空
        // new CleanWebPackPlugin(),
        //自动注入
        new HtmlWebPackPlugin({
            template: "index.html",
            filename: "index.html",
            inject: true
        }),
        //抽离CSS
        // new MiniCssExtractPlugin({
        //     filename: "assets/[name].css",
        //     chunkFilename: "assets/[id].css"
        // })
    ],
    //配置服务
    devServer: {
        open: true, //自动打开浏览器
        hot: true //热更新
            // host: "163.162.832", //别人访问你的网址
            // port: 1000, //配置指定端口号
            // before(app) {
            //     app.get("/api/list", (req, res, next) => {
            //         let data = JSON.parse(fs.readFileSync("./mock/data.json"))
            //         res.send({ code: 1, data: data })
            //     })
            // }
    }
}