是当下最热门的前端资源模块化管理和打包工具。

  • 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。
  • 还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。
  • 通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

Webpack是什么

Webpack是JavaScript应用程序的静态模块打包器

  • 逻辑多,文件多,项目的复杂度提高了.就是因为Webpack是打包神器
  • Wepack能支持翻译能力
  • 可插拔

作用域

全局变量是挂在的在全局对象上的

  • 在windows的全局对象是windows
  • 在Mac的全局对象是brower
1
2
3
var a = 1

window.a // 这里就能拿到

我们在页面上引入的script文件是全局的,因此文件里面的变量也是全局的,这样就有可能造成作用域被污染,变量发生冲突

1
2
3
<script src="/.moduleA.js"></script>
<script src="/.moduleB.js"></script>
<script src="/.moduleC.js"></script>

这时可以考虑使用闭包

1
2
3
4
5
6
7
8
9
10
11
12
// moduleA.js
// 此时name和sex已经被存缓好了,可以被return的function访问
// 这样name和age就被保护(隐藏)起来了,因为这样外部就访问不到他们了
var moduleA= (function(){
              var name = "susan"
              var sex = "nv"
              return {
                  tell: function(){
                      console.log("my name is ",name)
                  }
              }
})()

第二种写法:

1
2
3
4
5
6
7
8
(function(){
    var name = "susan"
    var sex ="nv"
    function tell(){
        console.log("my name is ",name)
    }
    window.susanModule = { tell  }
})(window)

模块导出机制的演变历史

AMD

asynchronous Module Definition:异步模块定义

1
2
3
4
5
6
7
8
// 第一参数:模块的名字
// 第二参数:模块的依赖
// 第三参数:模块的导出
define("getSum", ["math"], function(math){
    return function(a, b){
        console.log("sum:", math.sum(a,b))
    }
})

CommonJS

1
2
3
4
5
6
7
// 通过require函数来引入
const math = require("./math")

// 通过exports将其导出
exports.getSum = function(a, b){
    return a + b
}

ES6 Module

1
2
3
4
5
6
7
// import 导入
import math from "./math"

// export 导出
export function sum(a, b) {
    return a + b
}

模块

  • 作用域封装
  • 重用性
  • 接触耦合

Webpack的打包逻辑

  • 从入口文件开始,分析整个应用的依赖树
  • 将每个依赖模块包装起来,放到一个数组中 等待调用
  • 实现模块加载方法,并把它放到模块执行的环境中,确保模块间可以互相调用
  • 把执行入口文件的逻辑放在一个函数表达式中,并立即执行这个函数

npm与包管理器

1
2
// 初始化包
npm init
1
2
3
4
5
6
7
8
9
10
11
12
// package.json
{
    "name":"demo", // 包名称
    "version":"1.1.0",
    "description":"",
    "main":"index.js" // 执行入口
    "scripts": {
        "test":"each \"Error :no test spified\" && exit 1"
    }, // 自定义脚本
    "author":"",
    "license":"ISC"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 设置淘宝镜像仓库
npm config set registry https://npm.taobao.org

# 安装
# save的功能:自动将下载的包写入package.json的dependencies字段
npm install lodash -s
# or
npm install lodash --save

# 写入package.json的devDependencies字段
npm install lodash --save-dev

# 默认-s参数,所以会同时写入dependencies字段和devDependencies字段
# 如果想写入一个的话,使用only
npm insall --only=dev

## 删除所有的包,然后重装
rm -rf node_modules && npm install

版本语义化

  • 1.2.3:大版本为1,中版本为2,小版本为3

  • ^version:中版本中最新的版本

    • ^1.0.1:对于所有形为1.x.x版本中,1.0.1是最新的版本

  • ~version:小版本中最新的版本

    • ~1.0.1:对于所有形为1.0.x版本中,1.0.1是最新的版本

npm install的过程

  1. 寻找包版本信息文件(package.json),依照他进行安装
  2. 查package.json中的依赖,并检查项目中其他的版本信息文件
  3. 如果发现了新包,就更新版本信息文件

模块系统

  • 当今越来越多的网站已经从网页模式进化到了 Webapp 模式。
  • webapp通常是一个单页面应用，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的 JavaScript 代码，这给前端开发的流程和资源组织带来了巨大的挑战。
  • 在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统。
  • webpack默认的入口就是src/indesx.js，默认的出口文件就是dist/main.js
  • 如果想要修改的话，就需要修改webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
const path = require("path")

module.exports = {
  entry: "./app.js",   // entry 为打包的入口
  output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js"  // filename 为打包出口
  },
  devServer: {
    port: 3000, // 服务端口
    pubilcPath: "/dist"
  }
}

webpack-dev-server

监听工程目录的改动，动态的打包和更新

webpack中一切皆资源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// webpack.config.js

const path = require("path")
module.exports = {
  entry: "./src/app.js", 
  output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js"
  },
  module:{
      rules: [
          {
              test: /\.css$/,
              use: [
                "style-loader",
                "css-loader"
              ]
          }
      ]
  }
}
1
2
3
4
import "./style/mycss.css"

console.log("1232")
document.write("123123213asdasda")
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello Webpack</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="../dist/bundle.js"></script>
</body>
</html>

webpack构建react工程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
npm init -y

npm install react react-dom
npm install redux react-redux
npm install webpack webpack-cli -D

# 核心包和命令行包
npm install @babel/core @babel/cli
# bebel的转换规则(preset-env负责ES版本的转换,preset-react负责解析jsx)
npm install @babel/preset-env @babel/preset-react
# plugin-proposal-class-properties 负责解析static PropsType的静态写法
npm install @babel/plugin-proposal-class-properties
npm install babel-loader

npm install html-webpack-plugin -d

  1. 创建src目录，在目录里创建App.jsx

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // App.jsx
    import React from "react"
    import ReactDom from "react-dom"

    const App = () => {
        return <div>
            <h1>hello world</h1>
        </div>
    }

    export default App

    ReactDom.render(<App></App>,document.getElementById("root"))

  2. 创建index.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Hello Webpack</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
    </html>

  3. 创建index.jsx：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    import App from "./App"

    if(module.hot) {
        module.hot.accept(err => {
            if(err) {
                console.log("热替换出错")
            }
        })
    }

  4. 创建babel的配置

    • 方案一：在package.json里面填写

      1
      2
      3
      4
      5
      6
      7
      8
      9
      {
        "name": "reactdomo",
        "version": "1.0.0",
        "description": "",
        ...
        "babel": {
          "presets": ["@babel/presets-env"]
        }
      }

    • 方案二：创建.babelrc文件（优先级比较高）

      1
      2
      3
      {
      	"preset": ["@babel/presets-env"]
      }

  5. 编写webpack.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    const HtmlWebPackPlugin = require("html-webpack-plugin")
    const path = require("path")
    const webpack = require("webpack")

    module.exports = {
        resolve: {
            extensions: [".js", ".jsx", ".json"] // 带有此类后缀的文件，可以不写后缀
        },
        entry: path.resolve(__dirname, "src/index.jsx"),
        module: {
            rules: [
                {
                    test: /\.jsx?/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            babelrc: false, // 不使用.babelrc文件
                            presets: [
                                require.resolve("@babel/preset-react"),
                                [require.resolve("@babel/preset-env",{module:false})]
                            ]
                        }
                    }
                }
            ]
        },
        devServer: {
            hot: true
        },
        plugins: [
            new HtmlWebPackPlugin({
                template: path.resolve(__dirname, "src/index.html"),
                filename: "index.html"
            }),
            new webpack.HotModuleReplacementPlugin()
        ]
    }

  6. 执行webpack --mode devlepoment ， 执行webpack-dev-server --open

或者：直接填写package.json，然后npm install

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  "name": "todolist_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.10.3",
    "@babel/core": "^7.10.5",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.3.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.1",
    "redux": "^4.0.5"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "webpack": "^4.44.0",
    "webpack-cli": "^3.3.12"
  }
}