1. 程式人生 > >使用webpack打包方法

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