项目中安装webpack

不要在全局安装webpack ,在项目中安装,以免版本冲突
webpack-cli安装,获得在命令行使用webpack指令的能力

npm i webpack webpack-cli -D

查看安装版本

直接 webpack -v 查看会找不到,原因是不是全局安装,使用npx查看
npx会在当前目录的node_modules中查找

npx webpack -v  

安装指定版本webpack

查看webpack所有历史版本

npm view webpack versions

查看webpack最新版本

npm info webpack

安装指定版本,注意和对应的cli版本不同可能会报错

npm i webpack@4.16.5 webpack-cli@3.3.11 -D

初始化项目

init -y是默认配置,需要自定义可使用 npm init

npm init -y

webpack的配置文件

在根目录创建webpack.config.js
path.resolve(__dirname,xxx)获取当前目录的绝对路径后拼接xxx
打包配置输入打包命令 npx webpack --mode development

const path = require('path')
module.exports = {
  mode: 'production', //打包方式默认就是production
  //entry: './src/index.js',//简写
  entry: {
    main: './src/index.js',
  },
  output: {
    filename: 'bundel.js',
    path: path.resolve(__dirname, 'dist'),
  },
}

在package.json中简化打包命令

在package.json中的scripts配置命令
不用再写npx,scripts中命令执行会在当前项目node_modules中查找
配置后直接运行 npm run build

"scripts": {
    "build": "webpack --mode development"
  },