webpack 是基於 Node.js 靜態資源的模塊打包器。當用 webpack 打包時,它會從一個起點開始查找各個模塊依賴關係,而且按照這些依賴關係把這些文件打成一個或者多個包;css
1.模塊化,瀏覽器端的早期沒有模塊化,須要 js 文件只能經過 script 標籤手動控制依賴管理這些 js 文件的引入順序;而 webpack 能夠經過模塊化管理這些依賴; 2.自動編譯 less、sass
3.能夠把基於 JS 的擴展語言編譯成 JS;
4.開發時配置代理解決開發環境跨域html
前提條件:在開始以前,請確保安裝了 Node.js 的最新版本。使用 Node.js 最新的長期支持版本(LTS - Long Term Support),是理想的起步。使用舊版本,你可能遇到各類問題,由於它們可能缺乏 webpack 功能以及/或者缺乏相關 package 包。vue
對於大多數項目建議本地安裝。這可使咱們在引入破壞式變動(breaking change)的依賴時,更容易分別升級項目。一般,webpack 經過運行一個或多個 npm scripts,會在本地 node_modules 目錄中查找安裝的 webpack:node
建立 wbp-vue 項目目錄(能夠根據項目起名)webpack
在 wbp-vue 中生成 package.jsonweb
npm init -y
複製代碼
npm install --save-dev webpack
複製代碼
npm install --save-dev webpack-cli
複製代碼
真實項目中咱們不是單獨使用 vue,而是結合 webpack等打包工具;由於 webpack 能夠更方便的實現模塊化,導入導出依賴。並且使用webpack配合 vue-loader,咱們的組件能夠寫成 .vue 的文件。vue-router
let HtmlWebpackPlugin = require('html-webpack-plugin'); // 打包時用一下
// Vue + webpack 單頁面應用須要安裝: vue-loader vue-template-compiler
let VueLoaderPlugin = require('vue-loader/lib/plugin'); // 引入 vue-loader plugin
module.exports = {
entry: './src/main.js', // 配置打包入口
output: {
path: __dirname + './dist', // 通常輸出目錄都叫 dist 或者 build
filename: 'bundle.js' // 打包輸出的文件名
},
devtool: 'eval-source-map',
devServer: {
contentBase: './src',
port: 8001,
open: true, // 自動啓動瀏覽器
inline: true, // 文件內容修改,瀏覽器自動刷新
historyApiFallback: true, // 單頁面應用切路由不刷新(history模式)
proxy: {
'api': {
target: 'http://localhost:8000', // 和服務端同事聯調時,你須要和服務端同事要開飛機的 ip 或者域名(再次確認端口,域名有可能不是用的80或443)
changeOrigin: true, // target是域名的話,要設置爲true
secure: false // 不校驗安全與否
}
}
},
// 配置 loader
module: {
rules: [
{ // 配置 babel (把 ES67 轉 ES5 , 把 JSX 轉 JS)
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
},
exclude: /node_modules/ // 不處理 node_modules 中的東西
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.(png|jpg|gif|woff|ttf)$/,
use: 'url-loader'
},
{
test: /\.vue$/,
use: 'vue-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new VueLoaderPlugin() // 除了上面配置 loader,這裏還要用一個插件
]
};
複製代碼
npm install --save vue
npm install --save vue-router
npm install --save-dev webpack-dev-server
npm install --save-dev babel-core babel-loader@7.1.5 babel-preset-env
npm install --save-dev css-loader style-loader
npm install --save-dev less less-loader
npm install --save-dev url-loader
npm install --save-dev html-webpack-plugin
npm install --save-dev vue-loader vue-template-compiler
複製代碼
{
"name": "wbp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack", // 須要配置
"cmdBuild": "webpack-cli --entry ./app/main.js --output ./public/bundle.js", // 須要配置
"dev": "webpack-dev-server" // 須要配置
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.6.10",
"vue-router": "^3.1.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"css-loader": "^3.2.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"style-loader": "^1.0.0",
"url-loader": "^2.1.0",
"vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.8.0"
}
}
複製代碼
注意:修改webpack配置文件後若是是開發中,要重啓 npm run dev ;若是生產環境,要從新打包npm