webpack4 大纲概论（一）

文档：https://v4.webpack.js.org/concepts/

webpack4核心内容包括:

entry / output / loaders / plugins / mode / browser compatiblility

• entry : 指构建依赖关系图的起始文件，默认是 ./src/index.js,可以自定义 webpack.config.js

  module.exports = {
      entry: './path/to/my/entry/file.js'
  };

• output ： 输出文件目录，默认 /dist,主要输出文件 /dist/main.js,可以自定义 weback.config.js

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

• loaders : out of the box(开箱即用)，webpack 默认只识别 js 和 json 文件，loders 可以转换其他格式文件并加到依赖图，<import 导入时 webpack 独有> webpack.config.js

  - test 属性识别需要转换的文件
  - use 属性识别转换使用的 loader(加载器)
  
  module.exports = {
    module: {
      rules: [
        { test: /\.txt$/, use: 'raw-loader' }
      ]
    }
  };

• plugins : 执行比 loader 更广泛的任务，绑定优化，资产管理，注入环境变量，扩展 webpack 的能力，需要 require 导入并且创建实例

  const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
  const webpack = require('webpack'); //to access built-in plugins,（Is this really useful？）
  module.exports = {
    plugins: [
      new HtmlWebpackPlugin({template: './src/index.html'})
    ]
  };

• mode : 模式，可以启用对每个环境 webpack 的内置优化,默认是 production，还有 development,none 等

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

• browser compatiblility : 浏览器兼容,支持所有es5的，如果需要ie8以下等，需要加载 polyfill