webpack成长指北第3章---常用webpack命令及使用webpack命令的方式

常用命令

先说说webpack的常用命令

webpack    //对项目进行打包

webpack   --watch   // 自动监控文件的改变

webpack  --display-modules  //打包时显示隐藏的模块

webpack--display-chunks   //打包时显示chunks

webpack --display-error-details //显示详细错误信息

webpack -w #提供watch方法，实时进行打包更新

webpack -p #对打包后的文件进行压缩

webpack -d #提供SourceMaps，方便调试

webpack --colors #输出结果带彩色，比如：会用红色显示耗时较长的步骤

webpack --profile #输出性能数据，可以看到每一步的耗时

webpack --entry ./entry.js --output-path dist --output-file bundle.js  // 命令行携带配置信息entry，output，output-file等

• 备注：

1. npx webpack ./src/components/index.js // 让webpack打包index.js文件，（指定index.js为项目的入口文件）

2. 如果只输入npx webpack ,默认情况下webpack就不知道入口文件是哪个，打包就会出错

3. 但是当在文件夹根目录配置了webpack.config.js（默认情况下必须是这个名）,再直接运行
   npx webpack，webpack就会自动寻找webpack配置文件，就可以打包文件了
   （如果想以xxx.js作为webpack的配置文件进行打包，则npx webpack --config xxx.js，就会以xxx.js作为配置文件进行打包）

常用命令参考
https://www.jianshu.com/p/9b89f71cef92
https://www.cnblogs.com/mengff/p/6795932.html

全局安装webpack时使用webpack命令

npm i webpack webpack-cli -g

如果是全局安装的webpack，那么webpack命令的使用方式就是

webpack xxx // xxx为webpack指令

项目内安装webpack时使用webpack命令

npm i webpack webpack-cli -D

如果是项目内安装的webpack，那么webpack命令的使用方式就是

npx webpack xxx // xxx为webpack指令

package.json的script新增npm指令使用webpack命令

此方法则不用考虑webpack和webpack-cli是全局安装的还是项目内安装(局部安装)的，根据需要配置package.json的script命令，之后再npm run xxx即可使用webpack命令

package.json

{
  "name": "webpack_learning",
  "sideEffects": [
    "@babel/polyfill",
    "*.css",
    "*.scss",
    "*.less"
  ],
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "bundle": "webpack",
    "watch": "webpack --watch",
    "start": "webpack-dev-server",
    "middleware": "node server.js",
    "dev": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js",
    "build-analyse": "webpack --profile --json > stats.json --config ./build/webpack.prod.js"
  },
  "keywords": [],
  "author": "Boale_Huang",
  "private": true,
  "license": "ISC",
  "dependencies": {
    "axios": "^0.19.2",
    "jquery": "^3.5.1",
    "lodash": "^4.17.15"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-modules-commonjs": "^7.8.3",
    "@babel/plugin-transform-runtime": "^7.9.0",
    "@babel/polyfill": "^7.8.7",
    "@babel/preset-env": "^7.9.5",
    "@babel/preset-react": "^7.10.0",
    "@babel/runtime": "^7.9.2",
    "@babel/runtime-corejs2": "^7.9.2",
    "@typescript-eslint/eslint-plugin": "^3.2.0",
    "@typescript-eslint/parser": "^3.2.0",
    "autoprefixer": "^9.7.4",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.4.2",
    "eslint": "^7.2.0",
    "eslint-plugin-react": "^7.20.0",
    "express": "^4.17.1",
    "file-loader": "^5.1.0",
    "html-webpack-plugin": "^4.0.4",
    "imports-loader": "^0.8.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.13.1",
    "postcss-loader": "^3.0.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "typescript": "^3.9.5",
    "url-loader": "^3.0.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-dev-server": "^3.10.3",
    "webpack-merge": "^4.2.2"
  }
}

备注：
由于是使用npm命令 ，webpack会自动在当前webpack.config.js所在目录的node_modules里寻找webpack 和webpack-cli的包，所以不需要将命令设成“bundle”: “npx webpack”
同时由于项目有webpack.config.json，所以不需要命令去指定入口文件 如webpack xxx.js
直接webpack即可