使用webpack构建本地开发工具

预习知识

1. 为什么从fx-server/bin/fx-server进入

2. webpack-dev-server（生成的dist文件，存的是什么）

webpack-dev-server: 是一个本地开发服务器，会自动监听变化，自动打包构建，自动更新刷新浏览器

特点：

-不会产生dist文件，将打包结果暂时存在内存中，内部的http-server访问这些文件并读取数据，发送给浏览器

- 减少磁盘的读取，提高构建效率

写法：

在webpack.config.js文件中，通过属性devServer:{}设置与webpack-dev-server相关的配置

当运行npm run dev的时候，devServer首先会在内存中创建类似的dist目录，这里不会看到生成的dist打包文件，是因为webpack-dev-server将打包编译结果放在内存中，内部的http-server会访问这些文件并读取数据，再发送给浏览器，由浏览器打开进行预览

3. 热模块替换（HMR：hot module repalcement）
4. 强缓存和协商缓存
5. 项目都有哪些配置

1.开发环境的配置：是开发环境还是测试环境；是新的主战还是旧的主站；

2.开发框架的项目的配置：都哪些文件要请求测试的文件并缓存起来；哪些需要请求本地环境代码进行开发

3.请求测试环境服务器的配置是什么

整体逻辑

webpack配置的解析

webpack({
        mode: 'development',
        entry: [
            'webpack/hot/dev-server.js',
            'webpack-dev-server/client/index.js?hot=true&live-reload=true&liveReload=true',
            path.resolve(__dirname, './hoter.js'),
        ],
        output: {
            path: path.resolve(__dirname, '../dist'),
            filename: 'hoter.js',
            publicPath: '/html/fx-server-hot/',
        },
        plugins: [new webpack.HotModuleReplacementPlugin()],
        devtool: 'eval-cheap-module-source-map',
    });