Plugin
webpack 插件是一个具备 apply 办法的 JavaScript 对象。apply 办法会被 webpack compiler 调用，并且在整个编译生命周期都能够拜访 compiler 对象。
const path = require("path");const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { entry: "./src/main.js", // 入口 output: { path: path.resolve(__dirname, "dist"), // path 为绝对路径，所以要借助 resolve 办法 filename: "main.js", }, plugins: [new HtmlWebpackPlugin({template: './index.html'})],};下面的示例用到了 html-webpack-plugin 插件，该插件会生产一个 html 模板并把所有打包后的 bundle 注入到该模板。
loader
webpack 只能了解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 可能去解决其余类型的文件，并将它们转换为无效 模块，以供应用程序应用，以及被增加到依赖图中。
const path = require("path");const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { entry: "./src/main.js", // 入口 output: { path: path.resolve(__dirname, "dist"), // path 为绝对路径，所以要借助 resolve 办法 filename: "main.js", }, plugins: [new HtmlWebpackPlugin({template: './index.html'})], module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }};下面这个例子就是对 style-loader 和 css-loader 的利用，这样程序就能胜利辨认到 css 模块。