創建項目
$ mkdir [project name]
$ cd [project name]
$ npm init安裝webpack、webpack-dev-server以及相關loader
# 安裝webpack，webpack-dev-server
$ npm install webpack
$ npm install webpack-dev-server
# 爲項目安裝其他依賴
$ npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -Dwebpack-merge：開發環境和生產環節的webpaak配置文件的配置合併
css-loader：編譯寫入css
style-loader：把編譯後的css整合進html
file-loader：編譯寫入文件，默認情況下生成文件的文件名是文件名與MD5哈希值的組合
vue：vue主程序
vue-laoder：編譯寫入.vue文件
vue-html-loader：編譯vue的template部分
vue-style-loader：編譯vue的樣式部分
vue-hot-reload-api：webpack對vue實現熱替換
babel-core：ES2015編譯核心
babel-loader：編譯寫入ES2015文檔
babel-preset-es2015：ES2015語法
babel-preset-stage-0：開啓測試功能
babel-runtime：babel執行環境
更多安裝方式和loader解釋參考文檔https://doc.webpack-china.org/guides/getting-started/
新建index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">{{message}}</div>
<!--“源”代碼是用於書寫和編輯的代碼。“分發”代碼是構建過程產生的代碼最小化和優化後的“輸出”目錄，最終將在瀏覽器中加載：-->
<!--bundle是分發代碼-->
<script src="dist/bundle.js"></script>
</body>
</html>創建/src/mian.js
新建src文件夾，然後在裏面創建main.js
//js源文件
import Vue from "vue";
new Vue({
el:'#app',
components:{
message:'test'
}
});配置webpack.configure.js
大多數項目會需要很複雜的設置，這就是爲什麼 webpack 要支持配置文件。這比在終端(terminal)中輸入大量命令要高效的多，所以讓我們創建一個取代以上使用 CLI 選項方式的配置文件：
var path=require('path');
module.exports={
//定義輸入文件
entry:'./src/main.js',
// 輸出文件
output:{
// 文件名
filename:'bundle.js',
// 文件地址
path:path.resolve(__dirname,'dist')
},
module: {
rules: [
//vue轉化
{
test:/\.vue$/,
loader:'vue-loader'
},
// css轉化
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
// 圖片轉化
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
}
]
},
resolve: {
// Vue v2.x之後NPM Package默認設置只會生成runtime-only 版本，若要使用standalone功能則需如下設置
// 否則會報錯：Failed to mount component: template or render function not defined.
alias: {
vue: 'vue/dist/vue.js'
}
// extensions: ['', '.js', '.vue']
}
};運行
我們在終端下輸入命令 webpack
打開瀏覽器可以看到效果
進一步實現vue的組件化思想
修改index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>wewew</h1>
<!--hello模塊-->
<hello></hello>
</div>
<!--<div id="app">{{message}}</div>-->
<script src="dist/bundle.js"></script>
</body>
</html>新建hello.vue
<template>
<strong>{{vueMsg}}</strong>
</template>
<script>
module.exports = {
data() {
return {vueMsg:'Vue hello world'}
}
}
</script>
<style scoped>
strong{
background-color: #f00;
}
</style>在main.js中加入對hello.js的引入
import helloVue from './../view/hello.vue';
import Vue from "vue";
// var helloVue=require('./../view/hello.vue')
new Vue({
el:'#app',
components:{
//hello
hello:helloVue
}
});再次webpack一下，我們就可以在瀏覽器上看到效果