使用webpack手動搭建一個基於vue的單頁面應用

當咱們面對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...轉載請註明出處