使用webpack打包方法
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兩個打包好的檔案夾了以 上就是複雜打包的內容