webpack基本概念

简介

webpack是一个打包工具，它会从一个入口文件开始递归分析所有模块的依赖关系，根据依赖关系将模块打包成一个或多个文件

主要功能

1.依赖管理

2.代码合并压缩

3.语法转换

4.性能优化

入口

entry:webpack进行依赖关系构建和打包的入口文件 ，入口文件可以是一个或者多个

一般是src/main.js

// Webpack .config.js
module.exports = {
  entry: {
    pageOne: './src/pageOne/app.js',
    pageTwo: './src/pageTwo/app.js'
  }
};

出口

output:配置webpack打包出口文件的路径和名称

一般是dist/bundle.js

// Webpack .config.js
module.exports = {
  output: {
    filename: 'bundle.js',
    path: './dist'
  }
};

使用过程

1.在项目目录中安装webpack和webpack-cli

2.创建webpack.config.js文件进行基本配置(入口出口等)

3.在package.json文件中添加运行脚本dev

4.运行dev命名（npm run dev），项目即可打包完成，引入js文件，在页面显示

5.npm install 一些loader和plugin，并对webpack配置文件进行相应配置并使用

webpack的构建过程

1.从entry中配置的入口模块开始，解析其依赖的所有模块

2.每找到一个模块，都会使用相应的loader进行相应的转化

3.再依次解析当前模块依赖的模块

4.通过依赖关系将一个entry中所有的模块转化成一个chunk

5.将所有的chunk进行合并，成为一个bundle

moudle:单个模块

chunk:由一个入口文件根据依赖关系形成的文件

bundle:输出文件

package.json文件结构

{
    "name": "mfw-ui",
    "version": "1.0.0",
    "description": "My Framework ui",
    "author": "hongming.zhao <1183483051@qq.com>",
    "private": true,
    "scripts": {
        "dev": "node build/dev-server.js",
        "test": "node build/test.js",
        "build": "node build/build.js"
    },
    "dependencies": {
        "@antv/g2": "^3.5.8-beta.1",
        "ajv": "^6.2.1",
        "ajv-keywords": "^3.1.0",
        "async-validator": "^1.8.2",
        "autoprefixer": "^8.1.0",
    },
    "devDependencies": {
        "http-proxy-middleware": "^0.18.0",
        "webpack-bundle-analyzer": "^2.11.1",
    },
    "engines": {
        "node": ">= 6.0.0",
        "npm": ">= 5.0.0"
    }
}

name - 包名.
version - 包的版本号。
homepage - 包的官网URL。

description - 包的描述。

author - 包的作者

keywords-关键字
dependencies / devDependencies - 生产/开发环境依赖包列表。

script-命令对应的执行脚本
 

"dev": "node build/dev-server.js",

"build": "node build/build.js",