Webpack ＋ Vue 多頁面前端渲染工程化

1. 項目初始化

1.1 通過 easywebpack-cli 腳手架初始化

1. 安裝腳手架 npm install easywebpack-cli -g 命令行，然後就可以使用 easywebpack 或 easy 命令
2. 命令行運行 easywebpack init or easy init
3. 選擇 create client render project boilerplate for Vue/React/Weex 初始化骨架項目
4. 選擇 create vue client render boilerplate
5. 安裝依賴 npm install

1.2 通過骨架項目初始化

git clone https://github.com/hubcarl/easywebpack-cli-template.gitncd easywebpack-cli-template/boilerplate/vue 下面nnpm installn

初始化的項目提供多頁面和SPA(vuex+axios)服務端渲染實例，可以直接運行。

1.3 運行和編譯

• 運行

npm startn

執行 npm start 進行 Webpack 編譯， 編譯完成自動打開瀏覽器和編譯結果導航，可以點擊訪問。

• 編譯

npm run build n

編譯文件默認放到項目根目錄的 public 目錄

2. 項目結構說明

page下面有三個頁面入口，最終將構建 3 個 html 文件， 開發時，只需要在 page 目錄下添加 .vue文件即可。page下面的所有 .vue 文件將作為 webpack entry 文件，然後構建出 html 文件。

2.1 特性支持

• 支持單頁面和多頁面 entry 配置
• 支持根據目錄遍歷， 項目page根目錄為 page
• 支持根據 .vue 構建入口文件
• 支持熱更新，支持 css extract， 支持 css和sass (默認支持)，支持構建預覽
• 支持 cdn 配置，支持構建完成回調用於編寫自定義邏輯
• 支持公共文件抽取，抽取文件默認為 vendor.js
• 支持 es6 編寫
• 支持 js/css/image 壓縮和 hash
• 支持 eslint，babel， postcss
• 支持 dev (不壓縮，無hash，支持熱更新)和 prod (壓縮 hash，css exteract） 配置
• 支持eslint，babel， postcss 和 autoprefixer 是默認開啟

2.2 配置說明

項目根目錄下的 ${project}/webpack.config.js 文件為 easywebpack-cli 構建配置入口，自動根據 framework:vue 配置匹配到 easywebpack-vue 構建解決方案構建。

const BUILD_ENV = process.env.BUILD_ENV;nconst cdn = BUILD_ENV === prod ? { url: http://your.cdn.com} : ,nmodule.exports = {n type: client, // 指定只構建前端渲染n framework: vue, // 指定用 easywebpack-vue 構建n entry: {n // 指定了 framework欄位和loader配置，將自動遍歷 page 目錄下的所有.vue 文件構建 entry 入口n // 支持數組或者key:value entry形式n // loader=false 表示不使用 下面loader模板，因為這裡的app/app.js是一個單頁面Example，實現方式與普通的多頁面入口不一樣n include: [page, { app/app: page/app/app.js?loader=false }],n exclude: [page/test], // 排除某些文件，支持正則表達式n template: view/layout.html, // 這裡為構建 html 文件模板n loader: { // .vue 文件 entry 構建 loader 模板n client: framework/vue/entry/client-loader.jsn }n }n alias: {n asset: asset,n component: component,n framework: framework,n store: storen },n cdn,n create(){n // call api methodn }n done(){ // 編譯完成n // 這裡可以做你想做的事情喲，比如打包上傳 CDNn if(cdn && cdn.url){n }n }n}n

只需要配上面這麼多， 就可以 Running 了，因為 easywebpack-vue 把 babel，postcss，sass都默認支持了，當然你可以擴展。

• 命令行啟動運行

npm start 或 easy server 或 easy server devneasy server prod n

• 命令行編譯，默認開發模式

easy build 或 easy build devneasy build prodn

• 獲取 Webpack 配置結果

const EasyWebpack = require(easywebpack-vue);nconst webpackConfigList = EasyWebpack.getWebpackConfig() n

3. 功能開發

只需要在 page 目錄下添加 .vue 文件即可。page下面的所有 .vue 文件將作為 webpack entry 文件，然後構建出 html 文件. 你可以通過 webpack.config.js 的 include 遍歷目錄以及exclude排除entry文件入口。

4. 相關文檔

• easywebpack-cli
• easywebpack-vue
• easywebpack使用文檔

推薦閱讀：