常用命令
先说说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等
- 备注：
- npx webpack ./src/components/index.js // 让webpack打包index.js文件，（指定index.js为项目的入口文件）
- 如果只输入npx webpack ,默认情况下webpack就不知道入口文件是哪个，打包就会出错
- 但是当在文件夹根目录配置了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即可
