webpack基本操作

1.webpack能干嘛用？

略...

2.webpack项目基本命令和作用

#使用npm初始化一个包描述文件，会生成一个package.json
npm init

package.json

{
  "name": "webpack-5",
  "version": "1.0.0",
  "description": "",  
  "main": "index.js",  //打包入口
  "scripts": {  //脚本执行命令
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

3.全局安装webpack-cli脚手架

#全局安装webpack-cli脚手架，自动更新到最新版
npm i webpack webpack-cli -g

4.将webpack-cli脚手架添加到开发依赖

#将webpack-cli脚手架添加到开发依赖,会生成node_modules文件夹，package-lock.json文件
npm i webpack webpack-cli -D

node_modules:
存放许多的模块文件及插件

package-lock.json：
记录模块与模块之间的依赖关系；
锁定包的版本；
记录项目所依赖第三方包的树状结构和包的下载地址，加快重新安装的下载速度

5.webpack.config.js文件

webpack.config.js文件命名：该文件可以修改，只需要在package里指定一下打包配置文件名称即可
比如改为yto.webpack.config.js，对应的package.json为

{
  "name": "1-webpack-5",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "webpack": "^5.53.0",
    "webpack-cli": "^4.8.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config yto.webpack.config.js"
  },
  "author": "",
  "license": "ISC"
}

webpack.config.js的内容

const path = require('path')
module.exports = {
    entry : './src/main.js',
    output: {
        "filename": "build.js",
        "path": path.resolve(__dirname,'dist')
    }
}