webpack学习笔记(8)-开发服务器(devServer)以及生产模式的介绍

开发服务器&自动化

• 我们每一次写完代码或者更新代码都要手动的输入webpack指令来重新打包才能编译代码,这样太麻烦了,我们希望一切都能够自动化实现,页面或者打包资源能够随着我们源码的改动而重新执行打包最后渲染到页面上,这时我们就需要开发服务器了

• 开发服务器:顾名思义,webpack-dev-server 是 Webpack 官方支持的基于 CLI 的工具,它的作用: 当代码发生变化时，只重新打包变化的代码，自动更新到页面，但是打包的资源存放到内存中，并不会打包到项目的指定位置(即没有输出,不会输出打包好的资源到dist中), 随后自动刷新浏览器。

使用方法:

• 下载包

npm i webpack-dev-server -D

• 配置webpack.config.js

// 使用的是commonjs 的语法格式[node.js]
const path = require("path");//node.js中的核心模块,专门用于处理路径问题
// 引入eslint
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
// 引入HtmlWebpackPlugin插件
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    // 入口
    // 相对路径和绝对路径都行
    entry:"./src/main.js",//相对路径
    // 输出
    output:{
        // 所有文件的输出目录,必须是绝对路径
        // path.resolve()方法返回一个绝对路径
        // __dirname为node.js中的变量,代表当前文件的文件夹名(就是这个文件夹的webpack_code)
        path: path.resolve(__dirname , "dist"),//绝对路径
        // js文件(入口文件)输出的文件名(打包后在输出路径当中生成的文件夹名)
        filename:"static/js/main.js",//所以我们这里改成js资源就输出到一个js文件夹当中
        clean: true,//(自动清空上次打包内容) 原理:在打包前,将path整个目录内容清空,在进行打包
    },
    // 加载器
    module:{
        rules:[
            // loder的配置
            // 1.处理css资源
            {
                // 用来匹配 .css 结尾的文件
                test: /\.css$/,
                // use 数组里面 Loader 执行顺序是从右到左
                use: [
                    "style-loader", //将js中css通过创建style标签添加html文件当中生效
                    "css-loader"//将css资源编译成common.js的模块到js当中
                ],
            },
            // 2.处理less资源
            {
                test: /\.less$/,
                // loader:xxx => 自能使用一个loader
                use: [
                    "style-loader", 
                    "css-loader", 
                    "less-loader"//将less编译成css文件
                ], // use能够使用多个loader
            },
            // 3.处理图片资源
            {
                test: /\.(png|jpe?g|gif|webp)$/,//正则判断图片后缀
                type: "asset",
                parser:{
                    dataUrlCondition:{
                        // 将小于10kb的图片转化为base64
                        // 优点:减小请求数量  缺点:原图片的体积会变大(故大体积突变不会使用这种方法)
                        maxSize: 10*1024//10kb(大体积图片不会使用这种方法)
                    }
                },
                generator: {
                    // 将图片文件输出到 static/imgs 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: 'static/imgs/[hash:8][ext][query]'
                }
            },
            // 4.处理字体资源
            {
                test: /\.(ttf|woff2?)$/,
                type: "asset/resource",//这里的是改成"asset/resource"
                generator: {
                  filename: "static/media/[hash:8][ext][query]",
                },
            },
            // 配置babel**********************************************************
            {
                test: /\.js$/,//检查匹配以js结尾的文件
                exclude: /node_modules/, // 排除node_modules代码不编译
                loader: "babel-loader",
            },
            // *******************************************************************
        ],
    },
    // 插件
    plugins:[
        // plugin的配置

        // eslint配置
        new ESLintWebpackPlugin({
            // 指定检查文件的根目录(src目录下的所有文件的语法)
            context: path.resolve(__dirname, "src"),
          }),

        // HtmlWebpackPlugin配置*******************************************************
        new HtmlWebpackPlugin({
            // 以 public/index.html 为模板创建文件
            // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, "public/index.html"),
          }),
        //   ****************************************************************************
    ],

    // 配置开发服务器: 不会输出任何资源, 在内存中的编译打包的*******************************
    devServer: {
        host: "localhost", // 启动服务器域名
        port: "5000", // 启动服务器端口号
        open: true, // 是否自动打开浏览器
    },
    // **********************************************************************************
    // 模式
    mode:"development"//开发模式
};

• 运行指令

npx webpack serve

注意:

• 运行指令发生了变化, 并且当你使用开发服务器时，所有代码都会在内存中编译打包，并不会输出到 dist 目录下。
• 开发时我们只关心代码能运行，有效果即可，至于代码被编译成什么样子，我们并不需要知道。

生产模式的介绍

• 生产模式是开发完成代码后，我们需要得到代码将来部署上线。

• 这个模式下我们主要对代码进行优化，让其运行性能更好。

  • 优化主要从两个角度出发:
    1. 优化代码运行性能
    2. 优化代码打包速度

生产模式准备:

• 我们分别准备两个配置文件来放不同的配置(webpack.dev.js[开发模式配置文件]和webpack.prod.js[生产模式配置文件])

1. 文件目录

├── webpack-test (项目根目录)
    ├── config (Webpack配置文件目录)
    │    ├── webpack.dev.js(开发模式配置文件)
    │    └── webpack.prod.js(生产模式配置文件)
    ├── node_modules (下载包存放目录)
    ├── src (项目源码目录，除了html其他都在src里面)
    │    └── 略
    ├── public (项目html文件)
    │    └── index.html
    ├── .eslintrc.js(Eslint配置文件)
    ├── babel.config.js(Babel配置文件)
    └── package.json (包的依赖管理配置文件)

2. 修改 webpack.dev.js

• 因为文件目录变了，所以所有绝对路径需要回退一层目录才能找到对应的文件(给输出或检查的路径添加上../)

// 使用的是commonjs 的语法格式[node.js]
const path = require("path");//node.js中的核心模块,专门用于处理路径问题
// 引入eslint
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
// 引入HtmlWebpackPlugin插件
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    // 入口
    // 相对路径和绝对路径都行
    entry:"./src/main.js",//相对路径
    // 输出
    output:{
        // 所有文件的输出目录,必须是绝对路径
        path: undefined, // 开发模式没有输出(因为存在开发服务器,不存在输出)，不需要指定输出目录
        // js文件(入口文件)输出的文件名(打包后在输出路径当中生成的文件夹名)
        filename:"static/js/main.js",//所以我们这里改成js资源就输出到一个js文件夹当中
        // clean: true, // 开发模式没有输出，不需要清空输出结果(开发服务器)
    },
    // 加载器
    module:{
        rules:[
            // loder的配置
            // 1.处理css资源
            {
                // 用来匹配 .css 结尾的文件
                test: /\.css$/,
                // use 数组里面 Loader 执行顺序是从右到左
                use: [
                    "style-loader", //将js中css通过创建style标签添加html文件当中生效
                    "css-loader"//将css资源编译成common.js的模块到js当中
                ],
            },
            // 2.处理less资源
            {
                test: /\.less$/,
                // loader:xxx => 自能使用一个loader
                use: [
                    "style-loader", 
                    "css-loader", 
                    "less-loader"//将less编译成css文件
                ], // use能够使用多个loader
            },
            // 3.处理图片资源
            {
                test: /\.(png|jpe?g|gif|webp)$/,//正则判断图片后缀
                type: "asset",
                parser:{
                    dataUrlCondition:{
                        // 将小于10kb的图片转化为base64
                        // 优点:减小请求数量  缺点:原图片的体积会变大(故大体积突变不会使用这种方法)
                        maxSize: 10*1024//10kb(大体积图片不会使用这种方法)
                    }
                },
                generator: {
                    // 将图片文件输出到 static/imgs 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: 'static/imgs/[hash:8][ext][query]'
                }
            },
            // 4.处理字体资源
            {
                test: /\.(ttf|woff2?)$/,
                type: "asset/resource",//这里的是改成"asset/resource"
                generator: {
                  filename: "static/media/[hash:8][ext][query]",
                },
            },
            // 配置babel**********************************************************
            {
                test: /\.js$/,//检查匹配以js结尾的文件
                exclude: /node_modules/, // 排除node_modules代码不编译
                loader: "babel-loader",
            },
            // *******************************************************************
        ],
    },
    // 插件
    plugins:[
        // plugin的配置

        // eslint配置
        new ESLintWebpackPlugin({
            // 指定检查文件的根目录(src目录下的所有文件的语法)
            context: path.resolve(__dirname, "../src"),
          }),

        // HtmlWebpackPlugin配置*******************************************************
        new HtmlWebpackPlugin({
            // 以 public/index.html 为模板创建文件
            // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, "../public/index.html"),
          }),
        //   ****************************************************************************
    ],

    // 配置开发服务器: 不会输出任何资源, 在内存中的编译打包的*******************************
    devServer: {
        host: "localhost", // 启动服务器域名
        port: "5000", // 启动服务器端口号
        open: true, // 是否自动打开浏览器
    },
    // **********************************************************************************
    // 模式
    mode:"development"//开发模式
};

• 运行开发模式的指令：(过于麻烦,后面可以设置运行指令来简化)

npx webpack serve --config ./config/webpack.dev.js

3. 修改 webpack.prod.js

// 使用的是commonjs 的语法格式[node.js]
const path = require("path");//node.js中的核心模块,专门用于处理路径问题
// 引入eslint
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
// 引入HtmlWebpackPlugin插件
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    // 入口
    // 相对路径和绝对路径都行
    entry:"./src/main.js",//相对路径
    // 输出
    output:{
        // 所有文件的输出目录,必须是绝对路径
        // path.resolve()方法返回一个绝对路径
        // __dirname为node.js中的变量,代表当前文件的文件夹名(就是这个文件夹的webpack_code)
        path: path.resolve(__dirname , "../dist"),//相较于开发模式,生产模式需要输出
        // js文件(入口文件)输出的文件名(打包后在输出路径当中生成的文件夹名)
        filename:"static/js/main.js",//所以我们这里改成js资源就输出到一个js文件夹当中
        clean: true,//需要输出就需要clean(自动清空上次打包内容) 原理:在打包前,将path整个目录内容清空,在进行打包
    },
    // 加载器
    module:{
        rules:[
            // loder的配置
            // 1.处理css资源
            {
                // 用来匹配 .css 结尾的文件
                test: /\.css$/,
                // use 数组里面 Loader 执行顺序是从右到左
                use: [
                    "style-loader", //将js中css通过创建style标签添加html文件当中生效
                    "css-loader"//将css资源编译成common.js的模块到js当中
                ],
            },
            // 2.处理less资源
            {
                test: /\.less$/,
                // loader:xxx => 自能使用一个loader
                use: [
                    "style-loader", 
                    "css-loader", 
                    "less-loader"//将less编译成css文件
                ], // use能够使用多个loader
            },
            // 3.处理图片资源
            {
                test: /\.(png|jpe?g|gif|webp)$/,//正则判断图片后缀
                type: "asset",
                parser:{
                    dataUrlCondition:{
                        // 将小于10kb的图片转化为base64
                        // 优点:减小请求数量  缺点:原图片的体积会变大(故大体积突变不会使用这种方法)
                        maxSize: 10*1024//10kb(大体积图片不会使用这种方法)
                    }
                },
                generator: {
                    // 将图片文件输出到 static/imgs 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: 'static/imgs/[hash:8][ext][query]'
                }
            },
            // 4.处理字体资源
            {
                test: /\.(ttf|woff2?)$/,
                type: "asset/resource",//这里的是改成"asset/resource"
                generator: {
                  filename: "static/media/[hash:8][ext][query]",
                },
            },
            // 配置babel**********************************************************
            {
                test: /\.js$/,//检查匹配以js结尾的文件
                exclude: /node_modules/, // 排除node_modules代码不编译
                loader: "babel-loader",
            },
            // *******************************************************************
        ],
    },
    // 插件
    plugins:[
        // plugin的配置

        // eslint配置
        new ESLintWebpackPlugin({
            // 指定检查文件的根目录(src目录下的所有文件的语法)
            context: path.resolve(__dirname, "../src"),
          }),

        // HtmlWebpackPlugin配置*******************************************************
        new HtmlWebpackPlugin({
            // 以 public/index.html 为模板创建文件
            // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, "../public/index.html"),
          }),
        //   ****************************************************************************
    ],
    /*
        生产模式不需要开发服务器(devServer)
    */
    
    // 模式
    mode:"production"//生产模式
};

• 运行生产模式的指令：

npx webpack --config ./config/webpack.prod.js

4. 配置运行指令(简化指令)

• 为了方便运行不同模式的指令，我们将指令定义在 package.json 中 scripts 里面

// package.json
{
  // 其他省略
  "scripts": {
    "start": "npm run dev",
    "dev": "npx webpack serve --config ./config/webpack.dev.js",
    "build": "npx webpack --config ./config/webpack.prod.js"
  }
}

以后启动指令：

• 开发模式：npm start 或 npm run dev
• 生产模式：npm run build