在koa2中使用webpack进行打包

最新推荐文章于 2024-09-14 09:23:19 发布

aiduang

最新推荐文章于 2024-09-14 09:23:19 发布

阅读量2.2k

点赞数

分类专栏： # Koa2 Node 文章标签： nodejs

本文链接：https://blog.youkuaiyun.com/ZQD666/article/details/106589904

版权

Node 同时被 2 个专栏收录

5 篇文章

订阅专栏

Koa2

4 篇文章

订阅专栏

这篇博客介绍了如何在Koa2应用中使用Webpack进行打包。首先，讲解了安装必要的依赖，接着说明如何创建Webpack配置文件，并在根目录执行打包命令。最后，提到了打包完成后，文件会生成在特定目录，可用于后续的应用运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装依赖

这里只是针对webpack的依赖处理

其它对于babel插件的需求可自行再安装

  "dependencies": {
    "@babel/runtime": "^"
    "cross-env": "^7.0.2",
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",0
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }

创建`webpack`配置文件

根目录下创建webpack.config.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: {
    main: './app.js',
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs',
  },
  externals: [
    /^(?!\.|\/).+/i,
  ],  //node 打包可去除一些警告
  target: 'node', // 服务端打包
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            // cacheDriectory: true, // 配置缓存目录
            presets: ['@babel/preset-env'],
            plugins: ['@babel/transform-runtime'] // 辅助代码从这里引用
          }
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
  ],
};

运行`webpack`命令

根目录下执行npx webpack

下面是配置命令执行并制定打包的环境

  "scripts": {
    "dev": "cross-env NODE_ENV=development npx webpack --mode development",
    "build": "cross-env NODE_ENV=production npx webpack --mode production",
  },