// webpack.config.js
module.exports = {
  entry: './src/app.js'
};
// or
/*
// 是以下这种方式的简写 定义一个别名main
module.exports = {
  entry: {
    main: ./src/app.js'
  }
}
*/

// webpack.config.js
module.exports = {
  entry: ['./src/app.js', './src/b.js'],
  vendor: './src/vendor.js'
};

const path = require('path');
// webpack.config.js
module.exports = {
  entry: {
    app: './src/app.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js'
  }
};
/*
module.exports = {
   entry: './src/app.js',
   output: {
     filename: '[name].bundle.js'
   }
}
*/
// 默认输出 /dist/app.bundle.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: 'less-loader'
      },
      {
        test: /\.ts$/,
        use: 'ts-loader'
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }
};

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })]
};

npm init -y // 生成一个默认的package.json

const path = require('path');
module.exports = {
  entry: {
    app: './src/app.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs'
  },
  mode: 'production'
};

console.log('hello, webpack');

// app.bundle.js
(() => {
  var e = {};
  console.log(3), console.log('hello, webpack');
  var o = exports;
  for (var l in e) o[l] = e[l];
  e.__esModule && Object.defineProperty(o, '__esModule', { value: !0 });
})();

// 这是在mode: development下生成一个bundle.js

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/******/ 	var __webpack_modules__ = ({

/***/ "./src/app.js":
/*!********************!*\
  !*** ./src/app.js ***!
  \********************/
/***/ (() => {

eval("\nfunction twoSum(a, b) {\n  return a+b\n}\nconst result = twoSum(1,2);\nconsole.log(result);\nconsole.log('hello, webpack');\n\n//# sourceURL=webpack://webpack-01/./src/app.js?");

/***/ })

/******/ 	});
/************************************************************************/
/******/
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	// This entry module can't be inlined because the eval devtool is used.
/******/ 	var __webpack_exports__ = {};
/******/ 	__webpack_modules__["./src/app.js"]( ""./src/app.js"");
/******/
/******/ })()
;

(() => {
  var webpackModules = {
    './src/app.js': () => evel('app.js内部的代码')
  };
  weboackModules['./src/app.js']("'./src/app.js'");
})();

// webpack.config.js
const path = require('path');
module.exports = function (env, argv) {
  console.log(env, argv);
  return {
    entry: {
      app: './src/app.js'
    },
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
      library: 'MyTest',
      libraryTarget: argv.libraryTarget
    },
    mode: argv.mode
  };
};

// webpack.config.js
{
    watch: true,
    entry: {
      app: './src/app.js'
    },
}

const path = require('path');
// 引入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = function (env, argv) {
  console.log(env);
  console.log(argv);
  return {
    entry: {
      app: './src/app.js'
    },
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
      library: 'MyTest',
      libraryTarget: argv.libraryTarget
    },
    mode: argv.mode,
    plugins: [
      new HtmlWebpackPlugin({
        template: './public/index.html'
      })
    ]
  };
};

// weboack.config.js
{
 mode: argv.mode,
 devServer: {
      hot: true
    },
}

// utils/index
var str = '123';
function deepMerge(target) {
  console.log(target, '=22==');
  if (Array.isArray(target)) {
    return target;
  }
  const result = {};
  for (var key in target) {
    if (Reflect.has(target, key)) {
      if (Object.prototype.toString.call(target[key]) === '[object Object]') {
        result[key] = deepMerge(target[key]);
      } else {
        result[key] = target[key];
      }
    }
  }
  return result;
}
console.log('深拷贝一个对象555', str);
export default deepMerge;
// module.exports = {
//   deepMerge
// };

import deepMerge from './utils/index';
// const { deepMerge } = require('./utils/index.js');
function twoSum(a, b) {
  return a + b;
}
const userInfo = {
  name: 'Maic',
  age: 18,
  test: {
    book: 'webpack'
  }
};

const result = twoSum(1, 2);
console.log(result, deepMerge(userInfo));
if (module.hot) {
  // 这个文件
  module.hot.accept('./utils/index.js', () => {});
}
const str = 'hello, webpack322266666';
console.log(str);

const app = document.getElementById('app');

app.innerHTML = str;

if (module.hot) {
  // 这个文件
  module.hot.accept('./utils/index.js', () => {});
}

const webpackDevServer = require('webpack-dev-server');

const webpack = require('webpack');

const config = require('../webpack.config.js');
const options = { hot: true, contentBase: '../dist', host: 'localhost' };
// 只能用V2版本https://github.com/webpack/webpack-dev-server/blob/v2
webpackDevServer.addDevServerEntrypoints(config, options);

const compiler = webpack(config);

const server = new webpackDevServer(compiler, options);
const PORT = '9000';
server.listen(PORT, 'localhost', () => {
  console.log('server is start' + PORT);
});

// config/server.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();

const config = require('../webpack_test_dev_config');
const compiler = webpack(config);
// 设置静态资源目录
app.use(express.static('dist'));
app.use(webpackDevMiddleware(compiler, {}));
const PORT = 8000;
app.listen(PORT, () => {
  console.log('server is start' + PORT);
});

npm i style-loader css-loader --save-dev

   module: {
     rules: [
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader']
       }
     ]
   },

// webpack.config.js
const miniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = function (env, argv) {
  return {
    module: {
      rules: [
        {
          test: /\.css$/,
          // use: ['style-loader', 'css-loader']
          use: [miniCssExtractPlugin.loader, 'css-loader']
        }
      ]
    },
    plugins: [
      new miniCssExtractPlugin({
        filename: 'css/[name].css'
      })
    ]
  };
};

// webpack.config.js
{
   ...
    module: {
     rules: [
       {
         test: /\.css$/,
         use: [miniCssExtractPlugin.loader, 'css-loader']
       },
       {
         test: /\.(png|svg|jpg|gif|jpeg)$/,
         use: [
         {
             loader: 'file-loader',
             options: {
               outputPath: 'assets',
               name: '[name].[ext]'
             }
           }
         ]
       }
     ]
   }
 }

import deepMerge from './utils/index';
import '../assets/css/app.css';
import image1 from '../assets/images/1.png';
import image2 from '../assets/images/2.jpg';
// const { deepMerge } = require('./utils/index.js');
function twoSum(a, b) {
  return a + b;
}
const userInfo = {
  name: 'Maic',
  age: 18,
  test: {
    book: '公众号:Web技术学苑'
  }
};

const result = twoSum(1, 2);
console.log(result, deepMerge(userInfo));
if (module.hot) {
  // 这个文件
  module.hot.accept('./utils/index.js', () => {});
}
const str = `<div>
      <h5>hello, webpack</h5>
      <div>
          <img src=${image1} />
      </div>
      <div>
        <img src=${image2} />
      </div>
    </div>`;
console.log(str);

const app = document.getElementById('app');

app.innerHTML = str;

type Fn = Function;
const getAge: Fn = () => {}; // const getAge: Function

// Search.vue
export default {
  name: 'search',
  data() {
    return {
      value: '',
      odd: 0
    };
  },
  methods: {
    handleAdd() {
      const { value: title } = this;
      if (title === '') {
        return;
      }
      this.odd = !this.odd;
      this.$emit('handleAdd', {
        title,
        subTitle: `${title} is ${this.odd ? 'crazy' : 'beautify'}`
      });
    }
  }
};

...
this.$emit('handleAdd', {
        title,
        subTitle: `${title} is ${this.odd ? 'crazy' : 'beautify'}`
})

...
const {value: title, dataList } = this;
const item = {
        title,
        subTitle: `${title} is ${this.odd ? 'crazy' : 'beautify'}`
}
this.$emit('update:dataList', dataList.concat(item))

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const state = {
  dataList: [
    {
      title: 'vuejs',
      subTitle: 'vuejs is crazy'
    },
    {
      title: 'reactjs',
      subTitle: 'reactjs is beautify'
    }
  ]
};
const mutations = {
  handAdd(state, payload) {
    state.dataList = state.dataList.concat(payload);
  }
};
export const store = new Vuex.Store({
  state,
  mutations
});

// main.js
...
import {store} from '@/store/index';
...
/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})

// store/index.js
import Vue from 'vue';
const state = {
  dataList: [
    {
      title: 'vuejs',
      subTitle: 'vuejs is crazy'
    },
    {
      title: 'reactjs',
      subTitle: 'reactjs is beautify'
    }
  ],
  commit: {
    handAdd: (payload) => {
      state.dataList = state.dataList.concat(payload);
    },
    handleDelete(index) {
      state.dataList.splice(index, 1);
    }
  }
};
const mutations = {
  commit(actionName, payload) {
    if (Reflect.has(state.commit, actionName)) {
      state.commit[actionName](payload);
    }
  },
  dispatch(actionName, payload) {
    mutations.commit(actionName, payload);
  }
};
const store = {
  state,
  ...mutations
};
export default Vue.observable(store);

// utils/eventBus.js

export default class EventBus {
  constructor() {
    this.events = {};
  }
  on(name, fn) {
    if (!this.events[name]) {
      this.events[name] = [];
    }
    this.events[name].push(fn);
  }
  emit(name, ...payload) {
    this.events[name].forEach((v) => {
      Reflect.apply(v, this, payload); // 执行回调函数
    });
  }
}

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import eventBus from '@/utils/eventBus';
import { store } from '@/store/index';
import App from './App';
import router from './router';
Vue.config.productionTip = false;
Vue.use(Antd);

/* eslint-disable no-new */
Vue.prototype.$my_event = new eventBus();
new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
});

// index.js
const { createApp, reactive, toRefs, computed, onMounted, ref } = Vue;
const vm = createApp({
  setup() {
    const listWrap = ref(null);
    const viewData = reactive({
      list: [],
      total: 1000, // 数据总条数
      height: 600, // 可视区域的高度
      rowHeight: 60, // 每条item的高度
      startIndex: 0, // 初始位置
      endIndex: 0, // 结束位置
      timer: false,
      bufferSize: 5 // 做一个缓冲
    });
    const contentStyle = computed(() => {
      return {
        height: `${viewData.total * viewData.rowHeight}px`,
        position: 'relative'
      };
    });
    // todo 设置数据
    const renderData = () => {
      viewData.list = [];
      const { rowHeight, height, startIndex, total, bufferSize } = viewData;
      // 当前可视区域的row条数
      const limit = Math.ceil(height / rowHeight);
      console.log(limit, '=limit');
      // 可视区域的最后一个位置
      viewData.endIndex = Math.min(startIndex + limit + bufferSize, total - 1);
      for (let i = startIndex; i < viewData.endIndex; i++) {
        viewData.list.push({
          content: i,
          style: {
            top: `${i * rowHeight}px`
          }
        });
      }
    };
    // todo 监听滚动，设置statIndex与endIndex
    const handleScroll = (callback) => {
      // console.log(listWrap.value)
      listWrap.value &&
        listWrap.value.addEventListener('scroll', (e) => {
          if (this.timer) {
            return;
          }
          const { rowHeight, startIndex, bufferSize } = viewData;
          const { scrollTop } = e.target;
          // 计算当前滚动的位置，获取当前开始的起始位置
          const currentIndex = Math.floor(scrollTop / rowHeight);
          viewData.timer = true;
          // console.log(startIndex, currentIndex);
          // 做一个简单的节流处理
          setTimeout(() => {
            viewData.timer = false;
            // 如果滑动的位置不是当前位置
            if (currentIndex !== startIndex) {
              viewData.startIndex = Math.max(currentIndex - bufferSize, 0);
              callback();
            }
          }, 500);
        });
    };
    onMounted(() => {
      renderData();
      handleScroll(renderData);
    });
    return {
      ...toRefs(viewData),
      contentStyle,
      renderData,
      listWrap
    };
  }
});
vm.mount('#app');