webpack知识点整理

官网中，将webpack定义为： 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)

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

• 入口Entry
  入口指示一个入口起点（或多个入口起点）。默认值为 ./src。是构建依赖图的开始模块。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

webpack.config.js中：

module.exports = {
    entry:'../src/pages/index/index.js',
}

还有一种写法是会用到vendor，vendor的意思是依赖的第三方库，不会经常变更的，如你代码里的jQuery这种；
而CommonsChunkPlugin是指被你重复引用的chunks。可能是vendor，也可能是你自己的某个公共组件；

一般情况下，使用此属性的目的是为了方便开发调试，或者是部署到服务器时提高应用的访问速度。在webpack的打包此文件过程中通常会根据文件的内容计算出一个hash值，并将该值加到文件名中，并配置一个长达一年的缓存控制。之所以这么做，是因为vendor.js中的内容基本上很少更新，当我们根据业务需求修改相关逻辑代码并重新生成入口文件时（比如app.js），vendor.js仍然在浏览器的缓存中，这时用户只需要重新下载新的入口文件即可。
这段话是我引用了entry对象vendor属性的问题
里面指出，可以用HashedModuleldsPlugin解决，vendor.js默认使用数字作为模块的id导致的"业务代码修改并重新进行项目构建生成入口文件（比如：app.js）时，vendor.js的hash值也随之改变，进而导致上面提到的缓存策略也就失去了意义。"这一问题。

-出口 output
告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。

webpack.config.js中：

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

其中，
output.filename：告诉webpack bundle 的名称；
output.path：告诉 webpack 将 bundle 生成(emit)到哪里。

• Loader
  由于webpack自身只理解 JavaScript，loader 将所有类型的文件，转换为 webpack 能够处理的有效模块，即依赖关系图（和最终的 bundle）可以直接引用的模块。

webpack.config.js中：

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

其中：
rules.test ：标识出需要被转换的某个或某些文件。
rules.use ：标识出进行转换时，应该使用哪个loader。
本例中，表示当碰到「在 require()/import 语句中被解析为 ‘.txt’ 的路径」时，在对它打包之前，先使用 raw-loader 转换一下

• 插件(plugins)
  插件的引入：require进文件—>添加到 plugins 数组

webpack.config.js中：

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

• 模式
  设置 mode 参数（ development 或 production），启用相应模式下的 webpack 内置的优化。

webpack.config.js中：

module.exports = {
  mode: 'production'
};

通过DefinePlugin设置 process.env.NODE_ENV=development/production
最明显区别是：production环境引入了 UglifyJsPlugin插件（负责代码压缩）。而development没有
插件，而development没有。
开发环境和生产环境的区分
webpack4学习笔记
production环境通常需要进行代码分割，而development环境则没有这样的需求。
development开发环境的需求:
模块热更新 HMR:HotModuleReplacementPlugin
sourceMap
接口代理
代码规范检查

production生产环境的需求:
提取公共代码
压缩混淆
文件压缩/base64编码
去除无用的代码

二者共同点:
同样的入口
同样的代码处理(loader处理)
同样的解析配置