webpack 的 loader 和 plugin

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 模块。