天天看點

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