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

简介: 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即可

目录
相关文章
|
6月前
|
Shell
sh: webpack: 未找到命令
sh: webpack: 未找到命令
|
前端开发 JavaScript 开发者
webpack-dev-server 配置命令的第2种方式| 学习笔记
快速学习 webpack-dev-server 配置命令的第2种方式
113 0
|
前端开发 JavaScript 开发者
webpack-dev-server 的常用命令参数| 学习笔记
快速学习 webpack-dev-server 的常用命令参数
321 0
webpack-dev-server 的常用命令参数| 学习笔记
|
前端开发 JavaScript
前端学习笔记 webpack及命令文件结构
前端学习笔记 webpack及命令文件结构
104 0
前端学习笔记 webpack及命令文件结构
|
JavaScript 前端开发 编解码
|
12天前
|
JavaScript 前端开发
webpack成长指北第9章---webpack如何对icon字体进行打包
webpack成长指北第9章---webpack如何对icon字体进行打包
42 1
|
12天前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
45 0
|
12天前
|
前端开发 JavaScript
webpack成长指北第8章---webpack的CSS Modules打包
webpack成长指北第8章---webpack的CSS Modules打包
23 0
|
12天前
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
132 0