webpack打包工具

一、webpack基本使用
1.新建空白文件（目录）文件名不能是webpack，运行 npm init -y （路径中不能有中文），初始化package.json文件
2.创建src源代码目录
3.在src下创建index.html
4.初始化首页基本的结构
5.下载页面需要的依赖包

二、在项目中安装和配置webpack
1.运行 npm install webpack webpack-cli –D ，安装webpack相关工具
2.在项目根目录创建webpack.config.js文件，配置文件
3.在webpack文件中添加
module.exports = {
mode: 'development' // mode 用来指定构建模式
}
4.在package.json中
"scripts":{//添加
"dev":"webpack"
}
5.在终端中运行 npm run dev 启动webpack进行项目打包

三、打包的入口和出口
1.webpack 默认
入口文件：src:index.js
出口文件：dist:main.js

2.需要修改默认文件时 在module.exports中添加
entry: path.join(__dirname, './src/index.js'),//打包入口路径
output: {
path: path.join(__dirname, './dist'),//出口路径
filename: 'bundle.js'//出口文件名称
}

四、webpack 自动打包功能
1.运行npm i webpack-dev-server -D命令 安装自动打包工具
2.修改package.json 的dev:"webpack-dev-server"
3.修改html页面的引用script脚本的路径 src="/bundle.js"
4.运行npm run dev进行重新打包
5.在浏览器中访问http://localhost:8080

在浏览器中预览页面

配置自动打包相关参数 （打包过后，会自动按照下面方式打开）
--open 默认浏览器
--host 127.0.0.1
--port 端口

修改配置文件都需要重新打包一次