EP16-zake学webpackwebpack是模块捆绑器，通过分析模块间的依赖，把文件解析为AST,通过一些列loa

本文内容来源于网络，个人归纳整理，只为理解记忆方便

参考文档：

深入浅出 Webpack （感谢吴浩鳞开源这么好的一本书）

1，相关的概念

1，webpack为什么慢？

webpack是模块捆绑器，通过分析模块间的依赖，把文件解析为AST,通过一些列loader的加工，最后打包到一个JS文件中。
webpack4缓慢的原因在于不同loader的编译过程耗费大量的时间。

2,webpack常用功能

[万字总结] 一文吃透 Webpack 核心原理

模块打包
代码分割
按需加载
HMR
tree-shaking
文件监听
sourcemap
Module Federation
devServer
DLL
多进程

1，webpack5的内容

498 份JS文件
18862 行注释
73548 行代码
54 个 module 类型
69 个 dependency 类型
162 个内置插件
237 个hook

2，webpack的使用

1，基础

1，最基础的webpack配置

webpack文件配置：

var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname, 'build');
var nodeModulesPath = path.resolve(__dirname, 'node_modules');
var TransferWebpackPlugin = require('transfer-webpack-plugin');
 
var config = {
  entry: [path.join(__dirname, 'src/main.js')],
  resolve: {
    extensions: ["", ".js", ".jsx"]
    //node_modules: ["web_modules", "node_modules"]  (Default Settings)
  },
  output: {
    path: buildPath,    
    filename: 'app.js'  
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new webpack.NoErrorsPlugin(),
    new TransferWebpackPlugin([
      {from: 'www'}
    ], path.resolve(__dirname,"src"))
  ],
  module: {
    preLoaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'eslint-loader',
        include: [path.resolve(__dirname, "src/app")],
        exclude: [nodeModulesPath]
      },
    ],
    loaders: [
      {
        test: /\.js$/, //注意是正则表达式，不要加引号
        loader: 'babel-loader?optional=runtime&stage=0',//babel模块相关的功能请自查，这里不做介绍
        exclude: [nodeModulesPath]
      }
    ]
  },
  //Eslint config
  eslint: {
    configFile: '.eslintrc' //Rules for eslint
  },
};
 
module.exports = config;

目录结构：

webpack
    |---index.html
    |---webpack-config.js
    |---src
         |---main.js
         |---js
              |---a.js

2，webpack.config.js配置文件的顶层属性

1,entry

配置要打包的文件入口，可以配置多个入口。

2，resolve（解析）

类型：object
webpack在启动后会从配置的入口模块触发找出所有依赖的模块，resolve配置模块如何解析(如何寻找模块所对应的文件)。

alias

类型：object

3，output

output配置如何输出最终想要的代码。

4，module

module配置如何处理模块。

5，plugins（插件）

类型：array

plugin用于拓展webpack功能，webpack有很多内置插件，也有很多第三方插件。

1，使用插件的方法

要使用某个插件，需要通过npm安装，然后在webpack.comfig.js中的plugins关键字部分添加该插件的一个实例（plugins是一个数组，new一个插件即可）。

2，常用插件

HtmlWebpackPlugin
Hot Module Replacement

EP16-zake学webpack