一、webpack安裝.
當然，在這之前，你得先安裝好node.js。
1、npm安裝webpack。
npm install -g //全局安裝
npm install -g webpack-dev-server //安裝調試工具
2、建立項目
建立vuename檔案夾，結合vue-cli的啟發，建立項目如下
然後npm init 一直回車即可
3、安裝項目依賴
這裡我們可以手動在package.json檔案中添加相應的依賴，然後指令運作npm install。也可以使用指令npm install fileName --save-dev，來進行相關的依賴檔案安裝，我這裡用npm 安裝項目依賴
npm i vue vue-loader vue-style-loader -D
npm i webpack webpack-cli webpack-dev-server -D
npm i css-loader url-loader -D
npm i babel-loader babel-core babel-preset-env -D
npm i vue-html-loader vue-template-compiler -D//如果你要使用vue-loader的話，注意一定要安裝vue-template-compiler依賴
//這是它官網的解釋
//This package can be used to pre-compile Vue 2.0 templates into render functions to avoid runtime-compilation overhead and CSP restrictions.You will only need it if you are writing build tools with very specific needs. In most cases you should be using vue-loader or vueify instead, both of which use this package internally.
npm i vue-router vuex -S
安裝成功後我們可以在目錄下檢查package.json檔案
三、配置webpack.config.js，手動建立配置。
1、配置webpack.config.js
const path = require('path');
module.exports = function(env,argv){
env = env||{};
return{
entry:{
app:'./src/main.js'
},
module:{
rules:[
{
test:/\.css$/i,
use:['vue-style-loader','css-loader']
},
{
test:/\.vue$/i,
use:'vue-loader'
},
{
test:/\.(png|jpe?g|gif|svg)/i,
use:[
{
loader:'url-loader',
options:{
limit:10000
}
}
]
},
{
test:/\.js$/i,
exclude:/(node_modules|bowser_components)/,
use:{
loader:'babel-loader',
options:{
presets:['@babel/preset-env']
}
}
}
]
},
resolve:{
extensions: ['.js', '.vue', '.json'],
alias:{
'vue':'vue/dist/vue.esm',
'@':path.resolve(__dirname,'./src')
}
},
...env.development?require('./config/webpack.development'):require('./config/webpack.production')
}
}
2、建立config目錄，建立webpack.development.js，webpack.production.js
1、 webpack.development.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports={
mode:'development',
output:{
filename:'app.js'
},
plugins:[
new HtmlWebpackPlugin({
template:'index.html'
}),
new VueLoaderPlugin()
]
}
2、 webpack.production.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports={
mode:'production',
output:{
path:path.resolve(__dirname,'../dist'),
filename:'app.js'
},
devtool:'source-map',
plugins:[
new HtmlWebpackPlugin({
template:'index.html'
}),
new VueLoaderPlugin()
]
}
四、按照下圖，建構項目
1、建立index.html檔案，代碼如下
2、在vuename目錄下，建立一個src檔案夾，建立main.js,App.vue,建立components檔案夾存放元件，router檔案夾存放路由表，store檔案夾
main.js代碼如下
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
new Vue({
el:"#app",
data:{ },
router,
store,
components:{
App
},
template:`<App/>`
})
App.vue代碼如下
<template >
<div class="app">
<router-link :to='{name:"index",param:{}}'>首頁</router-link>
<router-link :to='{name:"news",param:{}}'>新聞</router-link>
<router-view></router-view>
{{$store.state}}
</div>
</template>
<script>
export default {
name:'App',
data(){
return{
}
}
}
</script>
<style scoped>
</style>
router檔案夾下index.js代碼如下
import Vue from 'vue';
import VueRouter from 'vue-router';
import Index from '@/components/Index';
import News from '@/components/News';
Vue.use(VueRouter);
export default new VueRouter({
routes:[
{
name:'index',
path:'/',
component:Index
},{
name:'news',
path:'/news',
component:News
}
]
})
store檔案夾下的index.js代碼如下
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
//vuex3-聲明store對象
export default new Vuex.Store({
strict: true, //嚴格模式：防止直接修改state
state: { //核心：資料
a: 12, b: 5,
users: []
},
mutations: {
},
actions: {
},
getters: {
},
modules: {
}
})
然後npm build自動建構項目，npm run dev運作項目在8080端口下，同時也實作了熱更新