(webpack篇)1.webpack初识PS：注意webpack-cli版本，不然会报错。

概念：webpack是一个模块打包工具
引入方式: ComonJS 、CMD、AMD

一、构建webpack项目

1.初始化项目 npm init -y
2.安装webpack npm install webpack webpack-cli -D

安装完版本 package.json 中

"devDependencies": {
  "webpack": "^5.22.0",
  "webpack-cli": "^4.5.0"
}

PS：注意webpack-cli版本，不然会报错。

3.项目搭建项目根目录创建src目录&添加index.js文件
index.js 中

let name = 'job'
console.log(`Hello, ${name}`);

4.项目打包命令 npx webpack
5.打包生成结果出现dist目录&出现main.js

6.修改package.json文件去掉"main": "index.js"配置 PS:不需要暴露主文件
添加"private": true PS：设置私有
修改项目启动命令scripts中配置

"scripts": {
  "build": "webpack"
}

执行命令 npm run build 进行打包 PS：效果和npx webpack一样

二、webpack配置文件

说明：之前没有添加webpack的配置，打包也会生效，因为webpack会有默认的配置文件

1.根目录添加配置文件webpack.config.js

const path = require('path')

module.exports = {
    mode: 'development',   // 指定构建模式
    entry: './src/index.js',  // 指定构建入口文件
    output: {
        filename: 'bundle.js',  // 指定构建生成的文件名
        path: path.resolve(__dirname, 'dist'), // 指定构建生成文件所在路径
    }
}

2.打包后，dist目录下创建html模板 dist/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页开发模板</title>
</head>
<body>
    <div id='root'></div>
    <script src="./bundle.js"></script>
</body>
</html>

三、构建本地开发环境

1.说明通过使用webpack-dev-server
2.安装 npm install webpack-dev-server -D
3.安装结果在package.json中
4.启动配置在package.json中

"scripts": {
  "build": "webpack",
  "serve": "webpack server"
}

项目启动命令：
npm run serve