無聊看看

發表文章

目前顯示的是 9月, 2017的文章

webpack第二堂-使用設定檔

前言我以官方的文件來介紹webpack設定檔，希望這種方式可以讓剛接觸webpack深入淺出的明白webpack設定檔的意義和目的。設定檔介紹經過第一堂的介紹，我們不可能每次都使用指令的方式來打包JS檔，如果當功能複雜時或是特定的需求時，是很難用使用指令完成開發任務的，所以webpack提供設定檔(預設檔名:webpack.config.js)的方式可以讓開發者方便進行編譯設定概念 Entry (進入文件) 首先webpack在打包時會先建立你應用程式所有使用到其他模組相依關聯的圖形，但是需要先指定圖形的進入點(entry point)，這個進入點的作用是告訴webpack從哪裡開始並且告訴他如何打包，你把進入點想成一個 contextual root or the first file to kick off your app [官方翻譯]. 範例1. 設定檔: webpack.config.js (webpack預設) module.exports = { entry: './app.js' }; 語法說明: entry為設定編譯的進入文件 Output (目的檔) 當你打包JS文件時，需要告訴webpack最後產出的檔案，所以這個參數output如何用甚麼方式產出目的檔，output.path和output.filename屬性是告訴如何打包後的路徑和名稱範例2. 設定檔: webpack.config.js (webpack預設) const path = require('path'); module.exports = { entry: './app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'app.bundle.js' } }; Loaders(載入器) 因為webpack只會載入.js檔，所以需要搭配loaders會將專案的檔案(.css, .html, .scss, .jpg 等)視為一個個的模組，所以loaders功...

閱讀完整內容

webpack第一堂-初體驗

學習webpack動機想要學習webpack原因是，當我接觸vue開發SPA時，網路上大家推崇使用webpack開發可以優化JS腳本，webpack的強大功能讓我更專注開發。 webpack 介紹官網: webpack官網官方文件: webpack document Webpack 是一個模組打包器( module bundler) ，簡單來說webpack是可以將你網頁呼叫到相關模組的函示，打包並編譯成一個最小化的檔案，並讓他在任何瀏覽器都可以正常執行。 Webpack 是德國開發者 Tobias Koppers 建置模組化工具，他同時支援AMD、CMD的規則，他有下列特性代碼分割同步:編譯時會直接把打包輸出文件異步: 單獨生成一個代碼，只有在運行時才會載入載入器在預設下，只可以打包JS文件，但是通過載入器也可以將其他類型的文件轉成JS文件插件當webpack功能不能滿足我們需求，可以安裝插件擴充功能實作安裝webpack 全局安裝 $ npm install webpack -g 建立專案 $ npm init 最後，在專案中安裝webpack並寫入package.json $ npm i webpack --save-dev 第一次使用就上手我們件ㄌㄧ簡單的範例，使用 example |-app.js |-cats.js 範例: app.js 主要編譯入口文件 cats = require("./cats.js") console.log(cats) 範例: cats.js var cats = ['dev1','2222','333'] module.exports = cats 我們在node命令中心執行打包的指令指令 : webpack 入口文件.js 輸出文件.js webpack ./app.js app.bundle.js node執行app.bundle.js看看結果如何 webpack app.bundle.js 結果: [ ‘dev1’, ‘2222’, ‘333’ ...

閱讀完整內容

Vue(1)－崛起

Vue崛起 Vue在2014年被發佈，在沒還發布之前，不管是angular2和React都會使開發者，花費不少時間學習，然而Vue出現，有著好的設計MVVM模式與最小的儲存容量，讓開發者不需要花太多時間學習就可上手並且不會占用瀏覽器太大的空間。這些特性讓他在2016年擁有驚人的 89％的開發人員滿意度評估。 Vue範例檔案結構 ex1 / |- dist |-app.bundle.js |- app.js |- app.html |- webpack.config.js |-package.json 首先必須要安裝nodejs環境，並且新增一個專案 $> npm init 安裝Vue套件，加入package.json $>npm install vue –save-dev 新增 app.js import Vue from 'vue' new Vue({ el:"#app", template:"<div>Hellow world!</div>" }) 新增 app.js <html> <body> <div id="app"></div> </body> <script src="dist/app.bundle.js"></script> </html> webpack設定檔: webpack.config.js const path = require('path'); module.exports = { entry: './app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'app.bundle.js' ...

閱讀完整內容