// package.json : build 명령어 추가
"scripts": {
"build": "webpack --watch",
},
// webpack.config.js
// entry객체 내에 app의 path.join 지정
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode: 'production',
entry: { // app => 합쳐질 파일명, main.js => webpack으로 build 할 파일
app: path.join(__dirname, 'main.js')
},
module: { // rules를 통해 '.vue'로 끝나는 파일은 vue-loader를 사용하겠다고 정의
rules: // 이유: webpack은 기본적으로 javascript를 처리 App.vue 파일은 javascript 파일이 아니기 때문에, vue-loader가 처리하게 만듬
[{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader']
}
]},
plugins: [ // vueloader plugin을 사용하기 위해 vue-loader plugin 모듈을 가져옴
new VueLoaderPlugin()
],
output: { // build결과물에 대한 정보.
filename: 'app.js', // build 파일명
path: path.join(__dirname, 'dist') // 파일이 저장될 디렉터리 지정
}
}
기타
node.js 와 vue.js 에서 모듈들을 삽입하는 방식의 차이. require, import...
// In node.js
require, module.export
// In Vue.js
import, export default
이렇게 직접 하나씩 module들을 다운로드 하고 삽입하는 것은 vue-cli가 잘나와서 굳이 필요하다고는 생각치 않는다. 하지만 프로젝트 기본을 설정하는 webpack.config.js 를 어떻게 구조화하는지에 따라 명령어에 따라 에러가 발생할 수도있다는 것을 한 번 더 느끼게 해주었고, vue의 config가 어떤 식으로 돌아가는 지 이해가 더 잘되었다.
그간 프로젝트 만들고 에러 해결해 나가는 것에 급급해 했지만, 하나씩 기초를 다질 때가 된 것 같아 이렇게 webpack에 대해 알아보았다.
예전에 bootstrap css-framework를 사용하면서 dist가 무엇인가? 에 대해 의문을 가졌지만 그 때에는 그것보다 구현하는데에 급급했기에 넘어갔지만, 이번 기회에 dist가 왜 발생하고, 어떤 식으로 프로젝트를 구성하는지에 대해 좀 더 잘 알 수 있었다.
WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
webpack.config.js 에 어떤 모드로 프로젝트를 설정한것인지 기재를 안해놓았기 때문이다.
그렇기에 mode: 'production' 혹은 'development' 를 추가해주면 된다.
