构建一个简单的手动webpack

2023-11-07 15:31:56

前言

一般我们前端工程化都是离不开webpack，我们不要对于webpack原理有太多的抗拒，现在来手动实现一个非常简易的webpack，初步了解webpack的构建流程。

webpack4.x的使用

安装webpack

npm install webpack -D

创建一个webpack配置文件

webpack.config.js

在webpack配置文件中配置入口和出口

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  }
};

运行webpack

webpack

打包后的文件

在dist文件夹中，你会看到一个名为bundle.js的文件。这就是webpack打包后的文件。

手动实现一个简单的webpack

现在，我们来手动实现一个简单的webpack。

- src
  - index.js
- dist

在index.js文件中写入如下代码

console.log('Hello, world!');

在命令行中运行如下命令

mkdir dist

创建webpack.config.js文件

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