当前位置： 技术文章>> Webpack项目构建配置示例

文章标题：Webpack项目构建配置示例
  • 文章分类: 前端
  • 11661 阅读

Webpack 是一个强大的打包工具，可以帮助我们将多个模块打包成一个或多个 JavaScript 文件。下面是一个基本的 Webpack 配置示例，可以用于构建一个简单的 JavaScript 项目：


安装 Webpack 和相关依赖

在项目的根目录下打开命令行窗口，执行以下命令来安装 Webpack 和相关依赖：

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev

其中，webpack 是 Webpack 的核心依赖，webpack-cli 是 Webpack 的命令行工具，webpack-dev-server 是 Webpack 的开发服务器，html-webpack-plugin 是 Webpack 的 HTML 模板插件。


创建 Webpack 配置文件

在项目的根目录下创建一个名为 webpack.config.js 的文件，然后添加以下代码：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.js', // 入口文件
  output: { // 输出文件
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: { // 模块配置
    rules: [
      {
        test: /\.js$/, // 匹配 JavaScript 文件
        exclude: /node_modules/, // 排除 node_modules 目录
        use: {
          loader: 'babel-loader' // 使用 babel-loader 处理 JavaScript 文件
        }
      }
    ]
  },
  plugins: [ // 插件配置
    new HtmlWebpackPlugin({
      template: './src/index.html' // 使用 index.html 作为 HTML 模板
    })
  ],
  devServer: { // 开发服务器配置
    contentBase: './dist' // 设置服务器的根目录为 dist 目录
  }
};

上面的代码中，entry 指定了入口文件，output 指定了输出文件，module.rules 定义了如何处理 JavaScript 文件，plugins 配置了 Webpack 的插件，devServer 配置了 Webpack 的开发服务器。


创建 Babel 配置文件

在项目的根目录下创建一个名为 .babelrc 的文件，然后添加以下代码：

{
  "presets": ["@babel/preset-env"]
}

上面的代码指定了使用 @babel/preset-env 来处理 JavaScript 文件。


创建 JavaScript 文件和 HTML 文件

在 src 目录下创建一个名为 index.js 的文件，然后添加以下代码：

const sum = (a, b) => {
  return a + b;
};
console.log(sum(1, 2));

在 src 目录下创建一个名为 index.html 的文件，然后添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack Demo</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

执行打包命令

在命令行中执行以下命令来启动 Webpack 开发服务器：

npx webpack serve --mode development

执行完成后，可以在浏览器中打开 http://localhost:8080 来查看项目效果。


以上是一个基本的 Webpack 配置示例，你可以根据项目需要进行相应的修改和扩展。


推荐文章