처음하는개발
181
2021-07-19 22:18:34
7
287

Vue공부하는초보 webpack 질문있습니다.


인강을보며 vue 공부중인데 막히는부분이 있어서 질문드립니다 ㅠㅠ

webpack --mode production  시 문제가 있습니다..

npm i -D webpack webpack-cli로 설치는 하였습니다 

그이후에 webpack.config.js 파일을 다음과 같이 설정하였습니다.

const path = require('path')

module.exports = {
    entry: {
        app: path.join(__dirname,'main.js')
    },
    output:{
        filename: '[name].js',
        path: path.join(__dirname,'dist')
    },
    module: {},
    plugins: []
}


이후에 webpack --mode product 명령어를 사용했는데 사진과같이 app.js가 그대로입니다..

강의자료를 보면

!fcuntion(e){var t={};function n(r){if(t[r])retrun t[r],exports;var o=t[r].....{console.log('hello webpack")}]);

이런식으로 떠야하는데 저는 하나도 바뀌질 않았습니다 ㅠㅠ 에러메세지 같은것도 없어서 어떻게해야 할지 감도 안잡힙니다..

선배님들의 도움을 절실히 요청합니다!!



0
  • 답변 7

  • 하하121
    469
    2021-07-19 22:40:12

    var 이 있는거 보니까 옛날 버전인거같은데요. 강의자료에 버전 안적혀있나요

  • 처음하는개발
    181
    2021-07-19 22:45:39 작성 2021-07-19 22:48:37 수정됨

    강의는 vuejs 2.6.10버전 / nodejs 10.15.0 / npm 6.5.0버전입니다

    버전이 다른건 고려하지못햇습니다. 

    저는 

    vue 2.6.14버전

    nodejs 14.16.0 버전

    npm 6.14.11버전입니다.

    혹시 버전이 달라서 문제가 생긴걸까요??


  • 돌덩이
    173
    2021-07-19 22:51:40 작성 2021-07-19 22:52:58 수정됨

    devtool 속성을 추가해보세요


    ex) devtool : 'eval'


    devtool 문서

  • 처음하는개발
    181
    2021-07-19 22:58:08 작성 2021-07-19 22:58:30 수정됨
    const path = require('path')

    module.exports = {

        entry: {
            app: path.join(__dirname,'main.js')
        },
        output:{
            filename: '[name].js',
            path: path.join(__dirname,'dist')
        },
        module: {},
        plugins: [],
        devtool : 'eval'
    }

    다음과 같이 webpack.config.js에 추가하는것이 맞는건지 모르겠지만 일단추가해보고 

    webpack --mode production 명령어실행했습니다.



    명령실행결과 다음과같이 app이 바뀌었는데 강의와 형태가 조금 다른긴한데 처음이라 이게된건지 긴가민가합니다 webpack적용이 된건지 궁금합니다!!

  • 돌덩이
    173
    2021-07-19 23:38:08

    먼저 웹팩 버전 4로 바꾸시구요!

    npm i webpack@4.46.0 -D


    난독화 라이브러리 설치 하시고

    npm install uglifyjs-webpack-plugin -D




    ------



    const path = require('path');
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

    module.exports = {
    mode: 'production',
    entry: {
    app : path.join(__dirname, 'index.js'),
    },
    output: {
    filename: '[name].js',
    path: path.join(__dirname, 'dist'),
    },
    optimization: {
    minimizer: [new UglifyJsPlugin()],
    },
    }





  • 처음하는개발
    181
    2021-07-20 00:02:00

    답변감사합니다 강의가 작년강의라 그런지 안맞는부분이 좀있네요 ㅠㅠ

    그래도 답변덕분에 해당문제해결했습니다 감사합니다 !!!

  • 프레드윰
    1k
    2021-07-20 01:23:49

    저는 세팅 하는데 최소 나흘에서 오일 정도 걸렸네요 

    근데 생각해보면 그냥 단순한 공부용이면 웹팩 안하고 cli로 하면 되요 

    특별한거 만들지 않고서는 허송세월 저것만 가지고 신경 쓰지 않으면 좋겠어요~

  • 로그인을 하시면 답변을 등록할 수 있습니다.