新手入門，webpack入門詳細教程

maolaixin發表於2018-11-15
Web

第一步，要使用webpack，首先要安裝node.js，https://nodejs.org/en/ 官網直接下載即可，具體安裝教程，可以參考菜鳥教程 https://www.runoob.com/nodejs/nodejs-install-setup.html

第二步，在本地新建一個工程目錄，開啟cmd進入專案根目錄，執行 npm init --yes來初始化最簡單的模組化開發專案
工程目錄裡出現package.json檔案
第三步，安裝webpack，執行npm i –D webpack 或者 npm -i –-save-dev webpack，稍等片刻，出現如圖所示提示，說明安裝成功，可以執行webpack -v檢視所安裝的webpack版本。
工程資料夾下面出現node_modules資料夾以及package-lock.json檔案
用這個命令安裝的webpack只是安裝到本專案，每次新建專案都需要重新按步驟安裝一次，如果不希望各個專案重新安裝，則執行npm webpack -g，安裝webpack到全域性，則可以在任何一個地方共用一個webpack可執行檔案

到此為止，我們們就可以使用webpack啦。

第四步：新建入口函式main.js，至於放在哪個目錄下面，隨便，我放在src/js/main.js裡，隨便寫一個簡單的函式

function show(){
	document.write("webpack初體驗");
}
show();

第五步：在根目錄下新建webpack.config.js檔案，這個目錄不能隨便變動，因為webpack在執行構建時預設會從專案根目錄下的webpack.config.js檔案中讀取配置。

const path=require('path');
module.exports={
	//JavaScript執行入口檔案,
	entry:'./src/js/main.js',
	//需要指定一下輸出的路徑path和輸出的檔名filename
	output:{
		filename:'bundle.js',   //自定義輸出檔名
		path:path.resolve(__dirname,'./dist')  //自定義輸出檔案所在目錄
	}
}

第六步，執行webpack打包命令 webpack，卻沒有成功提示需要安裝webpack-cli，輸入yes即可
在這裡插入圖片描述再次輸入webpack命令執行，結果還是沒成功，提示需要設定模式mode，於是乎我又研究了一下mode用法
在這裡插入圖片描述
簡單來說，webpack有兩種模式，development（開發環境使用）和production（生產環境使用），解決辦法有以下幾種：
1.package.json中設定：

"scripts": {
    "dev": "webpack --mode development",  // 開發環境
     "build": "webpack --mode production",  // 生產環境
  },

2.webpack.config.js中設定：

const path=require('path');
module.exports={
	//JavaScript執行入口檔案,
	entry:'./src/js/main.js',
	//需要指定一下輸出的路徑path和輸出的檔名filename
	output:{
		filename:'bundle.js',   //自定義輸出檔名
		path:path.resolve(__dirname,'./dist')  //自定義輸出檔案所在目錄
	},
	//設定mode
	 mode: 'development' // 設定mode
}

3、直接用打包命令設定，即webpack -d（開發環境）或者webpack -p（生產環境）即可
在這裡插入圖片描述
在根目錄下面出現./dist/bundle.js檔案，說明打包成功
在這裡插入圖片描述
第七步，驗證打包成功，在任意目錄下面，新建任意html檔案，這裡以index.html為例，引入bundle.js檔案，在瀏覽器中開啟，正常執行！到此為止，webpack的入門體驗結束！

<!DOCTYPE html>
<html>
<head>
	<title>webpack初體驗</title>
</head>
<body>

</body>
<script type="text/javascript" src="./dist/bundle.js"></script>
</html>

在這裡插入圖片描述

相關文章