webpack打包 vue檔案

在webpack中配置.vue元件頁面的解析(vue-loader)

1、執行npm i vue -s將vue安裝為執行依賴；

2、運cnpm i vue-loader vue-template-compiler -d將解析轉換vue的包安裝為開發依賴；

3、執行npm i style-loader css-loader -d將解析轉換css的包安裝為開發依賴，因為.vue檔案中會寫css樣式；

4、new vueloaderplugin() 引入這個外掛程式，必須的

ps：注意 引入const vueloaderplugin = require(『vue-loader/lib/plugin』) ———在之前的版本中好像不需要這個外掛程式，再看教程的時候還是跟著官方文件來 vue-loader

webpack.config.js

const path = require('path');

const htmlwebpackplugin = require('html-webpack-plugin');//自動生成html模板，以便在多個入口檔案時，不用手動修改引入的js
const webpack = require('webpack');
const vueloaderplugin = require('vue-loader/lib/plugin');
module.exports = ,
devserver: ,
devtool: 'inline-source-map',//若有報錯，報錯資訊會具體到某乙個js檔案的某一行
plugins: [//配置html-webpack-plugin
new htmlwebpackplugin(
}),new webpack.namedmodulesplugin(),//模組熱替換相關
new webpack.hotmodulereplacementplugin(),//模組熱替換相關
new vueloaderplugin(),// 請確保引入這個外掛程式來施展魔法
],output: ,
module: ,,}
]},}]
},,]}
};

package.json

,

"keywords": ,
"author": "",
"license": "isc",
"devdependencies": ,
"dependencies": 
}

main.js入口檔案

import vue from 'vue';//匯入vue.js

new vue(,
created(){},
mounted(){},
})

index.html

<

div 
id>
div>

引入vue-router

npm i vue-router -s

import vue from 'vue';

import router from 'vue-router';
vue.use(router);
export default new router(,
]})

然後將這個router.js檔案配置到vue例項裡面，見上面的main.js

webpack 打包檔案 vue 過大

在 build webpack.base.conf.js 檔案裡加上 externals 不需要打包的檔案就放寫在這裡，然後在 index.html 外連上這些庫 順便記錄乙個連線後面加入版本號 在 webpack.prod.conf.js 檔案裡 自己獲取乙個時間加在後面就可以了 官方 impor...

Vue工程模板檔案 webpack打包

1 github 2 webpack配置 1 基礎配置webpack.base.config.js const path require path 處理共用 通用的js const webpack require webpack css單獨打包 const extracttextplugin req...

Vue工程webpack打包

npm install webpack g npm install webpack cli g webpack v webpack cli v 新建hello.js暴露方法供其他js引用，可防止原生 script script 標籤引入多個js方法重名的問題。暴露乙個方法 exports.sayhi...