2021-03-04

前端项目为什么要打包

在项目中html页面通过script标签引入js文件，需要发送http请求，几个js文件就发送几次，如在发送请求的过程中请网络原因导致发送延迟，随着项目的逐渐变大，问题会随之放大，如果把很多个js文件合并成一个文件，这样减少了http请求，加载时间也变快了。将多个文件合并在一起是项目完成是才可以执行的，在开发过程中如合并成一个文件是没有办法维护和更改。所以前端项目打包就是减少了页面的http请求，减少了页面加载时间，从而增加了页面的显示速度，让整个应用的体验更好。

Webpack的基本概念

Webpack是基于JavaScript应用程序的静态打包工具。
Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，见下图

入口起点（entry）

用法：

const config = {
  entry: './path/to/my/entry/file.js'
};

module.exports = config;

输出(output)

用法：

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

module.exports = config;

将bundle.js指定输出到/home/proj/public/assets目录中

模式(mode)

一共有两种模式：development，production

用法：

module.exports = {
  mode: 'production'
};

基本配置

webpack.config.js

var path = require('path');

module.exports = {
  mode: 'development',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

未完待续