1:確定自己的電腦已經安裝了node和Git軟體
2:自己在盤裡随便建立一個檔案夾一般為英文(也就是你自己的項目名稱)
3:在新建立好的檔案夾裡面右鍵點選調出git指令視窗在視窗裡面輸入如下指令:
1:npm install webpack -g
2: npm install webpack-cli -g
3: npm init -y
4: npm install webpack --save-dev
5:先在檔案夾裡面建立兩個目錄檔案一個命名為src(寫好的js檔案也就是要打包的js檔案一般放在這個檔案裡裡) 一個為dist(打包好的檔案會生成在這個目錄裡面)
6:将項目檔案夾拖進編輯器
4:一對一打包
1:例如我們在src檔案夾裡面寫好了一個js 我這裡把它命名為了index.js我們開始對它進行封裝
2:在git視窗指令輸入 webpack src/index.js --output dist/bb.js
(index.js就是我們需要打包的檔案,将他打包進來剛開始我們建立的dist檔案夾目錄下面bb.js是自己取的将要打包過來的檔案
自己可以随便取名字。一個檔案 的打包就這樣完成了。
5:多個檔案的打包成多個方法:
如果要打包多個就忽略掉第四步
1:在項目檔案夾裡面建立一個js檔案 我這裡就命名為webpack.config.js吧 src裡面放入了我寫好的js檔案index3.js /index4.js
2:js檔案裡面輸入如下代碼
module.exports={
entry:{
index1:"./src/index3.js", //src後面的js就是自己需要打包的檔案
index2:"./src/index4.js"
},
output:{
path:__dirname+"/dist",
filename:"[name]自己命名.js" //最後打包完成後會變成index1+自己命名.js
//index2+自己命名.js
}
}
3:git裡面運作指令 webpack 然後就生成了打包好的js檔案在dist裡面
6:将多個js檔案打包成一個js檔案
1:在項目檔案夾裡面建立一個js檔案 我這裡就命名為webpack.config.js吧src裡面放入了我寫好的js檔案index7.js /index8.js
2:js檔案裡面輸入如下代碼
module.exports={
entry:{
entryKey:['./src/index7.js',"./src/index8.js"] //将要打包的檔案寫成數組的形式就可
以
},
output:{
path:__dirname+"/dist",
filename:"自己命名.js" //将會在dist下面生成一個打包好的
js檔案
}
}
3:git裡面運作指令 webpack 然後就生成了打包好的js檔案在dist裡面
7:複雜的打包
1:123大步先執行完畢
2:建立一個js檔案跟src和diast同級的名字中間命名 我這裡就命名為kgc.js 然後js裡面配置如下:
const paths=require('path');
module.exports={
entry:{
public:['./src/index1.js','./src/index2.js'], //兩個js打包成一個名字是public
one:paths.resolve(__dirname,'./src/index3.js') //一個js打包名字是one
},
output:{
path:paths.resolve(__dirname,'dist'), //打包好的js添加進dist檔案夾内
filename:'[name].js' //上面取的上面名字 這裡打包好的就是上面自己
命名的名字
}
}
3:然後在git視窗輸入指令行 webpack --config kgc.js回車 這時候dist檔案夾就會出現public.js和one.js兩個打包好的檔案夾了以 上就是複雜打包的内容