TidoryContainer

Documents

DocumentsContent

TidoryPatchNote

Tidory 1.2.4

Tidory 1.2.4 버전에는 적지만 여러가지의 변화가 있습니다. 웹팩의 설정변경, layouts 디렉터리 추가와 package.json 구성에 외부 라이브러리 로드를 위한 expose-loader, imports-loader 추가및 효과적인 번들링을 위해 CommonsChunkPlugin 플러그인 사용이 추가되었습니다.

Tidory/layouts/*.pug

전역 레이아웃을 침범하지 않도록 레이아웃이 따로 분리되었습니다. 이제 layouts 폴더에 레이아웃이 들어가며 default.pug파일이 기본 레이아웃입니다. index.pug에는 다음과 같이 포함됩니다.
 index.pug

extends ./layouts/default

block head
	// Open Graph protocol
	meta(property="og:description", 
		content="Tidory Framework for Tistory Skin")
	meta(property="og:title", content="Tidory")
	meta(property="og:site_name", content="Tidory")
	meta(property="og:url", content="http://tidory.com")

block TISTORY
	include templates/HelloWorld

block scripts
	// jQuery
	// script(src="https://code.jquery.com/jquery-3.2.1.js")

Tidory/layouts/default.pug

기본 레이아웃에 block이 추가되었습니다 HEADhead태그에 속하며 FOOTER는 모든 수동 삽입 에셋(*.bundle.js)아래에 배치되었습니다. 또한 TISTORY 블럭에는 스킨의 메인이 들어갑니다.
 layout/default.pug

doctype html

html(lang="ko")
	head
		//- BLOG NAME
		title Tidory 
		//- TISTORY RSS
		link(rel="alternate", type="application/rss+xml", 
				title="[##_title_##]", 
				href="[##_rss_url_##]")
		//- Only for PRODUCT
		link(rel="stylesheet" href="./style.css")
		block head
	body
		//- TISTORY CONTAINER
		s_t3
			div#__tidory
				block TISTORY

	//- Only for PRODUCT
	script(type="text/javascript", 
		src="./images/tidory.vendor.bundle.js")
	script(type="text/javascript", 
		src="./images/tidory.bundle.js")
	block scripts

Tidory/build/webpack.base.conf.js

url-loader를 사용하는 것이 더 좋으나, CSS의 크기가 방대해지는 상황이 생겨 티스토리에 스킨 업로드가 불가능한 상황이 발생합니다. 따라서 file-loader를 그대로 사용합니다.
 webpack.base.conf.js

module.exports = {
	module: {
		rules: [
			{
				test: /.(png|jpe?g|gif|svg)(?.*)?$/,
				loader: 'file-loader',
			},
			{
				test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
				loader: 'file-loader',
			},
			{
				test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
				loader: 'file-loader',
			},
			//...
		]
	}
}

Tidory/build/webpack.prod.conf.js

CommonsChunkPluginmain.js등에서 별도로 로드된 파일(jQuery...)을 메인 번들파일과 분리시킵니다. tidory.vendor.bundle.js파일로 번들링됩니다.
 webpack.prod.conf.js

module.exports = {
	plugins: [
		new webpack.HashedModuleIdsPlugin(),
		new webpack.optimize.CommonsChunkPlugin({
			name: config.build.chunkFilename,
			minChunks: function (module) {
			  return (
				module.resource &&
				/.js$/.test(module.resource) &&
				module.resource.indexOf(
				  path.join(__dirname, '../node_modules')
				) === 0
			  )
			}
		}),
	]
}

Tidory/package.json

package.json 파일에 2가지의 로더가 추가되었습니다. expose-loader, imports-loadermain.js에서 라이브러리를 로드하기 위해 추가되었습니다. 두 로더는 webpack에 대한 전반적인 지식이 있어야합니다.
 package.json

"devDependencies": {
	//...
	"expose-loader": "^0.7.4",
	"imports-loader": "^0.7.1"
}
jQuery와 같은 외부 라이브러리를 HTML에서 직접포함하는 방식으로 불러오는 방식 대신에 main.js에서 다음과 같이 포함할 수 있습니다! 이는 번들링된 싱글파일을 불러오는 것으로 배포되므로 로딩성능이 향상됩니다.
 main.js
			
import "expose-loader?$!expose-loader?jQuery!jquery"