开发及生产模式

SOBER大约 3 分钟

开发及生产模式

开发模式

开发模式顾名思义就是我们开发代码时使用的模式。

开发模式的作用

编译代码，使浏览器能识别运行
开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源
代码质量检查，树立代码规范
提前检查代码的一些隐患，让代码运行时能更加健壮。
提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观:

生产模式

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

这个模式下我们主要对代码进行优化，让其运行性能更好。优化主要从两个角度出发:
优化代码运行性能
优化代码打包速度

准备

我们分别准备两个配置文件来放不同的配置

文件目录

webpack_code # 项目根目录（所有指令必须在这个目录运行）
│
├─ config (webpack配置文件)
│   │
│   ├─ webpack.dev.js (开发模式配置文件)
│   │
│   └─ webpack.prod.js (生产模式配置文件)
│
├─ node_modules (下载包存放目录)
│
├─ src # 项目源码目录
│   │
│   └─ 略
│
├─ public (项目htm1文件)
│   │
│   └─ index.html
│
├─ .eslintrc.js (Eslint配置文件)
│
├─ babel.config.js (Babel配置文件)
│
└─ package.json (包的依赖管理配置文件)

修改 webpack.dev.js 文件

  const path = require("path")
  const ESlintPlugin = require('eslint-webpack-plugin')
  const HtmlWebpackPlugin = require('html-webpack-plugin')

  module.exports = {
      entry: "./src/main.js",
      output: {
          /** 
          * 开发模式没有输出，所以没有输出路径 
          */
          path: undefined,
          filename: "static/js/main.js",
          /** 
          * 作用：打包前自动删除上次打包的 dist 文件夹
          * 原理：在打包前，将 path 整个目录内容清空，再进行打包 
          */
          clean: true,
      },
      module: {
          rules: [
              {
                  test: /\.css$/i,
                  use: ["style-loader", "css-loader"]
              },
              {
                  test: /\.less$/i,
                  use: ["style-loader", "css-loader", "less-loader"]
              },
              {
                  test: /\.s[ac]ss$/i, // [ac] 表示 a 和 c 都可以
                  use: ["style-loader", "css-loader", "less-loader"]
              },
              {
                  test: /\.styl$/i,
                  use: ["style-loader", "css-loader", "stylus-loader"]
              },
              {
                  test: /\.(png|jpe?g|gif|webp|svg)$/,
                  type: "asset",
                  parser: {
                      dataUrlCondition: {
                          maxSize: 600 * 1024, // 600kb
                      }
                  },
                  generator: {
                      filename: "static/images/[hash:10][ext][query]",
                  }
              },
              {
                  test: /\.(ttf|woff2|map3|map4|avi)$/,
                  type: "asset/resource",
                  generator: {
                      filename: "static/media/[hash:10][ext][query]",
                  }
              },
              {
                  test: /\.js$/,
                  exclude: /node_modules/, // 排除 node_modules 中的 js 文件，这些文件不处理
                  use: {
                      loader: "babel-loader",
                  }
              }
          ]
      },

      plugins: [
          new ESlintPlugin({
              context: path.resolve(__dirname, "../src")
          }),
          new HtmlWebpackPlugin({
              template: path.resolve(__dirname, "../public/index.html")
          })
      ],
      /** 开发服务器 */
      devServer: {
          host: "localhost", // 启动服务器域名
          port: "6001", // 端口
          open: true // 是否自动打开浏览器
      },
      /** 开发模式 */
      mode: "development",
  }

运行开发模式

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

修改 webpack.prod.js 文件

  const path = require("path")
  const ESlintPlugin = require('eslint-webpack-plugin')
  const HtmlWebpackPlugin = require('html-webpack-plugin')

  module.exports = {
      entry: "./src/main.js",
      output: {
          path: path.resolve(__dirname, "../dist"),
          filename: "static/js/main.js",
      },
      module: {
          rules: [
              {
                  test: /\.css$/i,
                  use: ["style-loader", "css-loader"]
              },
              {
                  test: /\.less$/i,
                  use: ["style-loader", "css-loader", "less-loader"]
              },
              {
                  test: /\.s[ac]ss$/i, // [ac] 表示 a 和 c 都可以
                  use: ["style-loader", "css-loader", "less-loader"]
              },
              {
                  test: /\.styl$/i,
                  use: ["style-loader", "css-loader", "stylus-loader"]
              },
              {
                  test: /\.(png|jpe?g|gif|webp|svg)$/,
                  type: "asset",
                  parser: {
                      dataUrlCondition: {
                          maxSize: 600 * 1024, // 600kb
                      }
                  },
                  generator: {
                      filename: "static/images/[hash:10][ext][query]",
                  }
              },
              {
                  test: /\.(ttf|woff2|map3|map4|avi)$/,
                  type: "asset/resource",
                  generator: {
                      filename: "static/media/[hash:10][ext][query]",
                  }
              },
              {
                  test: /\.js$/,
                  use: {
                      loader: "babel-loader",
                  }
              }
          ]
      },

      plugins: [
          new ESlintPlugin({
              context: path.resolve(__dirname, "../src")
          }),
          new HtmlWebpackPlugin({
              template: path.resolve(__dirname, "../public/index.html")
          })
      ],
      /** 生产模式 */
      mode: "production",
  }

运行生产命令打包

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

配置命令 package.json

将以上两个命令配置到 package.json 中，方便运行

  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "dev": "webpack serve --config ./config/webpack.dev.js",
      "build": "webpack --config ./config/webpack.prod.js"
  },

使用命令启动和打包项目

# 启动
  npm run dev

  # 打包
  npm run build

开发及生产模式

# 开发及生产模式

# 开发模式

# 生产模式

# 准备

开发及生产模式

开发模式

生产模式

准备