講下webpack中的對于vue配置，其實(shí)vue官方就提供了一套模板vue-webpack-template，我們學(xué)習(xí)學(xué)習(xí)，然后基于當(dāng)前自己的項(xiàng)目來配置下。
git倉庫：webpack-demo
1、處理vue
- 對于
.vue這種文件，webpack肯定是不認(rèn)識(shí)的，所以我們需要相應(yīng)的loader來處理它，通過查閱文檔我們發(fā)現(xiàn)需要安裝這兩個(gè)東西：
$ npm install vue-loader vue-template-compiler --save-dev
- 然后安裝文檔上面的教程，照貓畫虎搞一下。這個(gè)
loader兩個(gè)環(huán)境都是需要的，我們應(yīng)該是丟到webpack.common.js中：
// webpack.common.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... 其它規(guī)則
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 請確保引入這個(gè)插件！
new VueLoaderPlugin()
]
}
2、寫點(diǎn)vue
- 首先既然要使用
vue，就需要安裝它。
$ cd chapter17
$ npm install vue --save
- 然后我們需要對當(dāng)前的文件目錄做次比較大的改動(dòng)：
webpack-demo/chapter17
|- /build
|- src
- |- assets
- |- styles
- |- content.js
- |- footer.js
- |- header.js
- |- logo.js
+ |- App.vue
|- index.js
|- index.html
|- package.json
|- postcss.config.js
|- README.md
- 然后我們在
App.vue中寫點(diǎn)內(nèi)容(你應(yīng)該很熟悉)：
<template>
<div id="app">
hello world
</div>
</template>
<style lang="scss">
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
- 然后我們刪掉
src/index.js這個(gè)入口文件原來所有的示例代碼，使用下面這部分替換：
import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
- 上面這個(gè)就是
vue的語法羅，會(huì)將所有的內(nèi)容都掛載到id為app的這個(gè)元素上，很明顯我們目前沒有，所以我們需要對src/index.html這個(gè)模板加上這個(gè)元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
+ <div id="app"></div>
</body>
</html>
- 然后我們
npm run dev打包，瀏覽器中就會(huì)顯示出hello world了?，F(xiàn)在，是不是有點(diǎn)vue的那意思了？
3、關(guān)于路由
- 頁面要跳轉(zhuǎn)，很明顯，現(xiàn)在我們還少了vue-router這個(gè)必要的東西，然我們參照官網(wǎng)的教程，安裝一下：
$ npm install vue-router --save
- 然后，為了讓我們現(xiàn)在這個(gè)項(xiàng)目跟像一個(gè)標(biāo)準(zhǔn)的
vue項(xiàng)目，所以我們參照一下vue-webpack-template的目錄結(jié)構(gòu)對我們的做點(diǎn)修改。- 我們將原來的一直伴隨我們的
header、footer、content三塊的js及樣式文件都遷移到了components目錄下作為了三個(gè)子組件。 - 新建了一個(gè)
src/views里面放了放了兩個(gè)頁面組件，用來測試router的跳轉(zhuǎn)。
- 我們將原來的一直伴隨我們的
| 上一章的src目錄 | 現(xiàn)在的src目錄 |
|---|---|
 |
 |
- 新建了一個(gè)路由文件，
src/router/index.js就是vue腳手架初始化生成的內(nèi)容了：
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "home",
component: () => import("../views/home.vue")
},
{
path: "/about",
name: "about",
component: () => import("../views/about.vue")
}
];
const router = new VueRouter({
routes
});
export default router;
- 然后需要在入口文件
src/index.js中引入這個(gè)路由，還有一些其他的都是關(guān)于vue的基本使用用法的東西就不多說了，去看下倉庫源碼即可。
4、問題
- 到了這一步以后，自然我們需要跑一下項(xiàng)目，這時(shí)候問題來了，死活這張圖片不顯示；報(bào)
http://localhost:8080/[object%20Module]找不到圖片的錯(cuò)誤。
- 經(jīng)過一頓google后終于找到了答案，原來我們需要在
webpack.common.js中使用url-loader的地方把esModule設(shè)置為false-->錯(cuò)誤reason。
// ...
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: "url-loader",
options: {
limit: 4096,
+ esModule: false
}
}
]
}
-
學(xué)點(diǎn)東西還是挺不容易啊，坑真多。。。。終于，看到了完整的頁面，路由跳轉(zhuǎn)頁也沒問題。
5、小結(jié)
- 嗯，回想過去第一次用
vue-cli腳手架搭起頁面的時(shí)刻，是不是有那味了？react也是差不多，裝下react react-dom，但是由于我react的技術(shù)棧不是很熟，就不班門弄斧了，用create-react-app這個(gè)官方腳手架初始化搞個(gè)項(xiàng)目，原理也都一樣。 - 至此，我們也從0到了1的配置了一個(gè)跟
vue-webpack-template這樣的模板項(xiàng)目出來了，雖然比不上官方，但也算是有模有樣的。 - 參考鏈接：
