질문을 삭제하지 말아주세요.!
 
1
0
-1

라라벨 5.4 버전에 맞춰서 webpack.mix.js 를 아래와 같이 설정 했습니다.

const { mix } = require('laravel-mix');

mix.sass('resources/assets/sass/app.scss', 'public/css');

mix.js([
	'node_modules/highlightjs/highlight.pack.js',
	'resources/assets/js/app.js',
	'node_modules/dropzone/dist/dropzone.js',
	'node_modules/marked/lib/marked.js',
	'node_modules/jquery-tabby/jquery.textarea.js',
	'node_modules/autosize/dist/autosize.js',
	'resources/assets/js/forum.js'
], 'public/js');

mix.version([
    'public/css/app.css',
    'public/js/app.js'
]);

mix.copy('node_modules/font-awesome/fonts', 'public/fonts');


우선은 npm run dev는 정상적으로 실행되는데 

작업중인 앱을 키면 이런 오류가 뜹니다.  저기 './bootstrap' 은 아래처럼 app.js와 같이있는데 './bootstratp'처럼 하는게 맞는지요..?

그리고 또 한가지는 webpack설정이 잘못된건지 원래 맞는건지 모르겟는데 npm run dev를 하면 아래 사진과 같이 지저분 하게 됩니다.

실제 <link href="{{ mix('/css/app.css') }}" rel="stylesheet">가 적용된것을 보면 public/css/app.5d9cb01~~ 이 링크되는것 같은데.. 이게 맞나요ㅠㅠ? 그럼 저기위에 bulid파일은 무엇이고 css 와 js 파일은 무엇인가요...

원래 gulp 써서 어떻게어떻게 되었는데 webpack으로 바꾸고 나서는 bootstrap도 안되고...어딘가 꼬인거같습니다. 도와주세요ㅠ


    CommentAdd your comment...

    2 answers

    1.  
      1
      0
      -1

      제가 윈도우 10에서 수정/빌드한 파일을 올려 놓습니다.

      zipped.zip

        CommentAdd your comment...
      1.  
        1
        0
        -1

        여기에 계속 머물러 있기 보다는, 이 부분을 건너 뛰고 다음으로 진행하실 것을 권장합니다. 이 부분이 몰라도 뒷 부분을 진행하는데 아무런 문제가 없습니다. 그리고, 끝까지 진행하고 다시 돌아와 보면 지식(디버깅) 수준이 높아져서 쉽게 해결할 수도 있을 수도 있습니다.

        결국은 책에 장식을 넣은 제 잘못인데, 지금 용준님이 겪고 있는 문제는 본질을 벗어난 장식에 해당한다고 생각합니다. 본질은 "클라이언트에서 파일을 업로드할 수 있고, 서버는 업로드한 파일을 처리할 수 있다"입니다. 드롭존과 FE 빌드도구는 장식입니다.

        집에 와서 윈도우 머신에서 예제코드를 받아, 5.3에서 만든 package.json과 Node.js(Elixir) 의존 트리를 제거하고, 5.4용의 Node.js 덩어리를 설치하고 해 봤는데 문제없이 잘됩니다 (라라벨과 Node.js는 라라벨 사이드의 elixir(), mix() 함수만 다를 뿐 상호 독립적입니다. 즉 5.4에서 elixir를 사용할 수 있고, 5.3에서 mix를 사용할 수 있어야 합니다).

        아래 그림들 때문에 또 여기에 머물러 있지 말기 바랍니다. 그리고 웹팩은 이 책의 주제가 아니고, 저도 모르므로 알려 드릴 수 없습니다.








          CommentAdd your comment...