webpack那点事

1. 原理

webpack是一个静态模块打包器，当webpack处理应用程序时，会递归的构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块按照依赖和规则打包成一个或多个符合生产环境部署的前端资源（bundle）。

2.主要构成

1. entry：指示webpack采用哪个模块作为依赖关系图的开始。进入入口起点后，webpack会找出哪些模块和库是入口起点直接或间接依赖的。
2. output：控制webpack如何向硬盘写入编译文件。
3. loader：将各类型文件转换为可以处理的模块，并将其加入到依赖关系图中。
4. plugins:（插件）：用于执行范围更广的任务，像打包优化、压缩、一直到环境变量重定义,使用插件时，需要require(plugin),然后将其添加到plugins数组中。
5. mode（模式）：有development和production两种模式，production模式下代码会被压缩为一行，development模式下不会压缩代码

3.基本语法

3.1. entry：

const config={
	entry：'./path/file.js'
}
//如果时多个入口文件，将其放到entry对象中
const config={
	entry:{
			file:'./path/file.js',
			app:'./src/app.js'
			}
}

3.2. output：

//多个entry的情况，as上面那样，最后会输出到硬盘./path/file.js和./src/app.js
output:{
			filename:'[name].js'
			path:__dirname+'/dist'
		}
//高级应用，应用了hash和cdn
output:{
		path:"/home/proj/cdn/assets/[hash]",
		publicPath:"http://cdn.example.com/assets/[hash]/"
		}
//在编译最终并不知道输出文件的路径，解决方法实在入口起点处设置__webpack_public_path__=Path

3.2. loader：

loader主要有两个属性：test和use，用于定义要处理的文件类型以及使用的loader；
特性：
loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
loader 可以是同步的，也可以是异步的。
loader 运行在 Node.js 中，并且能够执行任何可能的操作。
loader 接收查询参数。用于对 loader 传递配置。
loader 也能够使用 options 对象进行配置。
除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。
插件(plugin)可以为 loader 带来更多特性。
loader 能够产生额外的任意文件。

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

3.4. plugins：

plugins是插件的意思，是loader的一个扩充，是webpack的支柱，用于解决loader无法解决的事情。比如ExtractTextWebpackPlugin就可以从 bundle 中提取文本（CSS）到单独的文件。

用之前记得安装，安装方式可以看官方文档，当然其实也就是npm的事情；plugin是一个带有aply属性的javascript对象，apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。因为plugin是可以携带参数/配置的，因此传入new实例。

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

4 plugin扩展

1. 模块热替换

前端中优化很重要，这里介绍一下webpack中模块热替换HotModuleReplacementPlugin这个plugin，这个plugin只需require(‘webpack’)就可以了，它是webpack提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。主要是通过以下几种方式，来显著加快开发速度：

1. 保留在完全重新加载页面时丢失的应用程序状态。
2. 只更新变更内容，以节省宝贵的开发时间。
3. 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。

比如说css样式表动态更新：

借助于 style-loader 的帮助，CSS 的模块热替换实际上是相当简单的。当更新 CSS 依赖模块时，此 loader 在后台使用 module.hot.accept 来修补(patch) <style> 标签。

const webpack = require('webpack');
   module: {
     rules: [
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader']
       }
     ]
  },
    plugins: [
      new CleanWebpackPlugin(['dist'])
      new HtmlWebpackPlugin({
        title: 'Hot Module Replacement'
      }),
      new webpack.HotModuleReplacementPlugin()
    ],

2. 懒加载（按需加载）
   懒加载是在代码分离的基础上进行的，代码分离是将代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。最常用还是动态导入的方式require.ensure()
   webpack水很深还需要继续加强学习！！！每天进步一点点。