javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS Webpack打包前端项目

JavaScript使用Webpack打包前端项目

作者：普通网友

在前端开发中,Webpack作为主流的模块打包工具,能够将各种资源整合为优化的输出文件,这篇文章主要介绍了JavaScript使用Webpack打包前端项目的相关资料,需要的朋友可以参考下

Webpack 配置示例

以下是一个基础的 Webpack 配置示例，用于打包前端项目代码。假设项目包含 JavaScript、CSS 和静态资源（如图片），并支持开发和生产环境的区分。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';

  return {
    entry: './src/index.js',
    output: {
      filename: isProduction ? '[name].[contenthash].js' : '[name].js',
      path: path.resolve(__dirname, 'dist'),
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          },
        },
        {
          test: /\.css$/,
          use: [
            isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
            'css-loader',
            'postcss-loader',
          ],
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          type: 'asset/resource',
        },
      ],
    },
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        template: './src/index.html',
      }),
      ...(isProduction
        ? [
            new MiniCssExtractPlugin({
              filename: '[name].[contenthash].css',
            }),
          ]
        : []),
    ],
    devServer: {
      static: {
        directory: path.join(__dirname, 'dist'),
      },
      hot: true,
    },
  };
};

功能说明

  1. 入口与输出配置

    • 入口文件为 src/index.js，输出到 dist 目录。
    • 生产环境下使用 [contenthash] 实现缓存优化。

  2. 模块处理规则

    • 使用 babel-loader 转译 JavaScript 代码，支持 ES6+ 语法。
    • 通过 css-loader 和 style-loader（开发环境）或 MiniCssExtractPlugin（生产环境）处理 CSS 文件。
    • 使用 asset/resource 类型处理图片等静态资源。

  3. 插件配置

    • CleanWebpackPlugin 在每次构建前清理 dist 目录。
    • HtmlWebpackPlugin 自动生成 HTML 文件并注入打包后的资源。
    • 生产环境下通过 MiniCssExtractPlugin 提取 CSS 为独立文件。

  4. 开发服务器

    • 配置 devServer 支持热更新（HMR）和静态文件服务。

依赖安装

运行以下命令安装所需依赖：

npm install webpack webpack-cli webpack-dev-server --save-dev
npm install babel-loader @babel/core @babel/preset-env --save-dev
npm install css-loader style-loader postcss-loader mini-css-extract-plugin --save-dev
npm install html-webpack-plugin clean-webpack-plugin --save-dev

脚本配置

在 package.json 中添加以下脚本：

{
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  }
}

总结 

到此这篇关于JavaScript使用Webpack打包前端项目的文章就介绍到这了,更多相关JS Webpack打包前端项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文