一栗弟、webpack（簡化打包代碼）
之前打包的命令需要指打包的文件和導(dǎo)報(bào)后的文件
image.png
如何簡化命令鞋诗，讓webpack自動(dòng)獲取打包文件和打包后的文件趟紊。
1.創(chuàng)建webpack.config.js
image.png
2.導(dǎo)出 出口文件和入口文件
module.exports = {
entry: './src/main.js',
output: {
path: './dist',
filename: 'bundle.js'
}
}
image.png
說明出口文件的路徑是絕對(duì)路徑
module.exports = {
entry: './src/main.js',
output: {
path: 'C:\Users\Administrator\Documents\HBuilderProject\webpack的基本使用\dist',
filename: 'bundle.js'
}
}
雖然path是絕對(duì)路徑竹海，但是當(dāng)dist文件換地方時(shí)晰骑，還需要手動(dòng)修改絕對(duì)地址敛劝，所以這種寫法不可取余爆。
自動(dòng)獲取絕對(duì)路徑需要利用node的path模塊。
3.導(dǎo)入path模塊
const path = require('path');
4.npm init
項(xiàng)目需要利用到node包時(shí)夸盟，需要利用npm初始化
image.png
初始化后蛾方，生成package.jason文件
image.png
5.動(dòng)態(tài)獲取絕對(duì)路徑
resolve('__dirname','dist')
node的path模塊中的resolve函數(shù)可以拼接絕對(duì)路徑
__dirname:當(dāng)前文件路徑，也就是webpack.config.js的路徑
'dist':拼接在__dirname路徑后的字符串
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname,'dist')
filename: 'bundle.js'
}
}
image.png
二上陕、npm run build
可以用npm run build代替webpack命令
在package.jason文件中的script腳本中桩砰，添加build的屬性，屬性值為webpack
image.png
image.png
三释簿、安裝局部webpack
項(xiàng)目中需要自己安裝局部webpack
cnpm install --save-dev webpack@3.6.0
image.png
在文件中自動(dòng)生成package.json文件和node_modules目錄
image.png
在package.jason文件中可以看到下載的本地webpack的版本
"devDependencies": {
"webpack": "^3.6.0"
}
