More Related Content Similar to Vue 淺談前端建置工具 (20) 5. • HTML - Templates
• CSS - Sass, Less, PostCSS
• Javascript - Compile To Javascript
•
•
•
• Lint
• Debug Tools
7. • Bower, npm
• Browserify, RequireJS
• Grunt
• gulp, fly
• Brunch
• webpack
• jspm
• rollup
21. • •
• ES6 Module Loader Polypill
• SystemJS Universal Dynamic Module Loader
Any type of module format can be loaded and it will
be detected automatically by SystemJS.
26. • npm +
• grunt, gulp
• requires, browserify
• webpack + ( )
• jspm + + + ( )
• rollup, fly,
34. # npm/nvm
> mkdir vuedinner && cd vuedinner
> npm init -y
> npm i webpack -D
https://github.com/andyyou/vue-dinner-demo
35. > webpack <entry> <output>
> webpack e1.js e2.js bundle.js
> webpack andyyou=./entry.js "[name].js"
>> output a andyyou.js file.
// webpack.config.js
module.exports = {
output: {
filename: "[name].bundle.js"
}
}
38. > npm i css-loader style-loader file-loader -D
!
39. > webpack main.js bundle.js —output-public-path=‘/dist/'
--module-bind 'css=style!css' --module-bind 'png=file'
43. • dll
• css ( )
• , , ,
• HTML5 Cache mainfest
• Offline (ServiceWorker)
• HRM
• s3
•
plugins
46. # webpack: webapck
# webpack-dev-server:
# webpack-merge: (webpack.config.js)
# css-loader: css
# style-loader: css html
# file-loader:
# url-loader: base64
# babel-core: ES2015 babel
# babel-loader: ES2015
# babel-plugin-transform-runtime: polyfilling ( babel-runtime)
# babel-preset-es2015: es2015
# babel-preset-stage-0:
# babel-runtime: ES2015+ helpers, polyfilling
`class MyClass {}` -> `_classCallCheck` AST
# vue-loader: vue
# vue-html-loader: vue template
# vue-style-loader: vue
# vue-hot-reload-api: Hot reload API for Vue components
50. • <template>
• HTML
• vue <template>
•
• <script>
• javascript ES2015 Babel
• vue <script>
• JS CommonJS require
• import ES2015
• script Vue - Vue.extend()
• <style>
• css
• <style>
• `sytle-loader` <head> <style>
• webpack css
51. src CommonJS require
• ./
• module/dist/all.css npm
<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>
58. > npm i vue-loader vue-html-loader vue-style-loader vue-hot-reload-
api@1 -D
# 1. webpack.config.js
# 2. main.js app.vue
72. webpack dev middleware plugins
• webpack dev middleware
• webpack hot middleware
• html-webpack-plugin
• html-webpack-template
• extract-text-webpack-plugin
