當我們面臨vue-cli 龐雜的代碼，當我們看到種種設置文件的時刻，你是不是會為此以為頭疼，是不是會以為心累？本日，人人能夠隨着我一同，本身來是用webpack 構建一個基於vue單頁面的運用，空話不多，馬上最先：

1.建立項目

npm init 
  

2.建立項目須要的基本文件和文件夾

3.裝置webpack以及一些其他的依靠包

4.設置webpack-base-config.js

5.在 package.json 內里增加 打包敕令，增加 –config 指向 webpack.base.config.js

–在敕令面板中輸入 npm run build
–會在項目中天生一個 dist文件夾

–已天生好打包文件，然則只要js，沒有html，

6.引入 html-webpack-plugin 插件，讓webpack把html也打包進去

再次實行 npm run build 從新天生dist文件夾

html 和 js 都有了，在瀏覽器中翻開html

7.在webpack.dev.config.js 中設置 dev-server 構建當地node效勞器，增加熱布置功用

8.package.json 中,增加 babel-loader babel-core babel-preset-env 依靠包，支撐 es6,增加 server 指令

9.設置 loader ，增加css, js, vue loader，注重，loader加載有先後順序，后加載的放開首，要先相識每一個loader之間的依靠關聯

10.在你的index上增加內容 ，在終端輸入 npm run server 瀏覽器自動翻開頁面，

— 修正main.js

–即可看到 瀏覽器上的內容

至此，單頁面運用已構建好了，接下來我們引入vue相干

11.在 src文件夾下新建 App.vue

—-修正 main.js

—- 檢察瀏覽器報錯了，

辨認不了vue？？ 不是引用了vue-loader嘛

— 別急，原因是 webpack沒有辨認vue模版， 在package.json 中install vue依靠相干的package

末了，在webpack.dev.config.js 增加 vueloaderplugin 插件

重啟效勞，完事了

貼上git 地點， https://github.com/caojide/we…
轉載請說明出處