webpack 学习

365/24/60 2021-05-06 我要评论

npm安装方式

entry入口
output出口
loader
- webpack自身只能理解JavaScript
- loader可以将所有类型的文件转换为webpack能够处理的有效模块
- 转换后进而可以构建依赖图
plugin
- 执行更广的任务
- 打包、优化、压缩...重新定义环境中的变量
- require->添加到plugin数组->options/new(不同目的多次使用同一个插件)
模式：model
- 添加 mode: 'development'/'production'
拓展部分
- webpack提供命令行接口（cli）
- webpack各种命令
  - --help
    - 列出命令行所有配置命令
    - webpack --help / webpack -h
  - --config
    - 为webpack指定一个其它的配置文件（默认为 webpack.config.js ）
    - webpack --config anotherConfigFile.js
  - --progress
    - 在命令行控制台打印显示当前的打包进度
    - webpack --progress
  - --watch
    - 实时监测依赖表里面的文件的变化，会迅速更新打包后的文件，否则通过缓存获取
    - webpack --watch / webpack -w
  - --colors
    - 开启/关闭控制台的颜色
    - webpack --colors(webpack5.3 好像报错了) / webpack --color
  - --profile
    - 记录过程中编译的性能
    - webpack --profile
- webpack-dev-server
  - 安装：npm i webpack-dev-server -g
  - 运行： webpack-dev-server(相当于 webpack )
  - 它将在 localhost:8080 启动一个 express 静态资源 web 服务器
  - 以监听模式自动运行 webpack
  - 在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/
  - 可以浏览项目中的页面和编译后的资源输出
  - 通过一个 socket.io 服务实时监听它们的变化并自动刷新页面
- 通过package.json将常用命令制成脚本
  - package.json中的script字段指定运行脚本命令的npm 缩写
  - "scripts": { "w": "webpack --progress --colors --watch", "p": "webpack -p", "dev":"webpack-dev-server" }
    - 运行npm run w时，相当于运行webpack --progress --colors --watch，表示运行监视模式，使用彩色字符，并显示出打包的百分比过程
    - 运行npm run p时，相当于运行webpack -p，表示压缩模块文件
    - 运行npm run dev时，相当于运行webpack-dev-server，表示运行本地服务器

webpack 学习

相关文章

猜您喜欢

今日热门