Webpack

1.五个概念

• 入口（entry）：指示 webpack 使用哪个模块来作为构建其内部依赖，在 webpack中配置 entry 属性，来指定一个入口起点（或多个入口起点）。

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

• 出口（output）：指定应用程序需要的依赖都编译到哪个文件夹当中。

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

module.exports = config;

• loader：将非js文件转换成webpack能够处理的模块（JavaScript）
  注意：所有的文件都用正则来匹配扩展名，然后根据扩展名来决定使用哪个loader
  （1）CSS
  style-loader and css-loader
  （2）Image
  file-loader，支持png|svg|jpg|gif这四种格式
  （3）字体
  file-loader，支持woff|woff2|eot|ttf|otf格式
  （4）vue
  vue-loader，vue模块中可以有template、script、和style以及图片，分别用不同的loader处理

• 插件：可以实现loader的功能，但是比loader更高级，例如有实现压缩功能的plugin

• 模式：开发模式（development）和生产模式（production）

2.webpack-dev-middleware

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

3.Hot Module Replacement

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

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

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

• （1）应用程序代码要求 HMR runtime 检查更新。
• （2）HMR runtime（异步）下载更新，然后通知应用程序代码。
• （3）应用程序代码要求 HMR runtime 应用更新。
• （4）HMR runtime（异步）应用更新。

4.Tree Shaking

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

• 模块化使用ES6的import和export
• 使用js的minifier例如UglifyJSPlugin

//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

与之相关的配置：

• 打包后的文件存放的位置

  
  打包后的文件位置

• devtool：开发工具，由于webpack将代码打包，出现错误的时候很难定位出错的地方，采用该开发工具可以追踪错误出现的位置。

  
  devtool

• 生产环境BASE_API

  
  BASE_API

• 输出chunk的存储地址以及名称

  
  输出参数