뷰 프로젝트 세팅 가이드

https://msko.tistory.com/65

Vue CLI 없이 Wepack으로 프로젝트 구성(+ ESLint)

 

{
  "name": "vue-setting",
  "version": "1.0.0",
  "description": "bolier settings for vue",
  "main": "index.js",
  "scripts": {
    "start": "SET NODE_ENV=development & webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "keywords": [
    "vue",
    "bolier",
    "settings"
  ],
  "author": "leepro",
  "license": "ISC",
  "dependencies": {
    "vue": "3.2.29"
  },
  "devDependencies": {
    "@babel/core": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "@vue/compiler-sfc": "3.2.29",
    "babel-loader": "^8.2.3",
    "copy-webpack-plugin": "^10.2.4",
    "css-loader": "^6.6.0",
    "html-webpack-plugin": "^5.5.0",
    "sass-loader": "^12.4.0",
    "style-loader": "^3.3.1",
    "vue-loader": "17.0.0",
    "vue-style-loader": "4.1.3",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
}

 

 

const path = require("path");
const HTMLPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
  entry: "./src/index.js",
  output: {
    clean: true,
    path: path.resolve(__dirname, "dist"),
    filename: "index_build.js",
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: "vue-loader",
      },
      {
        test: /\.s?css$/,
        use: ["vue-style-loader", "style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.js$/,
        use: ["babel-loader"],
      },
      {
        test: /\.(ico|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot|otf)(\?v=[0-9]\.[0-9])?$/,
        use: [
          {
            loader: "url-loader",
            options: {
              name: "[hash].[ext]",
              limit: 10000,
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [
      ".wasm",
      ".mjs",
      ".js",
      ".jsx",
      ".ts",
      ".tsx",
      ".json",
      ".vue",
    ],
  },
  plugins: [
    new HTMLPlugin({
      template: "./public/index.html",
    }),
    // new CopyPlugin({
    //   patterns: [{ from: "static" }],
    // }),
    new VueLoaderPlugin(),
  ],
  devServer: {
    host: "localhost",
  },
};