生产模式介绍

生产模式就是项目开发完成后，用于打包上线版本代码的阶段。

在这个模式下，Webpack 会对代码进行一系列优化处理，提升项目在实际运行中的表现。

优化的重点主要包括两个方面：

1. 提升代码运行效率，让应用在浏览器中运行得更快
2. 提高代码在不同浏览器上的兼容性

生产模式准备

我们来准备3个配置文件来放不同的配置

文件目录

├── wp1 (项目根目录)
    ├── webpack (Webpack配置文件目录)
    |    ├── common.js (共享配置)
    │    ├── webpack.dev.js (开发专属配置)
    │    └── webpack.prod.js (生产专属配置)
    ├── node_modules (下载包存放目录)
    ├── src (项目源码)
    │    └── ...
    ├── public (项目html模板文件)
    │    └── index.html
    ├── eslint.config.js (Eslint配置文件)
    └── package.json (包的依赖管理配置文件)

1. 创建 webpack.common.js

因为文件目录变了，所以所有绝对路径需要回退一层目录才能找到对应的文件

// webpack.common.js
import path from 'path';
import { fileURLToPath } from 'url';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
export {path,__dirname}
export const common =  {
  entry: './src/main.js',
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp|svg)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024,
          },
        },
        generator: {
          filename: 'static/images/[hash:10][ext][query]',
        },
      },
      {
        test: /\.(ttf|woff2?|docx?|xlsx?|pptx?|mp[34]|avi|pdf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'static/media/[hash:10][ext][query]',
        },
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../public/index.html')
    })
  ],
};

因为涉及到配置合并，我们安装一下webpack的合并插件

npm install --save-dev webpack-merge

2. 创建 webpack.dev.js

// webpack.dev.js
import { merge } from 'webpack-merge';
import ESLintPlugin from 'eslint-webpack-plugin';
import {common,path,__dirname} from './webpack.common.js';

export default merge(common, {
  mode: 'development',
  output: {
    path: undefined,
    filename: 'static/js/main.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new ESLintPlugin({
      context: path.resolve(__dirname, '../src'),
    }),
  ],
  devServer: {
    host: 'localhost',
    port: '2800',
    open: true,
    hot: true
  }
});

运行开发模式的指令：

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

3. 修改 webpack.prod.js

// webpack.prod.js
import { merge } from 'webpack-merge';
import ESLintPlugin from 'eslint-webpack-plugin';
import {common,path,__dirname} from './webpack.common.js';

export default merge(common, {
  mode: 'production',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'static/js/main.js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new ESLintPlugin({
      context: path.resolve(__dirname, '../src'),
    }),
  ],
});

运行生产模式的指令：

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

4. 配置运行指令

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

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

以后启动指令：

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