/*
  webpack.config.js  webpack的配置檔案
    作用: 指示 webpack 幹哪些活（當你執行 webpack 指令時，會載入裡面的配置）

    所有構建工具都是基於nodejs平臺執行的~模組化預設採用commonjs。
*/

// resolve用來拼接絕對路徑的方法
const { resolve } = require('path');

module.exports = {
  // webpack配置
  // 入口起點
  entry: './src/index.js',
  // 輸出
  output: {
    // 輸出檔名
    filename: '
 
built.js',
    // 輸出路徑
    // __dirname nodejs的變數，代表當前檔案的目錄絕對路徑
    path: resolve(__dirname, 'build')
  },
  // loader的配置
  module: {
    rules: [
      // 詳細loader配置
      // 不同檔案必須配置不同loader處理
      {
        // 匹配哪些檔案
        test: /\.css$/,
        // 使用哪些loader進行處理
        use: [
          // use陣列中loader執行順序：從右到左，從下到上 依次執行
          
 
// 建立style標籤，將js中的樣式資源插入進行，新增到head中生效
          'style-loader',
          // 將css檔案變成commonjs模組載入js中，裡面內容是樣式字串
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 將less檔案編譯成css檔案
          // 需要下載 less-loader和less
 

          'less-loader'
        ]
      }
    ]
  },
  // plugins的配置
  plugins: [
    // 詳細plugins的配置
  ],
  // 模式
  mode: 'development', // 開發模式
  // mode: 'production'
}