亲宝软件园·资讯

展开

webpack 学习

365/24/60 人气:0
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,表示运行本地服务器

加载全部内容

相关教程
猜你喜欢
用户评论