构建零基础的vue.js开发环境，逐步拆分webpack配置

2023-10-19 14:13:53

都8102年了，现在还来谈webpack的配置，额，是有点晚了。而且，基于vue-cli或者create-react-app生成的项目，也已经一键为我们配置好了webpack，看起来似乎并不需要我们深入了解。

不过，为了学习和理解webpack是如何解决前端开发中常见问题的，还是有必要从零开始搭建一个简单的基于webpack的vue开发环境。

1. 初始化项目

首先，创建一个新的目录，并使用npm初始化一个新的vue项目：

mkdir vue-webpack-project
cd vue-webpack-project
npm init vue@latest

这将创建一个新的vue项目，并安装必要的依赖项。

2. 安装webpack

接下来，我们需要安装webpack：

npm install webpack webpack-cli --save-dev

这将安装webpack和webpack-cli（webpack的命令行界面）。

3. 创建webpack配置

接下来，我们需要创建一个webpack配置。在项目根目录创建一个名为“webpack.config.js”的文件，并添加以下内容：

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

这个webpack配置告诉webpack如何打包我们的代码。

entry属性指定了webpack的入口文件，即我们的应用程序的入口文件。
output属性指定了webpack的输出路径和文件名。
module属性指定了webpack的模块加载器规则。

4. 运行webpack

现在，我们可以使用webpack-cli来运行webpack：

npx webpack

这将运行webpack，并生成一个名为“bundle.js”的捆绑文件。

5. 创建一个简单的vue应用程序

现在，让我们创建一个简单的vue应用程序。在项目根目录创建一个名为“src”的目录，并在其中创建一个名为“main.js”的文件，并添加以下内容：

import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

在同一个目录中，创建一个名为“App.vue”的文件，并添加以下内容：

<template>
  <div>
    <h1>Hello, webpack!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

6. 在HTML页面中引入生成的bundle.js文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
</head>
<body>
  <div id="app"></div>

  <script src="./dist/bundle.js"></script>
</body>
</html>