webpack entry

webpack.config.js

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

/**
 *  entry: 入口起點
 *    1. string --> './src/index.js'
 *       entry: './src/index.js',
 *      打包形成一個 chunk， 輸出一個 bundle 檔案
 *      filename: '[name] --> 此時chunk的名稱預設是 main
 *    2. array
 *      entry: ['./src/index.js', './src/add.js'],
 *      多入口
 *      所有入口檔案最終隻會形成一個chunk，輸出出去隻有一個bundle檔案。
 *        --> 隻有在 HRM 功能中讓html熱更新生效。
 *    3. object
 *      多入口
 *      有幾個入口檔案就形成幾個chunk，輸出幾個bundle檔案，此時 chunk的名稱是 key
 *      entry: {
 *         index: './src/index.js',
 *         add: './src/add.js'
 *       }
 *
 *      --> 特殊用法
 *      entry: {
 *          // 所有入口檔案最終隻會形成一個chunk，輸出出去隻有一個bundle檔案。
 *         index: ['./src/index.js', './src/count.js'],
 *         // 形成一個 chunk， 輸出一個 bundle 檔案
 *         add: './src/add.js'
 *      }
 *
 * */

module.exports = {
  entry: {
    index: ['./src/index.js', './src/count.js'],
    add: './src/add.js'
  },
  output: {
    // [name] 預設是 main， 可以寫固定值
    filename: '[name].js',
    path: resolve(__dirname, 'build')
  },
  // 插件
  plugins: [
    new HtmlWebpackPlugin()
  ],
  // 模式 development 開發， production 生産
  mode: 'development'
};

           

index.js

// import add from './add';
// import count from './count';

console.log('index.js檔案加載了...');

// console.log(add(1, 2));
// console.log(count(3, 2));

           

add.js

function add(x, y) {
  return x + y;
}

export default add;

           

count.js

function count(x, y) {
  return x - y;
}

export default count;