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），项目即可打包完成，