Vue 淺談前端建置工具

•
•
• webpack
• vue-loader
• vue-cli
• vue templates (webpack)
•

• HTML
• CSS
• Javascript
• Assets(Images, Fonts)
EB

• HTML - Templates
• CSS - Sass, Less, PostCSS
• Javascript - Compile To Javascript
•
•
•
• Lint
• Debug Tools

• Bower, npm
• Browserify, RequireJS
• Grunt
• gulp, ﬂy
• Brunch
• webpack
• jspm
• rollup

gulp.src(paths.scripts)
.pipe(sourcemaps.init())
.pipe(coffee())
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('build/js'));

> npm install -g browserify
> browserify [src] -o > [dist]

• •
• 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.

• npm +
• grunt, gulp
• requires, browserify
• webpack + ( )
• jspm + + + ( )
• rollup, ﬂy,

webpack
•
• / (2014)
•
•
• HRM
• loaders & plugins
• Code Splitting (sync, async chunk)
•
•

webpack
•
• /
•
•
• HRM
• loaders & plugins
• Code Splitting (sync, async chunk)
•
•

•
•
•
•
•
•
•
webpack

vue with webpack
http://j.mp/2bzJl36

# npm/nvm
> mkdir vuedinner && cd vuedinner
> npm init -y
> npm i webpack -D
https://github.com/andyyou/vue-dinner-demo

> 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"
}
}

1. index.html
2. main.js index.js
3.
4. webpack

> npm i css-loader style-loader ﬁle-loader -D
!

> webpack main.js bundle.js —output-public-path=‘/dist/'
--module-bind 'css=style!css' --module-bind 'png=ﬁle'

• dll
• css ( )
• , , ,
• HTML5 Cache mainfest
• Ofﬂine (ServiceWorker)
• HRM
• s3
•
plugins

1.
2. webpack.conﬁg.js
3. .babelrc
4. ( Vue.js)
https://github.com/babel/babel-loader

# 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

• <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

src CommonJS require
• ./
• module/dist/all.css npm
<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

vue-style!css![options]!rewriter(postcss)
Source Code
• autppreﬁxer
• scoped
• postcss + cssnext

vue-hot-reload-api 2.0.6
Hot Reload

vue-loader loader
webpack loader jade-loader
function HTML String jade
jade-loader

• ﬁle-loader
• url-loader base64 HTTP request
url(image.png) > require(‘ﬁle!./image.png')

> npm i vue-loader vue-html-loader vue-style-loader vue-hot-reload-
api@1 -D
# 1. webpack.conﬁg.js
# 2. main.js app.vue

> webpack-dev-server --inline --hot
Hot Module Replacement / Hot Reload

webpack-dev-server
• Iframe mode
http://localhost:8080/webpack-dev-server/index.html
• Inline mode
webpack-dev-server client entry bundle

--hot
—hot = HotModuleReplacementPlugin

https://github.com/webpack/webpack-dev-server/blob/
2eef9e64e4528dfda756d61c627d4b5a49bbae8e/bin/
webpack-dev-server.js#L240-L257

https://medium.com/@rajaraodv/webpack-
the-confusing-parts-58712f8fcad9#.
6z7z6wx8q

vue-loader
vue-cli
> npm install -g vue-cli
> vue init <template-name> <project-name>
> vue init webpack v-project

webpack dev middleware plugins
• webpack dev middleware
• webpack hot middleware
• html-webpack-plugin
• html-webpack-template
• extract-text-webpack-plugin

Vue 淺談前端建置工具

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Vue 淺談前端建置工具

Similaire à Vue 淺談前端建置工具 (20)

Dernier

Dernier (20)

Vue 淺談前端建置工具