006 webpack基础 - 搭建本地服务器及自动化

[A] webpack搭建开发服务器，实现文件修改后自动打包

    1. 安装：

        npm i webpack-dev-server -D

    2. webpack中配置

        // 开发服务器，注意devServer和loader等同级

        devServer: {
            host: "localhost", // 启动服务器域名
            port: "3000", // 启动服务器端口号
            open: true, // 是否自动打开浏览器
        },

    3. 开启服务并监听文件变化

        npx webpack serve

    4. 当使用开发服务器时，所有代码都会在内存中编译打包，并不会输出到 dist 目录下

        开发时我们只关心代码能运行，有效果即可，至于代码被编译成什么样子，我们并不需要知道。

 

[B] 开发模式与生产模式准备内容

　　1. 我们需要为开发模式和生产模式，分别准备一套webpack配置 webpack.dev.js 和 webpack.prod.js

　　2. 便于我们打包时，可以自动读取不同模式下的配置文件

　　开发模式：

　　　　1. entry

            　　不变

        　　2. output

           　　 path可以设置为undefined，因为开发模式没有输出

            　　文件名是需要的

            　　不需要打包前清空

        　　3. 检查所有的绝对路径

    生产模式：

        　　1. entry

           　　 不变

       　　 2. output

       　　     path绝对路径要正确

      　　  3. 检查所有绝对路径

    在 package.json 的script中配置简化命令

        1. 运行开发环境配置

　　　　"dev": "webpack serve --config ./config/webpack.dev.js"

        2. 运行生产环境配置

      "build": "webpack --config ./config/webpack.prod.js"

        3. 此外，由于开发环境使用最多，因此可以单独指定启动开发环境的指令

            "satrt": "npm run dev"