安装webpack

先安装nodejs，确保由node环境
在终端输入pwd，会打印当前项目的文件路径
安装webpack时需要安装：webpack主包和webpack-cli（让我们可以在命令行中执行webpack命令）

  1. //全局安装
  2. npm i webpack webpack-cli --global

一般建议不全局安装webpack，这可能会导致版本之类的出现问题
1.本地安装webpack，先运行npm i -y 生成packge.json文件
2.本地安装 npm i webpack webpack-cli —save—dev

运行webpack

使用webpack打包，在项目根目录中输入 webpack ，然后会在项目根目录中生成dist文件（打包后文件）

输入命令： webpack —stats detailed 输出详细打包信息

使用本地（无全局webpack，但本地安装了）打包（或其他webpack本地命令）时，需要在命令前加上 npx，例如：打包—> npx webpack

自定义webpack配置

  1. //查看webpack命令有哪些
  2. npx webpack --help
  4. // entry设置入口文件   设置入口文件为./src/index.js
  5. // mode指定在生产环境中使用，这个配置
  6. npx webpack --entry ./src/index.js --mode production
  7. // 使用命令行配置不方便

通过配置文件配置

  1. // 在项目根目录创建webpack.config.js文件
  2. // 这个文件时运行在node上的，所以需要使用commonjs来导入导出，
  3. const path = require("path")
  4. module.export = {
  5.   // 设置入口文件
  6.   entry:"./src/index.js",
  7.   // 设置出口
  8.   output:{
  9.     // 指定输出文件的文件名
  10.     filename:"bundle.js",
  11.     // 指定输出路径，设置为绝对路径，通过node的path，
  12.     // 通过path.resovlve将路径拼接为绝对路径
  13.     // __dirname 是webpack.config.js文件所在的根路径
  14.     path:path.resolve(__dirname,"./dist")
  15.   },
  16.   // 不设置mode时可赋值为none
  17.   mode:"none"
  18. }
  19. // 配置号配置文件后，就可以直接使用npx webpack 打包，后面不用跟别的命令
  20. // 打包完成后需要将出口文件手动导入index.html中