Webpack 笔记 04：配置详解

entry

const {
    resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
   
  /**
   * 1.string --> "./src/js/index.js"
   *    打包形成一个chunk，chunk的名称默认叫main，输出一个bundle文件
   * 2.array --> ["./src/js/index.js", "./src/js/add.js"]
   *    所有入口文件最终只会形成一个chunk，输出一个bundle文件
   *        只用在HMR功能中让html热更新生效
   * 3.object --> { index: "./src/js/index.js", add: "./src/js/add.js" }
   *    有几个入口文件就形成几个chunk，此时chunk的名称就是对象里的key，输出几个bundle
   *    特殊用法：{ index: ["./src/js/index.js", "./src/js/add.js"], add: "./src/js/add.js" }
   */
  entry: {
    index: "./src/js/index.js", add: "./src/js/add.js" },
};

output

const {
    resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
   
  output: {
   
    // 指定文件名称和目录
    filename: "js/[name].js",
    // 输出文件目录，将来所有文件输出的公共目录
    path: resolve(__dirname, "build"),
    // 生产环境：所有资源引入的公共路径前缀，比如html中引入script和css
    publicPath: "/",
    // 非入口chunk的命名
    chunkFilename: "[name]_chunk.js",
    // 整个库向外暴露的变量名
    library: "[name]", // var main = (function() {})()
    // 指定变量添加到哪里 global==node commonjs==exports["main"]
    libraryTarget: "window", // window["main"] = (function() {})() 适用于浏览器端
  },
};

module

const {