一招教你轻松上手vue项目，webpack打包的基本使用

如何在项目安装配置webpack

1.运行 npm i webpack webpack-cli -D 命令安装相关的包
2.在项目根目录中，创建名为webpack.config.js的webpack配置文件
3.在webpack的配置文件中，初始化如下基本配置:

module.exports={
mode:'development'//用来指定构建模式上线时改成production进行压缩代码大小
entry:path.join（_dirname,"./src/index.js）//文件的入口文件
output:{
path:""，//输出文件的存放路径
filename:''//输出文件的名称
}
}

4.在package.json配置文件中的script节点下新增dev脚本:
“script”:{
“dev”:“webpack”
}
5.在终端运营npm run dev命令，启动webpack进行项目打包

webpack自动打包功能

1.运行npm i webpack-dev-server -D安装自动打包工具
2.修改package.json中script中的dev命令:

"script":{
"dev":"webpack-dev-serve"
}

3.将将src下的index.html的script脚本的引用路径改为"./buldle.js"
4.运行npm run dev命令重新进行打包