Webpack快速配置指南

原创 已于 2025-04-07 14:00:27 修改 · 813 阅读 · 16 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack #前端 #node.js

于 2025-04-07 13:58:58 首次发布

Webpack快速配置指南

文章目录

项目初始化

首先安装Nodejs，安装完成后选择自己的项目目录。在项目目录下打开命令行工具，使用npm init进行初始化，按照提示输入项目相关信息，点击回车到下一个选项。像一些选项如test command，是用于指定运行测试脚本的命令，目前没定义可以按回车键跳过。
在这里插入图片描述
最终会在当前目录下生成package.json文件，内容就是我们上面填的信息：

{
  "name": "cesium-webpack-example",
  "version": "1.0.0",
  "description": "Cesium Webpack Example",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

因为还没涉及到测试，可以把test命令删除，还有像license，默认值ISC是一种宽松的开源软件许可证，如果你开发的项目没有特殊的版权限制需求，可使用此协议。

安装依赖

安装Webpack：

npm i --save-dev webpack webpack-cli webpack-dev-server style-loader url-loader css-loader html-webpack-plugin copy-webpack-plugin

创建src目录

在项目根目录下新建src目录，来存放我们的项目业务代码，新增下面几个文件：

在这里插入图片描述
main.css

body{
  color: red;
}

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
     Hello World!
  </body>
</html>

index.js

import "./css/main.css";

配置webpack

接下来在当前项目根目录下新建webpack.config.js来配置Webpack。

在这里插入图片描述
在webpack.config.js写入以下内容：

const path = require("path");

const webpack = require("webpack");

module.exports = {
  context: __dirname,
  entry: {
    app: "./src/index.js",
  },
  output: {
    filename: "app.js",
    path: path.resolve(__dirname, "dist"),
  },
};

其中，context指定文件的基本路径，entry用于指定bundles，src/index. js是我们的切入点。Webpack将把bundle app.js输出到在运行时创建的文件夹dist。

关于Webpack想更详细的了解，可参考：Concepts | webpack

接下来是安装css加载器。Webpack像模块一样加载所有内容，加载器用于加载CSS和其他资产文件。

npm install --save-dev style-loader css-loader url-loader

更新Webpack配置，新增两个module rules：

const path = require("path");
const webpack = require("webpack");
module.exports = {
  context: __dirname,
  entry: {
    app: "./src/index.js",
  },
  output: {
    filename: "app.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
        use: ["url-loader"],
      },
    ],
  },
};

为了定义index. html并将我们的bundle（可以看作webpack帮我们解析和整理过的代码）注入该页面，我们需要使用插件html-webpack-plugin：

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

再次更新Webpack配置，新增plugins。将src/index. html作为我们的模板传递。最后，通过添加mode：'Development’来指定webpack的mode选项。

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  context: __dirname,
  entry: {
    app: "./src/index.js",
  },
  output: {
    filename: "app.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
        use: ["url-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
  ],
  mode: "development",
};

更改package.json

在package.json的scripts中添加build命令：

"scripts": {
    "build": "webpack --config webpack.config.js"
}

这里的webpack对应的是node_modules/.bin/中webpack文件。

更改前：

{
  "name": "cesium-webpack-example",
  "version": "1.0.0",
  "description": "Cesium Webpack Example",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "scripts": {},
  "dependencies": {
    "cesium": "^1.127.0"
  },
  "devDependencies": {
    "css-loader": "^7.1.2",
    "html-webpack-plugin": "^5.6.3",
    "style-loader": "^4.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.98.0"
  }
}

更改后：

{
  "name": "cesium-webpack-example",
  "version": "1.0.0",
  "description": "Cesium Webpack Example",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "dependencies": {
    "cesium": "^1.127.0"
  },
  "devDependencies": {
    "css-loader": "^7.1.2",
    "html-webpack-plugin": "^5.6.3",
    "style-loader": "^4.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.98.0"
  }
}

配置webpack-dev-server

最后一步就是启动项目看看效果如何，这里我们需要使用Webpack提供开发工具webpack-dev-server，它可以实现代码修改后自动编译、自动打包，自动刷新浏览器的功能。首先安装：

npm install --save-dev webpack-dev-server

在package.json的scripts中添加启动命令，用来使用dev-server来启动我们的项目，更改后的package.json：

{
  "name": "cesium-webpack-example",
  "version": "1.0.0",
  "description": "Cesium Webpack Example",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "scripts": {
    "build": "node_modules/.bin/webpack --config webpack.config.js",
    "start": "node_modules/.bin/webpack serve --config webpack.config.js --open"
  },
  "dependencies": {
    "cesium": "^1.127.0"
  },
  "devDependencies": {
    "css-loader": "^7.1.2",
    "html-webpack-plugin": "^5.6.3",
    "style-loader": "^4.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.98.0",
    "webpack-dev-server": "^5.2.1"
  }
}

到此配置差不多完成，在命令行或终端中尝试用npm start命令启动项目，可能会看到这个警告：

在这里插入图片描述

会提示我们安装webpack-cli，请回到安装依赖步骤检查自己有没有遗漏webpack-cli。

webpack 本身是一个模块打包工具，而 webpack-cli 是它的命令行界面（CLI）。当我们在命令行中执行 webpack 或者 webpack serve 这样的命令时，实际上是通过 webpack-cli 来与 webpack 进行交互的，它负责解析在命令行输入的参数，然后将这些参数传递给 webpack 以执行相应的操作，比如构建项目、启动开发服务器等。

按照提示安装，安装完成后项目就可以跑起来啦~

在这里插入图片描述
在这里插入图片描述

在浏览器后台->源代码选项中可以看到我们最终显示的html与我们自己写的index.html多了一个对app.js的引入，因为我们在webpack配置中设置了入口为index.js，出口为app.js，也就是最终它会被打包为app.js自动注入到index.html中。

在这里插入图片描述
在这里插入图片描述

进阶

webpack在开发环境和生产环境下配置有所不同，而开发和生产环境都需要依赖公共配置。因此我们把webpack配置分为三个文件：

  • webpack.common.js：公共配置
  • webpack.dev.js：开发环境配置
  • webpack.prod.js：生产环境配置

在项目根目录下新建这三个文件，其中webpack.common.js替换之前配置的webpack.config.js。

webpack.common.js

"use strict";

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    context: __dirname,
    entry: {
        app: "./src/index.js",
    },
    output: {
        filename: "app.js",
        path: path.resolve(__dirname, "dist"),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
                type: "asset/inline",
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "public/index.html",
        }),
    ],
    mode: "development",
    devtool: "eval",
};

webpack.dev.js

可以设置调试有关的一些选项。

const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.common");

const devConfig = {
  mode: "development",
  devServer: {
    open: true,
    port: 8080,
    compress: true,
    hot: true
  },
};
module.exports = merge(devConfig, baseConfig);

webpack.prod.js

const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.common");

const prodConfig = {
  mode: "production",
};
module.exports = merge(prodConfig, baseConfig);

相应的更改package.json：

"scripts": {
    "dev": "webpack serve --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
}

d.js**

const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.common");

const prodConfig = {
  mode: "production",
};
module.exports = merge(prodConfig, baseConfig);

相应的更改package.json：

"scripts": {
    "dev": "webpack serve --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
}

就可以在不同的模式下启动项目。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值