9102年webpack4搭建vue项目的方法步骤

下面是详细的讲解"9102年webpack4搭建vue项目的方法步骤"的完整攻略。

1. 环境搭建

首先需要安装 Node.js 以及 npm（如果 Node.js 安装包中集成了 npm 则不需要单独安装）。在安装完毕后，可以在命令行输入以下命令来查看是否安装成功：

node -v
npm -v

如果能够显示出对应的版本号，则说明 Node.js 与 npm 安装成功了。

2. 初始化项目

在命令行里，我们需要到想要存放项目的目录中，然后输入以下命令来初始化项目：

npm init

按照提示填写对应的内容，例如项目名称、版本号、描述等等。

3. 安装依赖

接下来，我们需要安装一些依赖，包括 webpack webpack-cli vue vue-loader 等等，输入以下命令：

npm install webpack webpack-cli vue vue-loader vue-template-compiler css-loader style-loader babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack-dev-server -D

其中 -D 表示开发环境需要的依赖。

4. 配置 webpack 配置文件

在项目根目录下创建一个 webpack.config.js 文件，用于配置 webpack 相关的配置信息。

示例1：

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
  ],
}

示例2：

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

在配置文件中，我们配置了以下几个内容：

• mode：运行模式，包括 development、production 以及 none 三个选项。
• entry：打包入口文件。
• output：打包出口文件。
• module：模块处理器。
• plugins：插件。

5. 创建 Vue 组件

在 src 目录下新建一个 components 文件夹，用于存放 Vue 组件。在 components 目录下新建一个 .vue 文件用于编写组件代码。

示例：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
    };
  },
};
</script>

<style>
.hello {
  font-size: 2em;
  text-align: center;
  padding-top: 20%;
}
</style>

6. 引入组件

在 src/main.js 文件中引入组件，并且将组件挂载到特定的 DOM 节点上，例如：

import Vue from 'vue';
import HelloWorld from './components/HelloWorld.vue';

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  components: { HelloWorld },
  template: '<HelloWorld/>',
});

其中，HelloWorld 是你要引入的组件名称，而 #app 是你要挂载组件的 DOM 元素的 ID。

7. 运行项目

在命令行中输入以下命令来运行项目：

npm run dev

然后，可以在浏览器中打开 http://localhost:8080，查看到你的项目已成功运行。

8. 打包项目

在命令行中输入以下命令来打包项目：

npm run build

在执行完毕后，项目的打包文件将会生成在 dist 目录下。

以上就是整个项目的搭建过程，其中第 4 步中的 webpack 配置根据不同的需求可能会变化。如果你发现无法成功运行，可以逐一检查每个步骤是否按照要求完成。

示例1中的配置方式是比较基本的配置方式，只涉及到了 Vue 组件、CSS 样式以及 JavaScript 代码的编译打包。

示例2中的配置方式比较全面，除了基本的配置外还包括了 HtmlWebpackPlugin 插件的配置，这个插件可以将打包后的 JS 文件自动注入到 HTML 文件中，省去手动修改的麻烦。同时该配置还加入了一些配置项的优化方式，例如 babel-loader 的配置选择了新的版本（8.0.0-beta.0），这个版本相较于之前的版本可能会更加快速并且更加兼容。