Webpack从0开始搭建Vue2/3项目

1. Webpack搭建Vue2/Vue3项目

搭建目的： 平时的 Vue 测试和小项目搭建

搭建步骤：

1. 初始化项目

npm init -y 或 yarn init -y

2. 安装 webpack

npm i webpack@4.44.2 -d 或 yarn add webpack@4.44.2 -d

3. 安装 webpack-cli、webpack 启动服务器 devServer

npm i webpack-cli@3.3.12  webpack-dev-server@3.11.2 -d

yarn add webpack-cli@3.3.12  webpack-dev-server@3.11.2 -d

4. 安装Vue模板编译的依赖

👉 Vue2：

npm i vue-template-compiler@2.7.5 -d

yarn add vue-loader@next@16.5.0 -d

👉 Vue3：

yarn add @vue/compiler-sfc@3.2.37 -d

yarn add vue-loader@next@16.5.0 -d

🚨 注意：

👉 Vue3 使用@vue/compiler-sfc而不是vue-template-compiler

5. 引入CDN

6. 安装解析html的插件html-webpack-plugin

npm i html-webpack-plugin@4.5.0 -d

yarn add html-webpack-plugin@4.5.0 -d

7. 配置 webpack.config.js 文件

const { resolve } = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");

// Vue 2
const VueLoaderPlugin = require("vue-loader/lib/plugin");

// Vue 3
/*
    const { VueLoaderPlugin } = require("vue-loader");
*/

module.exports = {
  // 开发环境
  mode: "development",
  // 入口文件
  entry: "./src/main.js",
  // 出口
  output: {
    path: resolve(__dirname, "dist"),
    filename: "main.js",
  },
  externals: {
    vue: "Vue",
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: "vue-loader",
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: resolve(__dirname, "public/index.html"),
    }),
  ],
};

8. 运行Vue项目

npm run dev 或 yarn dev

最终的 package.json 文件

{
  "name": "demo",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server"
  },
  "license": "MIT",
  "dependencies": {
    "html-webpack-plugin": "4.5.0",
    "vue-loader": "15.9.7",
    "vue-template-compiler": "2.7.5",
    "webpack": "4.44.2",
    "webpack-cli": "3.3.12",
    "webpack-dev-server": "3.11.2"
  }
}

2.最终的文件目录以及内容

注意 CDN引入以及webpack.config.js配置的是Vue2的，若需要Vue3的可自行查找和配置