웹 팩을 사용하여 vue 프로젝트를 설정하는 방법입니다.

이 글은 vue를 설정하는 단계별 안내서를 제공합니다.js는 웹 패키지를 사용합니다.컴퓨터에 node를 설치해야 하고, vue의 작업 원리를 알아야 하며, 코드 편집기가 필요합니다.
Creating a folder and a package json file
Installation of dependencies
File/Folder structure
Configure webpack to use babel loader, and vue loader
Write scripts to start your server
Loaders, Plugins, and Code Splitting
Final webpack configuration and Observation

폴더 및 패키지 json 파일 만들기

In your terminal, use the mkdir command to create a project folder and use the cd command to change directory into the folder created.

생성된 파일에서 명령npm init –y을 실행하여 package.json 파일을 생성합니다.

종속 항목 설치

Now that we have a package.json file to keep track of our dependencies, we can go ahead to install them.

Dependencies: first we install vue, vue-router and core-js as dependencies. Run npm install vue vue-router core-js --save this would install the three packages as dependencies.
Dev-dependencies: Now we install webpack, webpack-cli, webpack-dev-server, babel-loader, /core, /preset-env, vue-loader, vue-template-compiler. Run npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env vue-loader vue-template-compiler -D this would install all these packages as dev-dependencies. Our package.json file should look like this after the installation process

{
  "name": "vue-webpack-setup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.12",
    "vue-router": "^3.4.3"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "babel-loader": "^8.1.0",
    "vue-loader": "^15.9.3",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
}

파일/폴더 구조

Our folder structure would be similar to the default folder structure we get when using the vue cli to create a project. So lets create a public folder and an src folder in the root of our project. In the public folder, add a favicon.ico file and create an index.html file. In the index.html file, add this boilerplate

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Vue app</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

In our src folder lets create an App.vue file and a main.js file.
N.B: App.vue file starts with a capital letter.
In our App.vue file, add this code

<template>
  <div id="app">
    <div class="nav">
      <router-link to="/">Home</router-link>|<router-link to="/about"
        >About</router-link
      >
    </div>
    <router-view />
  </div>
</template>

<style lang="scss">
// @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");

// :root {
//   --font: Roboto, sans-serif;
//   --textColor: #374961;
//   --linkActiveColor: #41b783;
// }

// #app {
//   font-family: var(--font);
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
//   text-align: center;
//   color: var(--textColor);

//   .logo {
//     width: 20%;
//   }
// }

// .nav {
//   padding: 30px 0 100px 0;

//   a {
//     font-weight: 500;
//     color: var(--textColor);
//     margin: 0 5px;
//   }

//   a.router-link-exact-active {
//     color: var(--linkActiveColor);
//   }
// }
</style>

the scss style is commented out because we don't have a loader to process .scss files yet.

In our main.js file, add this code

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

Now we create three folders in our src folder namely, assets, router, views. In the assets folder, lets add an image and call it logo.png. In the router folder, create an index.js file and add this code in the index.js file

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  routes,
});

export default router;

notice how we imported the about component in the router, this kind of import tells webpack to lazyload the about component.

In our views folder, lets create a file called Home.vue.
N.B: File names should start with capital letter.
Now, let's add this code in our Home.vue file

<template>
  <div id="home">
    <!-- <img class="logo" src="../assets/logo.png" alt="logo" /> -->

    <h1>👋Hello world🌎</h1>
  </div>
</template>

the image is commented out because we don't have a loader to process such file yet.

then add this to our About.vue file

<template>
  <div>
    <h1>This is the about page</h1>
  </div>
</template>

If done correctly, we should have a folder structure that looks like this

babel loader와 vue loader를 사용하기 위한 패키지 설정

Babel loader helps transpile ECMAScript 2015+ code into JavaScript that can be run by older JavaScript engines. While vue loader helps transform vue components into plain JavaScript module.

To configure webpack to use these loaders, we need to create two files namely, babel.config.js, and webpack.config.js.
In the babel.config.js file lets add this code

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage",
        corejs: 3,
      },
    ],
  ],
};

/preset-env helps to detect browsers we want to support so babel loader knows how to go about transpiling our JavaScript code. we would need to add a browserslist option in our package.json file so babel knows what browsers we want to support. So in our package.json file, let's add

  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]

Ideally you would want to compile as little code as possible, so support only relevant browsers. The useBuiltIns and corejs options are for polyfill imports, you can read more about it here .
우리 홈페이지에서구성js 파일에서 이 코드를 추가할 수 있습니다

const { VueLoaderPlugin } = require("vue-loader");
const path = require("path");

module.exports = {
  entry: {
    main: "./src/main.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
  ],
  resolve: {
    alias: {
      vue$: "vue/dist/vue.runtime.esm.js",
    },
    extensions: ["*", ".js", ".vue", ".json"],
  },
};

위의 코드에서 우리는 vue loader에서 Vue Loader Plugin과 경로 모듈을 가져옵니다. 우리는 이 모듈을 사용하여 입구와 출력점을 설정합니다. 이렇게 하면 웹팩은 어디서부터 컴파일하고 컴파일한 코드를 어디에 두는지 알 수 있습니다.VueLoaderPluginhere에 대한 자세한 내용을 볼 수 있습니다.
위의 코드에서 우리는 모듈 옵션을 보았는데, 그 중에서 우리는 몇 가지 규칙을 정의했다. 첫 번째 규칙은 웹 팩에서babelloader를 사용하여 모든 것을 전송하는 것을 알려 주었다.js 확장은 node\umodules 폴더의 모든 내용을 포함하지 않으며, 두 번째 규칙은 웹팩이 vue 불러오는 프로그램을 가지고 있음을 알려줍니다.vue 확장.
위 코드의resolve 옵션은 별명과 확장 키 값이 있습니다. 알리스는 값을 가지고 있습니다. 이것은 vue 별명을 정의하고 상대적인 경로를 사용하지 않는 상황에서 vue 패키지를 가져오는 데 도움을 줍니다. extension은 웹 팩에 가져오는 방법을 알려주고 확장자를 사용하지 않는 상황에서 파일을 가져올 수 있도록 합니다. 더 많은 정보를 읽을 수 있습니다 here.

서버 시작을 위한 스크립트 작성

To see our setup work, we’ll need to write scripts in our package.json file to run the webpack-dev-server. So go into the package.json file and add these to the scripts object.

"build": "webpack --mode production",
"start": "webpack-dev-server --mode development"

Now we can go back to our terminal and run npm run start to start up webpack development server, our project should compile successfully else you can go through the steps again or drop a comment, I’ll be glad to help you out.

N.B: We won't be able to view our project in the browser yet because we haven't configured the htmlWebpackPlugin and webpack doesn't know where to insert our bundle files.

로드 프로그램, 플러그인 및 코드 분할

Loaders and plugins are third-party extensions used in handling files with various extensions. Just like we used vue-loader to handling files with .vue extension, we have loaders and plugins for .scss files, .html files, images, etc.

Basically when you import/require files or modules, webpack tests the path against all loaders and passes the file to whichever loader passes the test. you can read more about loaders here
본고에서 우리는 파일 캐리어,sass 캐리어, css 캐리어, 스타일 캐리어, Clean Webpack Plugin,Mini Css Extract Plugin,html Webpack Plugin,autoprefixer를 사용할 것이다.이 로더 및 플러그인을 설치하기 위해 실행

npm install file-loader sass sass-loader css-loader style-loader postcss postcss-loader autoprefixer clean-webpack-plugin html-webpack-plugin mini-css-extract-plugin -D

파일 로더: 파일 로더는 이미지, 비디오, 글꼴 등의 파일을 처리하는 데 사용됩니다.파일 로더를 사용하려면 이 코드를 패키지에 삽입하십시오.구성js 파일

      {
        test: /\.(eot|ttf|woff|woff2)(\?\S*)?$/,
        loader: "file-loader",
        options: {
          name: "[name][contenthash:8].[ext]",
        },
      },
      {
        test: /\.(png|jpe?g|gif|webm|mp4|svg)$/,
        loader: "file-loader",
        options: {
          outputPath: "assets",
          esModule: false,
        },
      },

사용.css 및.scss 파일: 웹 패키지를 정확하게 처리하는 데 사용됩니다.css 및.scss 파일에서 플러그인의 배열 순서가 중요합니다.우선, 우리는 우리의 웹 패키지에서 MiniCssExtract Plugin과 autoprefixer를 가져와야 한다.구성이와 같은 js 파일

const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const autoprefixer = require("autoprefixer");그리고 이 코드를 저희 패키지의 모듈에 추가합니다.구성js 파일

      {
        test: /\.s?css$/,
        use: [
          "style-loader",
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              plugins: () => [autoprefixer()],
            },
          },
          "sass-loader",
        ],
      },

웹 패키지의 플러그인 부분에서 MiniCssExtract Plugin을 사용해야 합니다.구성이런 js 파일.

    new MiniCssExtractPlugin(),

sass 캐리어:sass 캐리어는 우선 모든 것을 처리하는 데 사용됩니다.scss 파일을 로 컴파일합니다.css 파일.
POSTSS 마운트:sass 마운트 변환이 완료되면scss 파일이 도착합니다.그리고 css 파일,postcss 캐리어,autoprefixer를 사용하여 처리합니다.css 파일, 공급업체 접두사를 css PostCs에 추가합니다.
css 마운트: css 마운트기, 그리고 되돌아오는 css를 도와줍니다.프로젝트에서 가져오거나 필요한 css 파일입니다.
스타일 캐리어: 스타일 캐리어가 css 캐리어가 되돌아오는 css를 가져와 페이지에 삽입합니다.
MiniCssExtractPlugin: MiniCssExtractPlugin은 에서 단독 css 파일을 만드는 데 도움을 줍니다.css 파일 가져오기, 코드 분할에 도움.

htmlWebpackPlugin: 이 플러그인은 인덱스를 자동으로 생성하는 데 도움이 됩니다.html 파일, 그리고 우리의 자바스크립트 패키지를 html 주체에 삽입합니다.html Webpack Plugin을 사용하려면 먼저 웹 패키지를 가져옵니다.구성js 파일

const htmlWebpackPlugin = require("html-webpack-plugin");그리고 다음 코드를 추가하여 플러그인 부분에 플러그인을 사용합니다

    new htmlWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html"),
      favicon: "./public/favicon.ico",
    }),

CleanWebPackagePlugin: 이 플러그인은 구축할 때 가장 가까운 파일로 바꿀 수 있도록 오래된 묶음 파일을 삭제하는 데 도움이 됩니다.이 플러그인을 사용하려면, 우선 웹 페이지로 가져옵니다.구성js 파일

const { CleanWebpackPlugin } = require("clean-webpack-plugin");그리고 다음 코드를 추가하여 플러그인 부분에 플러그인을 사용합니다

new CleanWebpackPlugin(),

이제 홈 페이지에서 주석 이미지 태그를 취소할 수 있습니다.vue 파일 및 응용 프로그램의 scss 스타일입니다.vue 파일, 개발 서버를 시작하고 브라우저에서 프로젝트를 보십시오.

위의 그림은 우리가 프로젝트를 구축할 때의 패키지 크기를 보여 줍니다. 현재 우리의 패키지는 무작위 해시가 없습니다. 이것은 브라우저 캐시에 도움이 되고 공급업체 블록을 만들고 실행할 때 블록을 통해 코드를 더 분할해야 합니다.
css 패키지를 산열하기 위해서 우리는 대상을 전달했다

{

      filename: "[name].[contenthash:8].css",

      chunkFilename: "[name].[contenthash:8].css",

    }

iniCssExtractPlugin의 매개 변수입니다.
우리가 추가해야 할 파일을 산열하기 위해name: "[name][contenthash:8].[ext]",
우리의 파일 로더에 대한 옵션 대상입니다.
우리의 가방을 산열하기 위해서 우리는 추가해야 한다filename: "[name].[contenthash:8].js", chunkFilename: "[name].[contenthash:8].js",
우리의 웹 출력 부분에서.
만약 우리가 지금 프로젝트를 구축한다면, 우리의 가방은 무작위로 흩어져 있을 것이다.

코드 분할은 패키지 크기를 작은 블록으로 줄이는 최적화 기술로 응용 프로그램의 불러오는 시간을 줄이는 데 도움이 된다.웹 팩을 설정하기 위해서 가방을 블록으로 나누기 위해서 웹 팩에 최적화된 부분을 추가해야 합니다.구성js 파일.

  optimization: {
    moduleIds: "hashed",
    runtimeChunk: "single",
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          priority: -10,
          chunks: "all",
        },
      },
    },
  }

위의 코드는 웹팩이 우리node\umodules 폴더에서 실행할 때 블록과 공급업체 블록을 만들고 산열하도록 알려줍니다.현재, 우리가 프로젝트를 다시 구축할 때, 우리는 실행 패키지와 공급업체 패키지를 보아야 한다.

최종 웹 페이지 구성 및 관찰

Our final webpack.config.js file should look like this

const { VueLoaderPlugin } = require("vue-loader");
const htmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const autoprefixer = require("autoprefixer");
const path = require("path");

module.exports = {
  entry: {
    main: "./src/main.js",
  },
  output: {
    filename: "[name].[contenthash:8].js",
    path: path.resolve(__dirname, "dist"),
    chunkFilename: "[name].[contenthash:8].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.(eot|ttf|woff|woff2)(\?\S*)?$/,
        loader: "file-loader",
        options: {
          name: "[name][contenthash:8].[ext]",
        },
      },
      {
        test: /\.(png|jpe?g|gif|webm|mp4|svg)$/,
        loader: "file-loader",
        options: {
          name: "[name][contenthash:8].[ext]",
          outputPath: "assets/img",
          esModule: false,
        },
      },
      {
        test: /\.s?css$/,
        use: [
          "style-loader",
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              plugins: () => [autoprefixer()],
            },
          },
          "sass-loader",
        ],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash:8].css",
      chunkFilename: "[name].[contenthash:8].css",
    }),
    new htmlWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html"),
      favicon: "./public/favicon.ico",
    }),
  ],
  resolve: {
    alias: {
      vue$: "vue/dist/vue.runtime.esm.js",
    },
    extensions: ["*", ".js", ".vue", ".json"],
  },
  optimization: {
    moduleIds: "hashed",
    runtimeChunk: "single",
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          priority: -10,
          chunks: "all",
        },
      },
    },
  },
  devServer: {
    historyApiFallback: true,
  },
};

You can checkout the repo here

관찰: 설정을 마친 후에 저는 vuecli를 사용하여 새로운 vue3 프로젝트를 만들었고 vue3 프로젝트의 패키지 크기를 제가 방금 설정한 프로젝트와 비교한 결과 두 프로젝트의 패키지 크기에 현저한 차이가 없음을 발견했습니다.

이것은 웹 페이지를 설정하는 압력이 정말 무의미하다는 것을 나타낸다.절대 변경이 필요한 것 외에 vuecli만 사용하면 됩니다.
내가 웹 페이지를 설치하는 것은 결코 나쁜 생각이 아니다. 왜냐하면 결국에는 어떤 지식도 잃지 않기 때문이다.👌

Reference

이 문제에 관하여(웹 팩을 사용하여 vue 프로젝트를 설정하는 방법입니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/lavikara/setup-vue-webpack-and-babel-boo

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)