关于前端: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 模块。