返回

webpack 基础配置 （入门）

前端

Webpack 入门：搭建你的第一个项目！

1. 一脚踏入 webpack 世界

webpack，一个前端模块打包工具，它就像一个多功能的工具箱，可以帮你将各种前端资源，比如 JavaScript、CSS、图片等，打包成一个或多个文件，方便你进行项目开发和部署。

2. 来吧，打造我们的第一个项目

我们用 webpack 创建一个简单的项目来感受一下：

(1) 初始化项目

mkdir my-project && cd my-project
npm init -y

(2) 安装 webpack

npm install webpack webpack-cli --save-dev

(3) 创建配置文件

在项目根目录创建一个 webpack.config.js 文件，这个文件是 webpack 的配置文件，用来告诉 webpack 如何打包项目。

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

(4) 创建入口文件

在项目目录下创建一个 src 文件夹，并在 src 文件夹下创建一个 index.js 文件，作为项目的入口文件。

console.log('Hello World!');

(5) 运行 webpack

在项目根目录执行以下命令：

npx webpack

如果一切顺利，你将在 dist 文件夹中找到打包后的 bundle.js 文件。

3. 写在最后

webpack 的强大之处在于它可以根据你的需求进行各种配置，比如你可以使用不同的 loader 来处理不同的资源类型，还可以使用不同的插件来扩展 webpack 的功能。

webpack 的学习曲线可能有点陡峭，但一旦你掌握了它，你就可以轻松地管理你的前端项目，并提高开发效率。


扩展阅读