### webpack 4.x 安裝 1. 首先需要在全局中安裝 ``` npm install webpack -g npm install webpack-cli -g // 與webpack 3.x 的區別 ``` 2. 接下來打開新的文件夾，創建package.json ``` npm init ``` 初始化 `package.json` 文件。 3. 局部安裝 ``` npm install webpack --save npm install webpack-cli --save ``` ### webpack 4.x 基本打包編譯 1. webpack 3.x 編譯 ``` webpack a.js b.js ``` ```bash # {extry file}出填寫入口文件的路徑，本文中就是上述main.js的路徑， # {destination for bundled file}處填寫打包文件的存放路徑 # 填寫路徑的時候不用添加{} webpack {entry file} {destination for bundled file} ``` 以上就是 `4` 版本之前的使用方式，但是這種方式在 `4` 版本中就不能使用了，`4` 版本有自己的新的方式 2. webpack 4.x 默認打包編譯 為什么上面要寫默認打包編譯，是因為webpack可以自定義打包編譯配置，我們首先說下默認的打包編譯。 ``` entry: "/src/index.js" // 默認入口文件 output: "/dist/main.js" // 默認輸入文件 ``` 上面路徑及文件中，`src` 和 `index.js` 需要我們手動去創建，在 `index.js` 中寫好js代碼即可，其余的 `dist` 和 `main.js` 都是由系統自動生成的，并且當你再一次編譯時，會自動的在 `dist` 中覆蓋同名文件。 而webpack 4.x 的編譯命令也發生變化了，如下所示，分為開發環境和生產環境的命令 ``` webpack --mode development webpack --mode production ``` 使用命令后，會自動生成文件。 配置 `package.json` 文件 ```js "scripts": { "dev": "webpack --mode development", "build": "webpack --mode production" } ``` 可以使用 `npm ruin dev` 和 `npm run build` 進行執行命令