# webpack-vue

**Repository Path**: lemon_m/webpack-vue

## Basic Information

- **Project Name**: webpack-vue
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-08
- **Last Updated**: 2021-04-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 利用 webpack5 手动搭建 Vue 3

## 项目初始化

- 1、新建项目目录
- 2、初始化项目

```
  npm init -y
```

- 3、安装 webpack 和 webpack-cli

```
  npm i webpack webpack-cli -D
```

- 4、在根目录下新增 src 文件夹 、 index.html 文件 、webpack.config.js
- 5、在 src 文件夹下新建 main.js 文件
- 6、安装 plugins babel

```
npm i html-webpack-plugin -D //配置模板文件
npm i vue@next -S//安装vue3.0
npm i vue-loader @vue/compiler-sfc -D //用来识别.vue文件
npm i style-loader css-loader -D//配置css loader
npm install sass-loader sass webpack --save-dev //.sass .scss
npm i clean-webpack-plugin -D
npm i webpack-dev-server -D
/*babel*/
npm i @babel/core @babel/preset-env babel-loader
```

- 7、配置 webpack.config.js

```
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "./src/main.js"),
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "js/[name].js",
  },
  module: {
    rules: [
      { test: /.\js$/, exclude: /node_modules/, loader: "babel-loader" },
      { test: /\.vue$/, use: ["vue-loader"] },
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./index.html"),
      filename: "index.html",
      title: "手动搭建vue开发环境",
    }),
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
  ],
  devServer: {
    contentBase: path.resolve(__dirname, "./dist"),
    port: 8080,
    publicPath: "/",
  },
};
```

- 8、在根目录新建 babel.config.js,并配置

```
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          browsers: ["last 2 versions"],
        },
      },
    ],
  ],
};
```

- 9、配置 package.json 中 scripts

```
 "scripts": {
    "dev": "webpack serve --progress --config ./webpack.config.js"
  },
```