zoukankan      html  css  js  c++  java
  • webpack入门篇--1.简单介绍

    简单介绍:

    webpack是一个模块打包工具,给js准备的打包工具,可以把很多的模块打包成很少的文件


    目标:

      1.切分依赖数,分到不同代码块里,按需加载,懒加 载
      2.任何静态资源都可以被视为一个模块,在项目中被引用
      3.整合第三方类库,把类库也视为它的模块,在项目中被引用
      4.初始化加载时间更少
      5.在整个打包过程中可以自定义
      6.适合做大型项目
    特性:

    代码分割,只加载所需文件,模块通过loaders插件系统处理各种文件,模块热更新

      处理过程:

    把有各种依赖的文件通过webpack打包处理成css,js,图片文件

    (文件夹dist:存放最终发布版本的代码
    dev:开发者版本,开发包)

    npm init:生成package.json,避免要手工生成

    --save-dev:npm install 在安装 npm 包时,有两种命令参数可以把它们的信息写入 package.json 文件,一个是npm install --save另一个是 npm install --save-dev
               --save-dev 是你开发时候依赖的东西,--save 是你发布之后还依赖的东西。
          如果不使用–save/–save-dev安装模块的话需要手动更新package.json里的dependencies和devDepandencies,而使用–save/–save-dev就可以自动更新package.json了

    webpack安装好后,在文件夹里新建一个js文件hello.js
    命令行中在当前文件夹下输入webpack hello.js hello.bundle.js(每次写完依赖,命令行执行此句即可)

    输出的内容:
    Asset:打包生成的文件名称;Size:打包生成的文件的大小;Chunks:这次打包的分块;Chunk Name:这次打包的块名称

    在js里依赖加载文件word.js在文件头部写上:require('./word.js')
    依赖css文件:require('style-loader!css-loader!./style.css')需要安装loader (npm install css-loader style-loader --save-dev)

    --module-bind:模块绑定 --module-bind 'css=style-loader!css-loader'
    --watch:这个可以自动更新更改过的代码,无需每次更改代码后都在命令行里敲上文件
    --progress打包过程,有百分比进度显示
    --display-module:引用的所有模块都列出来,包括引用的方式
    --display-reasons:模块打包原因列出来

    自己设置参数可以在wenpack.json文件里scripts属性里添加一段脚本,这个脚本可以是一段命令,如:
    "webpack":"webpack --config webpack.config.js(定义config文件) --progress(看到打包过程) --display-modules(打包的模块) --colors(命令行里打包出来字的颜色是彩色的)"
    然后命令行里输入npm run webpack

  • 相关阅读:
    ThinkPHP 3.2.2 实现持久登录 ( 记住我 )
    Java实现 LeetCode 20 有效的括号
    Java实现 LeetCode 20 有效的括号
    Java实现 LeetCode 19删除链表的倒数第N个节点
    Java实现 LeetCode 19删除链表的倒数第N个节点
    Java实现 LeetCode 19删除链表的倒数第N个节点
    Java实现 LeetCode 18 四数之和
    Java实现 LeetCode 18 四数之和
    Java实现 LeetCode 18 四数之和
    Java实现 LeetCode 17 电话号码的字母组合
  • 原文地址:https://www.cnblogs.com/chooper/p/7372635.html
Copyright © 2011-2022 走看看