Download as PDF, PPTX
![> npm install -g browserify
> browserify [src] -o > [dist]](https://image.slidesharecdn.com/vuep-160826012921/75/Vue-19-2048.jpg)
![> 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"
}
}](https://image.slidesharecdn.com/vuep-160826012921/75/Vue-35-2048.jpg)
![vue-style!css![options]!rewriter(postcss)
Source Code
• autpprefixer
• scoped
• postcss + cssnext](https://image.slidesharecdn.com/vuep-160826012921/75/Vue-52-2048.jpg)
Uploaded byandyyou
Vue 淺談前端建置工具
This document summarizes key aspects of using Vue with webpack including: 1. Configuring webpack to handle Vue components, stylesheets, and assets using loaders like vue-loader and css-loader. 2. Setting up hot reloading for Vue components using vue-hot-reload-api and webpack-dev-server. 3. Additional tools that can be used with Vue and webpack like vue-cli, babel, and plugins.
![第一次用 Vue.js 就愛上 [改]](https://cdn.slidesharecdn.com/ss_thumbnails/vuejs-160518081021-thumbnail.jpg?width=640&height=640&fit=bounds)
Vue 淺談前端建置工具
- 1.
- 2.
- 3. • • • webpack • vue-loader •vue-cli • vue templates (webpack) •
- 4. • HTML • CSS •Javascript • Assets(Images, Fonts) EB
- 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
- 8.
- 13. > ls -al| grep whoami pipe
- 14.
- 15.
- 16.
- 18.
- 19. > npm install-g browserify > browserify [src] -o > [dist]
- 20.
- 21. • • • ES6Module Loader Polypill • SystemJS Universal Dynamic Module Loader Any type of module format can be loaded and it will be detected automatically by SystemJS.
- 22.
- 24.
- 25.
- 26. • npm + •grunt, gulp • requires, browserify • webpack + ( ) • jspm + + + ( ) • rollup, fly,
- 27. webpack • • / (2014) • • •HRM • loaders & plugins • Code Splitting (sync, async chunk) • •
- 28. webpack • • / • • • HRM •loaders & plugins • Code Splitting (sync, async chunk) • •
- 29.
- 30.
- 31.
- 32.
- 33.
- 34. # npm/nvm > mkdirvuedinner && 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" } }
- 36. 1. index.html 2. main.jsindex.js 3. 4. webpack
- 37.
- 38. > npm icss-loader style-loader file-loader -D !
- 39. > webpack main.jsbundle.js —output-public-path=‘/dist/' --module-bind 'css=style!css' --module-bind 'png=file'
- 41.
- 42. > npm iwebpack-dev-server -D
- 43. • dll • css( ) • , , , • HTML5 Cache mainfest • Offline (ServiceWorker) • HRM • s3 • plugins
- 44.
- 45. 1. 2. webpack.config.js 3. .babelrc 4.( Vue.js) https://github.com/babel/babel-loader
- 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
- 48.
- 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>
- 52. vue-style!css![options]!rewriter(postcss) Source Code • autpprefixer •scoped • postcss + cssnext
- 53.
- 55. vue-loader loader webpack loaderjade-loader function HTML String jade jade-loader
- 56. • file-loader • url-loaderbase64 HTTP request url(image.png) > require(‘file!./image.png')
- 58. > npm ivue-loader vue-html-loader vue-style-loader vue-hot-reload- api@1 -D # 1. webpack.config.js # 2. main.js app.vue
- 59. > webpack-dev-server --inline--hot Hot Module Replacement / Hot Reload
- 60. webpack-dev-server • Iframe mode http://localhost:8080/webpack-dev-server/index.html •Inline mode webpack-dev-server client entry bundle
- 61.
- 64.
- 66.
- 67.
- 68.
- 70. vue-loader vue-cli > npm install-g vue-cli > vue init <template-name> <project-name> > vue init webpack v-project
- 71.
- 72. webpack dev middlewareplugins • webpack dev middleware • webpack hot middleware • html-webpack-plugin • html-webpack-template • extract-text-webpack-plugin
- 73.