webpack(2) 安装和使用

一. webpack的特点: 

12年, webpack就诞生了. 为了让开发者集中精力开发业务代码, 

• •         支持多种生态(前端和node都可以)
  •         打包的过程是node环境中运行的.
  •         基于模块化. 模块内部可以使用es6标准和commonjs标准, webpack都支持. 
  •         打包的结果是一个普通函数

webpack 1.将一切都视为模块, 2, 递归分析依赖关系, 3. 打包成为可以运行的文件.

二.webpack安装

      前提:  npm init 初始化,生成package.json.

      1.本地, 而不是全局 安装

      2. 命令:  npm i -D webpack webpack-cli;

                   -D ; 是因为运行时的代码是webpack打包完成后的代码,  不参与运行的都用-D

                  webpack是webpack的核心包, 含有打包时候调用的所有api

                  webpack-cli 是调用webpack核心包api的api, 是个cli命令工具, 如果知道webpack核心包的api, 可以自己写个js调用, 就不需要cli命令了.

三. 使用

       1. 创建webpack项目的目录结构

              - package.json (初始化时候形成的文件))

              - src (以后写代码的目录. 注意,src中的代码导入导出可以用commonjs规范, 也可以用es6, 因为这里的代码会被webpack识别)

                  -index.js

        2. 运行打包命令 只需要一个单词---webpack就能自动打包 : npx webpack

        3. 打包结果, 是一个普通的函数, nodejs和html文件都能运行

注意:  1. 导入时候, 自己写的文件和node_modules目录下文件的区别:

                 是自己写的用./或者../这种; 不是自己写的直接写包名

                  如: import  a from "./a"   a文件是自己写的 

                       import jquery from "jquery"    

          2. src中的代码, 导入导出可以用任意的commonjs或es6,规范, 甚至用commonjs导出, 用es6导入; 

             因为分析导入导出这活是webpack来干的, 就是专业分析依赖关系并处理这个的.这种导入导出的代码是一个依赖关系的说明而已, 

            

四. webpack是如何处理依赖关系的.

       1. 同标准模块化导入导出. 即用es6导入导出, 或者用commonjs导入导出.

    

 2 不同标准模块化

      es6 导出,  commonjs导入: 相当于es6的import * as XX from "./a";

 注意: es6中默认导出的情况, 一下情况只能用obj.default接受, obj.default = {a:1,b:2,c:3}

因为require的值是全部es6的导出, 即一个对象{default:{a:1,b:2,c:3}}

      commonjs 导出, es6 导入: 相当于 require;