決定不懶了。還是寫一下簡(jiǎn)書。
webpack 把前端模塊化的代碼轉(zhuǎn)化為瀏覽器支持的代碼兽泄，做一個(gè)底層的支撐。前端模塊化自動(dòng)打包工具漾月。多個(gè)模塊化的互相依賴的js文件打包成一個(gè)js病梢，html使用打包后的js文件就行了，一般只有一個(gè)js入口梁肿，在里面引入其他也要打包的資源文件蜓陌。
npm node包管理工具
npm run build 打包,配置了.json可以用本地webpack版本打包
webpack一般都是用項(xiàng)目本地的，全局的不適用吩蔑。又分為開發(fā)時(shí)依賴和運(yùn)行時(shí)依賴
基本webpack可以打包js文件护奈，如果還有css等文件打包 要配置loader來(lái)支持
安裝
1.mac使用。先安裝nvm哥纫，然后用nvm安裝了node(npm也裝了)霉旗，然后打開webstrom痴奏，就可以使用
2.npm init 創(chuàng)建一些默認(rèn)的node 環(huán)境
3.創(chuàng)建好項(xiàng)目。cd進(jìn)入厌秒，然后npm install webpack --save-dev(--save-dev開發(fā)時(shí)依賴读拆，打包不需要)（node是全局的就可以）
4.手動(dòng)創(chuàng)建webpack.config.js 然后配置入口和出口等等。
const path = require('path');
module.exports = {
entry:"./src/main.js",
output:{
path:path.resolve(__dirname,'./dist'), //要寫絕對(duì)路徑
filename:"bundle.js"
}
}
5.npm run xx的命令映射
package.json 一般要增加
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
這個(gè)地方設(shè)置了webpack鸵闪，就會(huì)先去找項(xiàng)目本地的webpack版本調(diào)用檐晕。如果沒有再去找全局的webpack，（盡量不要安裝全局的）蚌讼，然后通過webpack.config.js找到入口和出口文件辟灰。然后執(zhí)行打包命令。如果不設(shè)置這個(gè)可以使用npx webpack 入口路徑j(luò)s --output(--o) 出口路徑j(luò)s篡石。這個(gè)webpack路徑在node_modules/bin/里面
6.增加rules依賴的時(shí)候路徑要設(shè)置正確
7.webpack配置vue
npm install vue --save 打包和生產(chǎn)都需要
npm run build報(bào)錯(cuò)芥喇。或者可以跑起來(lái)但是vue沒掛載上內(nèi)容凰萨。因?yàn)槟J(rèn)加載的vue版本不對(duì)继控。解決方案有倆。
1.import Vue from "vue/dist/vue"
2.config增加配置胖眷。
resolve:{
alias:{
'vue$':"vue/dist/vue.esm.js"
}
}
如果使用了template會(huì)報(bào)錯(cuò)武通，因?yàn)椋?/strong>
1.runtime-only->代碼中不能有template
2.runtime-compiler->代碼中可以有template，可以編譯
解決方法：
加載vue的loader：
npm install vue-loader vue-template-compiler --save-dev珊搀。
然后配置webpackconfig
module: {
rules: [
{
test:/\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test:/\.vue$/,
use: ['vue-loader'],
},
],
}
都可以讓webpack加載可以編譯template的vue版本冶忱。
此時(shí)build還會(huì)報(bào)錯(cuò)，因?yàn)樯僖粋€(gè)plugins的問題境析±屎停可以去.json里面把vue-loader版本設(shè)置低一點(diǎn)，也可以在config里面添加
const VueLoaderPlugin = require('vue-loader/lib/plugin');
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin()
],
vue 定義template的時(shí)候一定要定義div作為根簿晓，不然只顯示第一個(gè)
然后vue就跑起來(lái)了眶拉。
最后補(bǔ)充一句。掛載子組件一定要 template:'<cpn></cpn>',
裝好node之后憔儿，可以使用
npm install -g @vue/cli 安裝腳手架忆植，全局安裝就可以了
