[Vue.js] 使用NPM建立Webpack開發環境

1. 安裝node.js

2. 建立Project資料夾

3. 初始化Project

npm init -y

4. 使用npm安裝webpack&webpack-cli

npm install webpack webpack-cli --save-dev

5. 安裝 Vue

npm install vue

6. 安裝babel-core & babel-loader

npm install babel-core babel-loader --save-dev

7. 安裝 babel-preset-env & babel-preset-vue

npm install babel-preset-env babel-preset-vue --save-dev

8. 安裝 Vue-loader相關套件

npm install vue-loader vue-style-loader css-loader file-loader vue-template-compiler --save-dev

9.設定 package.json

10. 在Project資料夾下建立src & dist 資料夾

11. src 下建立 index.js

12. dist下建立 index.html

13. 來打包~

npm run build

FAQ

• 若發現Project資料夾內沒有 package.json，就是忘記初始化Project。

npm init -y

• 解決 ERROR in Entry module not found: Error: Can’t resolve ‘babel-loader’

install babel-loader --save

Ref : 手動建置一個Webpack-Vue的開發環境