精彩继续！手把手教你使用Webpack打包前端组件（二）

2023-11-06 14:02:17

在上一篇文章中，我们讲述了什么是组件，以及开发一个组件需要用到些什么工具。之后，又带领着大家把原有的webpack-template的目录结构和配置文件进行了一些小改动。本篇文章我们将继续带领大家完成组件引入模板以及组件打包的步骤。

正文

前言

大家好，我是[你的名字]，一位专注于前端开发的技术博客创作专家。今天，我将继续为大家讲解如何使用Webpack打包前端组件。在上一篇文章中，我们已经了解了什么是组件，以及开发一个组件需要用到些什么工具。同时也对webpack-template的目录结构和配置文件进行了一些小改动。接下来，我们将继续带领大家完成组件引入模板以及组件打包的步骤。

组件引入模板

在上一篇文章中，我们已经创建了一个名为Button的组件。现在，我们需要把它引入到模板中。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="app"></div>

  <!-- 引入组件 -->
  <script src="./dist/Button.js"></script>

  <!-- 创建组件实例 -->
  <script>
    const button = new Button({
      text: '点击我'
    })

    button.mount('#app')
  </script>
</body>
</html>

组件打包

在引入组件到模板之后，我们需要对组件进行打包。这样才能保证组件能够正常运行。

// webpack.config.js
const path = require('path')

module.exports = {
  entry: './src/Button.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录
    filename: 'Button.js' // 输出文件名
  },
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配所有.js文件
        exclude: /node_modules/, // 排除node_modules目录
        use: {
          loader: 'babel-loader', // 使用babel-loader
          options: {
            presets: ['@babel/preset-env'] // 使用@babel/preset-env预设
          }
        }
      }
    ]
  }
}