官方文檔:https://www.webpackjs.com/concepts/javascript
本質上,webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時,它會遞歸地構建一個依賴關係圖(dependency graph),其中包含應用程序須要的每一個模塊,而後將全部這些模塊打包成一個或多個 bundle。css
# 全局下載webpack的3.12.0版本 npm install webpack@3.12.0 -g # 查看版本 webpack -v
# 把main.js 打包成 bundle.js webpack ./main.js ./bundle.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"></div> <!-- bundle.js是經過webpack編譯打包輸出的js文件 --> <script type="text/javascript" src="./bundle.js"></script> <!-- webpack ./main.js ./bundle.js --> <!-- 這種語法瀏覽器不兼容 --> <!-- <script type="text/javascript"> import Vue from './vue.js' </script> --> </body> </html>
// 聲明入口的組件 var App = { template:`<div>我是入口組件</div>` }; // 聲明並導出 export var num = 2; //做爲一整個對象的key拋出 // 聲明在導出 var num2 = 4; export {num2} // 拋出一個函數 export function add(x,y) { return console.log(x+y); } // 先拋出 export default App;
// 整個程序的入口 // 引入第三方的庫 es6Module模塊導入方法 import Vue from './vue.js' //再導入 // import App from './App.js' // 對象的解構 // import {num,num2,add} from './App.js' import * as object from './App.js' console.log(object); // console.log(num); // console.log(num2); // add(3,5) new Vue({ el:"#app", data(){ return { } }, components:{ App:object.default }, template:`<App />` });
// 引入第三方的庫 es6Module模塊導入方法 import Vue from './vue.js'
new Vue({
el:"#app",
data(){
return {
}
},
components:{
App:object.default
},
template:`<App />`
});
# 進入當前的根目錄下,執行 npm init --yes # 下載webpack爲項目開發依賴 npm install webpack@3.12.0 -D # 建立webpack.config.js module.exports = { // entry 入口 // output 出口 entry:{ main: './main.js' }, output:{ filename: './bundle.js' }, // 在開發環境下,每次更改代碼,都會從新進行編譯 watch: true, } # 直接執行 webpack 就能夠了 webpack # 或者在 package.json裏配置 "scripts": { "dev": "webpack" }, # 在終端執行,也能夠得到結果 npm run dev
{ "name": "code", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "axios": "^0.18.0", "vue": "^2.5.17" } }
module.exports = { // entry 入口 // output 出口 entry:{ main: './main.js' }, output:{ filename: './bundle.js' }, // 在開發環境下,每次更改代碼,都會從新進行編譯 watch: true, }
2.1 模塊html
在模塊化編程中,開發者將程序分解成離散功能塊(discrete chunks of functionality),並稱之爲模塊。 每一個模塊具備比完整程序更小的接觸面,使得校驗、調試、測試垂手可得。 精心編寫的模塊提供了可靠的抽象和封裝界限,使得應用程序中每一個模塊都具備條理清楚的設計和明確的目的。 Node.js 從最一開始就支持模塊化編程。然而,在 web,模塊化的支持正緩慢到來。在 web 存在多種支持 JavaScript 模塊化的工具,這些工具各有優點和限制。webpack 基於從這些系統得到的經驗教訓,並將模塊的概念應用於項目中的任何文件。
2.2 什麼是webpack模塊前端
webpack 模塊可以以各類方式表達它們的依賴關係。vue
//自帶nodejs環境 cmd規範 // module.exports = {} // var a = require('./webpack.config.js') // 若是在項目中配置了webpack.config.js 那麼在終端中直接輸入webpack,默認識別webpack.config.js項目配置文件 module.exports = { // 入口 entry:{ "main":'./main.js' }, // 出口 output:{ filename:'./bundle.js' }, watch:true }
// 上線環境下 module.exports = { // 入口 entry:{ "main":'./main.js' }, output:{ filename:'./bundle.js' } };
開發環境:webpack.dev.config.js ,上線環境下:webpack.prod.config.js ,在 package.json 裏配置:java
{ "name": "code", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack --config ./webpack.dev.config.js", "build": "webpack --config ./webpack.prod.config.js" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "axios": "^0.18.0", "vue": "^2.5.17" } }
// 導入css文件 import './main.css' # 下載 css-loader和style-loader npm install css-loader -D;npm install style-loader -D # 配置loader,在webapck.config.js中 module.exports = { // 入口 entry:{ "main":'./main.js' }, // 出口 output:{ filename:'./bundle.js' }, watch:true, // 模塊中的loader module: { loaders:[ { test: /\.css$/, // 先識別css-loader 再識別style-loader loader: 'style-loader!css-loader' } ] } };
插件是 webpack 的支柱功能。webpack 自身也是構建於,你在 webpack 配置中用到的相同的插件系統之上!插件目的在於解決loader沒法實現的其餘事。node
5.1 剖析webpack
webpack 插件是一個具備apply屬性的 JavaScript 對象。apply
屬性會被webpack compiler調用,而且 compiler 對象可在整個編譯生命週期訪問。ios
5.2 用法es6
因爲插件能夠攜帶參數/選項,你必須在 webpack 配置中,向 plugins
屬性傳入 new
實例。根據你的 webpack 用法,這裏有多種方式使用插件。
# 安裝插件 html-webpack-plugin npm install html-webpack-plugin -D # 配置webpack.prod.config.js var HtmlWebpackPlugin = require('html-webpack-plugin'); // 插件 plugins:[ new HtmlWebpackPlugin({ template:'./index.html',//參照物 }) ]
// nodejs中內置模塊path var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); // html-webpack-plugin // 若是在項目中配置了webpack.config.js 那麼在終端中直接輸入webpack,默認識別webpack.config.js項目配置文件 module.exports = { // 入口 entry:{ "main":'./src/main.js' }, // 出口 output:{ //相對轉絕對 path:path.resolve('./dist'), filename:'./bundle.js' }, // 模塊中的loader loader加載器 它能對css、json png jpg mp3 mp4 es6的js代碼 module:{ loaders:[ { test:/\.css$/, loader:'style-loader!css-loader' } ] }, // 插件 plugins:[ new HtmlWebpackPlugin({ template:'./index.html',//參照物 }) ] };
npm install -g http-server # 上線測試命令 hs -o -p 9999
# 下載 npm install webpack-dev-server@2.9.0 -D # 配置package.json "scripts": { "dev": "webpack-dev-server --open --hot --inline --config ./webpack.dev.config.js", "build": "webpack --config ./webpack.prod.config.js" } # 執行完,代碼更新時,會自動變化 npm run dev
{ "name": "02-module_deep", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack-dev-server --open --hot --inline --config ./webpack.dev.config.js", "build": "webpack --config ./webpack.prod.config.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^1.0.0", "html-webpack-plugin": "^3.2.0", "style-loader": "^0.23.1", "webpack": "^3.12.0", "webpack-dev-server": "^2.9.0" }, "dependencies": { "vue": "^2.5.17" } }
# 下載 npm install vue-loader@14.1.1 -D vue-template-compiler@2.5.27 -D
// nodejs中內容模塊 var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); // html-webpack-plugin // 若是在項目中配置了webpack.config.js 那麼在終端中直接輸入webpack,默認識別webpack.config.js項目配置文件 module.exports = { // 入口 entry:{ "main":'./src/main.js' }, // 出口 output:{ path:path.resolve('./dist'),//相對轉絕對 filename:'./bundle.js' }, // 模塊中的loader loader加載器 它能對css、json png jpg mp3 mp4 es6的js代碼 module:{ loaders:[ { test:/\.css$/, loader:'style-loader!css-loader' }, { test:/\.vue$/, loader:'vue-loader' } ] }, watch:true, // 插件 plugins:[ new HtmlWebpackPlugin({ template:'./index.html',//參照物 }) ] };
<!-- 組件結構 html 業務邏輯 js 組件樣式 css --> <template> <!-- 必定是閉合標籤 --> <div class="app"> <h3>{{msg}}</h3> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <Header /> </div> </template> <script> import Header from './Header.vue' export default{ data(){ return { msg:'學習單頁組件' } }, methods:{ }, computed:{ }, // 掛載 components:{ Header } } </script> <!-- scoped 它表示只對當前組件的樣式起做用 --> <style scoped> /*全局的*/ h3{ color: yellow; } </style>
<template> <div> <h3>{{att}}</h3> </div> </template> <script> export default { name: 'Header', data() { return { att:"alex" }; }, }; </script> <!-- scoped 它表示只對當前組件的樣式起做用 --> <style scoped> h3{ color: green; } </style>
<!-- scoped 它表示只對當前組件的樣式起做用 --> <style scoped> /*全局的*/ h3{ color: yellow; } </style>
# 下載安裝vue-cli 官網:https://cli.vuejs.org/zh/ # 下載,版本是3.x npm install -g @vue/cli # 檢查版本 vue -V # 下載舊版本2.x npm install -g @vue/cli-init # `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同 vue init webpack my-project Vue CLI 3 和舊版使用了相同的 vue 命令,因此 Vue CLI 2 (vue-cli) 被覆蓋了。若是你仍然須要使用舊版本的 vue init 功能,你能夠全局安裝一個橋接工具。 # 此時電腦上既可使用2.x和3.x版本的腳手架工具 # 關於vue-cli 2.x版本的腳手架工具-命令 vue init <模板> <項目名> # 模板: webpack-simple 簡單配置webpack模板 webpack 複雜的webpack模塊,單元測試、ESlint、熱重載 # 1. 切換到指定的文件夾,執行,生成項目 vue init webpack-simple my-project # Use sass ? No # dependencies 當前項目依賴的模塊,devDependcies 經過腳手架搭建以後必需要以來的包,開發環境依賴 # 2. 而後執行 npm install 安裝全部依賴 npm install # 3. 執行 npm run dev
vue的生態圈vue-awesome 參考連接:https://segmentfault.com/p/1210000008583242/read?from=timeline
// main.js是整個項目的入口啓動文件 // 導入npm下載的模塊 import Vue from 'vue' // 導入本身編寫的模塊 // 不一樣在於 若是是npm下載的 from '名稱' 本身編寫的模塊 from '路徑引入' import App from './App.vue' // 1.引入全局的組件 import Header from './components/Common/Header.vue' // 2.註冊全局組件 Vue.component(Header.name,Header); new Vue({ el: '#app', // DOM直接渲染 // appendChild() render: h => h(App) });
<template> <!-- 組件的頁面結構 --> <div id="app"> <Header /> <h3>{{msg}}</h3> <div v-html = 'title'></div> <ul> <!-- key綁定key的時候 若是數據中有id 就綁定id,沒有id 綁定index --> <li v-for = '(item,index) in datas' :key = 'index'> {{ item }} </li> </ul> <Home :text = 'text' @add = 'addHandler'/> </div> </template> <script> //導入 import Home from './components/Home/Home.vue' // 組件內部的業務邏輯 export default { name: 'app', data () { return { msg: '咱們來學習vue-cli腳手架項目', title:"<h3>alex</h3>", datas:['抽菸','喝酒','燙頭'], text:"我是父組件的內容" } }, components:{ Home }, methods:{ addHandler(data){ console.log(data); } } } </script> <style> /*組件的樣式*/ #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
// 1.引入全局的組件 import Header from './components/Common/Header.vue' // 2.註冊全局組件 Vue.component(Header.name,Header);
# 1. 建立webpack模板的項目 vue init webpack my-project-webpack # 2. 執行 cd my-project-webpack # 3. 運行 npm run dev 或者 npm run start
// 整個路由的配置文件 import Vue from 'vue' import VueRouter from 'vue-router' // alias @ // /Users/majinju/Desktop/vue_lesson/代碼/06-vue-cli腳手架的使用/02-webpack_project/src import Home from '@/components/Home/Home' import FreeCourse from '@/components/FreeCourse/FreeCourse' // 讓vue使用此插件 Vue.use(VueRouter); // 至關於 // Vue.protoype.$router = VueRouter var router = new VueRouter({ routes:[ { path:'/', name:'Home', component:Home }, { path:'/free', name:'FreeCourse', component:FreeCourse } ] }); export default router;
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router/index.js' Vue.config.productionTip = true; /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' });
<template> <div id="app"> <router-link to = '/'>首頁</router-link> <router-link to = '/free'>免費課程</router-link> <router-view /> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
# 下載 vue-router npm install vue-router -S npm run dev # 1. 先在main.js 導入vue-router index.js ---> import VueRouter from 'vue-router' main.js ---> import router from './router/index.js' # 2.