webpack 教程 那些事兒02-從零開始

時間  2019-12-01
標籤 webpack 教程 那些 事兒 開始 简体版
原文   原文鏈接

接着上篇咱們有了最簡單的安裝了webpack的項目目錄
這節咱們從零開始搭建一個簡單的基於webpack的spa應用demo
本節只說基礎經常使用配置項，複雜後續講解.
css

文章目錄

  1. 1. 新建項目結構目錄，以下
  2. 2. 配置webpack.config.js文件
  3. 3. 啓動一個http服務
  4. 4. 體驗loader加載器功能
  5. 5. 兩個重量級中間件

 

新建項目結構目錄，以下

目錄結構目錄結構html

views: 模版目錄
modules: js模塊目錄

code:vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: #f90;
}
h2{
text-align: center;
font-size: 30px;
padding: 10px 0;
}
</style>
</head>
<body>
<script src="/output/static/app.js"></script>
</body>
</html>

 

1
2
3
# main.js
var Hello = require("./modules/hello");
document.write(Hello)
1
2
# hello.js
module.exports = "<h2>Hello donglegend.</h2>";

配置webpack.config.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 根目錄新建webpack.config.js(webpack 會自動尋找一個叫webpack.config.js的文件去執行)
var path = require("path");
 
module.exports = {
entry: {
app: path.resolve(__dirname, "./app/main.js")
// entry:顧名思義入口文件,app/main.js,輸入名字爲 app.js
},
output: {
path: path.resolve(__dirname, "./output/static"),//輸出路徑
publicPath: 'static/', //調試或者 CDN 之類的域名,稍候會用到
filename: "[name].js" //配置生成的文件名
},
resolve: {
root: __dirname, //模塊從裏開始查找
extensions: [ '', '.js', '.vue'] //模塊後綴名，先這麼些，稍候會用到
},
module: {
loaders: [] //模塊加載器，默認null
},
plugins: [] //插件，默認null
}
# 在終端執行命令：webpack
#（不出意外，會生成output目錄, /output/static/app.js）

啓動一個http服務

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 根目錄新建dev-server.js
var express = require("express");
var app = express();
var port = process.env.PORT || 3000;
 
 
app. use(express.static(__dirname+'/'));
 
app.listen(port, function (err){
if (err) {
throw err;
}
console.log( 'Listening at http://localhost:' + port + '\n')
})
# 執行命令 sudo cnpm i express --save-dev
# 安裝完成 執行命令: node dev-server.js
# Listening at http://localhost:3000
# 服務正常啓動,chrome瀏覽器輸入 http://localhost:3000/app/views/index.html

ok,看到這個就表示成功了
node

回想一下，咱們作了什麼，用webpack命令打包了main.js–>app.js
沒錯這是最簡單的webpack，項目固然不能這麼作，咱們還沒用任何loader和pluginswebpack

體驗loader加載器功能

這裏用 vue-loader作一個案例(好興奮，終於能夠能夠加載個人.vue文件了es6

要想試用，先行安裝，麻利利的：web

sudo cnpm i vue vue-loader --save-dev

看package.json(vue默認依賴babel等模塊，既然如此奔着不浪費原則，就用es6書寫吧)chrome

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"devDependencies": {
"babel-core": "^6.13.2",
"babel-loader": "^6.2.5",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-preset-es2015": "^6.13.2",
"babel-runtime": "^6.11.6",
"css-loader": "^0.24.0",
"express": "^4.14.0",
"vue": "^1.0.26",
"vue-hot-reload-api": "^1.3.3",
"vue-html-loader": "^1.2.3",
"vue-loader": "^8.5.2",
"vue-style-loader": "^1.0.0",
"webpack": "^1.13.2"
}

 

  • app目錄下新建components目錄
  • components下新建mountains.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# mountains.vue
<template>
<ul>
<li v-for="v in list" v-text="v"></li>
</ul>
</template>
<style>
ul{
width: 800px;
margin: 0 auto;
text-align: center;
}
li{
padding: 10px 0;
margin: 6px 0;
background: #efefef;
-webkit-transition: all .3s;
}
li:hover{
background: #ccc;
}
</style>
<script>
export default {
data () {
return {
list: [ "恆山", "衡山", "華山", "泰山", "嵩山"]
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
# main.js
import Vue from "vue";
import Mountain from "./components/mountains.vue";
 
new Vue({
el: "body",
components: {
Mountain
}
})
1
2
# index.html 增長下列標籤
<mountain></mountain>
1
2
3
4
5
6
7
8
9
10
11
12
13
# webpack.config.js 文件的 module增長vue和babel加載器
loaders: [{
test: /\.vue$/,
loader: 'vue'
}, {
test: /\.js$/,
loader: 'babel',
query: {
presets: [ 'es2015']
},
include: "/",
exclude: /node_modules/
}]

執行命令 : webpack
刷新頁面 http://localhost:3000/app/views/index.htmlexpress

至此，vue文件和es6代碼 正確被加載執行，有木有很開心。
小提示：若是執行webpack命令有出錯，能夠加上參數 webpack –display-error-detailsnpm

兩個重量級中間件

不知不覺又寫了這麼多，然而還沒真正開始，接着觀看下篇，
webpack真正的牛逼之處，兩個中間件: webpack-dev-middleware 和 webpack-hot-middleware

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程