webpack打包vue（1）entry-output主要有mode，entry,output,devserver,re

基于webpack打包vue项目，现在webpack4的配置已经非常简化主要有mode，entry,output,devserver,resolve,module.plugins,optimization这些点需要掌握。

（1）新建一个文件夹

npm init -y
运行命令创建一个package.json文件，用于管理依赖

（2）创建webpack.config.js文件

（3）创建src文件夹，里面分别有App.vue,main.js入口文件，index.html模板

首先需要引入path模块在webpack.config.js文件

const path=require("path")

module.exports={
    mode:"development",
    entry:{},
    output:{},
    devServer:{},
    resolve:{
        extensions:[],
        alias:{}
    },
    module:{},
    plugins:[],
    optimization:{}
}

一：mode

mode分为2种模式，development是开发环境；production是生产环境，代码会被压缩混淆，这个是webpack4自带的，不需要另外再装插件

二：entry

entry是打包入口，入口文件地址写在这里

单入口

entry:{
    app:["./src/main.js"]
}

多入口

entry:{
    app:["./src/app/main.js"],
    main:["./src/main/main.js"]
}

三：output

文件打包输出位置
output:{
    path:path.resolve(__dirname,"dist")，
    filename:"static/js/[hash:8].[name].js."
}