Webpack

2020-10-10  本文已影响0人  hanahaha

1.五个概念

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

module.exports = config;

2.webpack-dev-middleware

用于将webpack打包过的文件传给服务器,个人的理解是:
前端请求->后台收到请求->webpack将需要的资源打包->交付给服务器-服务器返回打包的文件给前端

3.Hot Module Replacement

模块热替换:webpack最有用的功能,在程序运行时,各种模块的更新不必引起页面的刷新,而只需要渲染相应的改动。
注意:这只是个在程序开发调试阶段使用的功能,在投入产品时不可用。

该功能主要用webpack的Runtime代码实现:runtime,以及伴随的 manifest 数据,主要是指在浏览器运行时,webpack 用来连接模块化的应用程序的所有代码。runtime 包含:在模块交互时,连接模块所需的加载和解析逻辑。包括浏览器中的已加载模块的连接,以及懒加载模块的执行逻辑。

通过以下步骤,可以做到在应用程序中置换(swap in and out)模块:

4.Tree Shaking

webpack打包的时候可以剔除不必要的代码
需要两个条件配合使用:

//math.js
export function cube(x){
  return x * x *x;
}
export function squar(x){
  return x * x ;
}

//入口文件main.js中
 import { cube } from './math.js';

在使用tree shaking功能之前,虽然只使用了cube函数,这个时候在打包的文件中既有cube也有squar;
使用tree shaking功能之后,打包的build.js中只有cube函数。

5.Code Splitting

将代码分成多个部分,有多个入口,然后就可以打包成多个打包文件。

6.Lazy Load

需要的时候再加载,和Code Splitting结合,有多个入口文件,在页面用户交互时才加载某个代码,这个时候再把那个入口文件的模块打包。

7. alias(别名配置)

为了在引用模块的时候更加方便,可以将某一个目录配置一个别名,代码中可以使用与别名的相对路径引用资源。
webpack.base.conf.js中配置:

...,
resolve: {
  ...,
  alias: {
    '@': resolve('src')
  }
}

所以可以使用import xxx from "@/..."来代替import xxx from"src/..."

8. 模块化

webpack和node一样,采用的是CommonJS机制引入模块,CommonJS引入的是模块的缓存,是一个静态的值,不会动态更新,因此每次webpack更改配置之后都要重新运行程序,否则不会动态更新。这点与ES6模块机制不同。

9. chunk与module

module就是一个未经过打包的文件,包括js、css、jpg等文件;
chunk是code splitting后的产物,是多个module根据依赖关系打包的按需加载的分块。

10.打包

命令:npm run build
与之相关的配置:
上一篇 下一篇

猜你喜欢

热点阅读