webpack的安裝和基本使用

初始化根目錄：

npm init

然後一路按回車，為了方便生成packge.json的檔案，為後續方便配置使用的webpack命令。

安裝：

npm i -D webpack webpack-cli

webpack僅在開發階段使用，所以安裝的時候加上-D引數，只作為開發階段的依賴。

打包構建：

npx webpack

webpack的預設入口檔案為根目錄的./src/index.js檔案，出口檔案為根目錄的./dist/,打包好的檔案都會放著這個目錄下邊。

如果要修改入口和出口的目錄可以在根目錄新建一個webpack.config.js的配置檔案，如

//引入Node讀取檔案路徑必須的模組
const path = require('path');
//commonJS的方式匯出
module.exports = {
    entry:'./test_entry/index.js',
    output: {
        path: path.resolve(__dirname, 'test_output'),
        filename: 'index.js'
    }
}

配置package.json

	//配置package.json的webpack打包命令。
	{
		...
  		"scripts": {
	    "build-dev": "webpack --mode=development",
	    "build-pro": "webpack --mode=production"
		},
		...
	}

構建打包的時候要加上–mode引數，預設情況下是預設生成環境(production)這樣可以便於讓webpack知道你要打包的是什麼環境。因為兩種模式打包的結果是不同的,開發模式下的檔案便於開發和除錯，而生產模式下的檔案體積更加精小但是不便除錯。而修改mode引數本質上是臨時修改環境變數 process.env.NODE_ENV 的值。