纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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 缩写
        • 运行npm run w时,相当于运行webpack --progress --colors --watch,表示运行监视模式,使用彩色字符,并显示出打包的百分比过程
        • 运行npm run p时,相当于运行webpack -p,表示压缩模块文件
        • 运行npm run dev时,相当于运行webpack-dev-server,表示运行本地服务器

相关文章

猜您喜欢

  • Python 安装Selenium Python 怎样安装Selenium(推荐)

    想了解Python 怎样安装Selenium(推荐)的相关内容吗,凌冰_在本文为您仔细讲解Python 安装Selenium的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Python,安装Selenium,下面大家一起来学习吧。..
  • Python操作MySQL Python基础之操作MySQL数据库

    想了解Python基础之操作MySQL数据库的相关内容吗,拿头来坚持在本文为您仔细讲解Python操作MySQL的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Python操作MySQL,python操作数据库,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.Soft111.com 【纯净下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式