webpack初识

https://www.webpackjs.com/concepts/hot-module-replacement/

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念：

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)

1. 安装webpack

安装node，webpack依赖于node环境；
npm install webpack -g 全局安装webpack，webpack 4.0之后，还需要安装webpack-cli配合一起使用。
也就是： npm install webpack webpack-cli -g

1. webpack打包

   新建一个项目文件夹 -》 通过npm命令初始化package.json文件 -》创建编写一个webpack配置文件 -》命令行 运行打包。
   初始化： npm init -y
   编写业务代码，并添加编辑webpack配置文件webpack.config.js 。

运行： webpack

1. webpack 支持的模块化规范

   commonJS： webpack.config.js是运行在node环境下的，所以支持commonJS规范。
   业务代码的书写可以遵循AMD，ES6 Module规范。

2. webpack核心概念

entry：

1. entry为一个字符串，指定了入口文件；
module.exorts = {
  entry: './app.js'
};
2. entry为一个数组，指定了两个入口文件，但是最终仍会被打包成一个文件；
module.exorts = {
  entry: ['./app.js', './app2.js']
};
3.entry为一个对象，可以指定任意的key，值为入口文件；这样打包出来会是两个文件；
module.exorts = {
  entry: {
    app: './app.js',
    app2: './app2.js'
  }
};

output:
output为一个对象，属性filename的值指定了输出文件的路径和名字，如下所示；

1. 固定文件名；
module.exorts = {
  output: {
    filename: 'app.bundle.js'
  }
};
2. 下面的打包会在dist文件夹下创建一个js的文件夹，打包文件名为app.bundle.js
module.exorts = {
  output: {
    filename: './js/app.bundle.js'
  }
};
3. 下面的打包会在dist文件夹下创建一个js的文件夹，打包文件名为app.bundle.js
name的值为entry的属性名，hash为文件的hash码；
module.exorts = {
  output: {
    filename: './js/[name].[hash].js'
  }
};
也可以对hash码进行截取，例如：截取四位；但是这种只能指定相对于dist文件夹的文件路径，并不能改变dist文件夹；
module.exorts = {
  output: {
    filename: './js/[name].[hash4].js'
  }
};
如果想不生成在dist文件夹下，比如想生成在根目录的src文件夹下的bundle文件夹下，如下：
指定path，path只能接受绝对路径地址，__dirname 为项目根目录的绝对路径。
module.exorts = {
  output: {
    path: __dirname + '/src/my-bundle',
    filename: './js/[name].[hash:4].js'
  }
};

1. loader

   loader是webpack的编译方法，由于webpack本身只能处理js，所以对于别的资源就需要loader。webpack值负 责打包，相关的编译等操作，需要打包。loader本质是一个方法，使用时大多需要额外安装第三方库来实现。
   
   常用loader列举：
   （1） css-loader，style-loader, 等css处理loader；
   （2）url-loader, image-loader 等图片字体文件等资源处理loader；
   （3）less-loader, sass-loader, babel-loader等编译loader；
   （4）除此之外还有很多语法糖loader，例如vue-loader;

module: {
  rules: [
    {
      test: /\.js$/,
      use: 'babel-loader'
    }
  ]
}

1. plugin

   plugin是webpack的额外扩展：
   一些插件式的额外功能由plugin定义，帮助webpack优化代码，提供功能；plugin有webpack自带的，也有需要 额外安装的。

plugins: [
   new webpack.HotModuleReplacementPlugin()
]

例如：
commonsChunkPlugin: 提取公共模块等；
uglifyjsWebpackPlugin: 优化js文件体积等；
PurifyCSS: 优化css文件体积等；
HtmlWebpackPlugin: 打包html文件，并且将js引入html文件中等；
HotModuleReplacementPlugin：热更新插件；