zoukankan      html  css  js  c++  java
  • 4.3 webpack打包学习

    webpack需要学习3个。

    1 生产环境配置。

    2 开发环境配置。

    3 webpack优化。

    webpack(静态模块打包器!)5个核心的概念:

      依赖关系图!

      1 Entry:起点。(找到起点文件,从而分析依赖关系图)

      2 Output:打包后的bundles输出到哪里,如何命名!

      3 Loader: loader让webpack处理非js文件。(webpack本身只能理解js,loader将css,image翻译,翻译官)

      4 plugins(执行任务可以用于,优化啊,压缩啊,)

      5 Mode:(模式,develoment开发模式,production代码运行上线模式)

    less,image,给loader。

    npm  init

     npm i webpack webpack-cli -g

    npm i webpack webpack-cli -D

    webpack ./src/index.js -o ./build/built.js --mode=develoment

    built :built.js。 中是打包好的文件。node .uilduitl.js。、

    webpack 

    开发环境: --mode=development 整体打包环境,是开发环境。

    生产环境: --mode=production 整体打包环境 就是生产环境。

    2 结论:

      1 webpack能处理js、json资源,。不能处理css、img资源。

       2 生产环境和开发环境将es6模块化编译成浏览器可以识别的模块化

      3 生产环境比开发环境多一个压缩js代码。

  • 相关阅读:
    IOS-Storyboard全解析-第一部分
    IOS-Socket
    IOS-XMPP
    IOS-源代码管理工具(Git)
    IOS-源代码管理工具(SVN)
    python环境配置
    【移动开发】Android中WIFI开发总结(二)
    【移动开发】Android中WIFI开发总结(一)
    Android 连接Wifi和创建Wifi热点 demo
    Android 判断用户2G/3G/4G移动数据网络
  • 原文地址:https://www.cnblogs.com/hacker-caomei/p/14322750.html
Copyright © 2011-2022 走看看