#### webpack  - node.js是服務執行環境，webpack工具是基于Node運行的； - webpack在執行打包壓縮的時候是依賴nodejs的； - npm是 node.js的一個模塊，用于安裝各種開發工具以及文件。 [webpack4.x開發環境配置](https://blog.csdn.net/u012443286/article/details/79504289) [簡要理解CommonJS規范](https://blog.csdn.net/u012443286/article/details/78825917) [ES6模塊的import和export用法總結](https://www.cnblogs.com/dupd/p/5951311.html) #### package.json的配置： ~~~ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build":"cross-env NODE_ENV=production webpack --config webpack.config.js ", "dev":"cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js --mode development" }, ~~~ - **“cross -env“”** 在蘋果環境下我們配置生產環境，一般直接寫NODE_ENV-production 就可以，而在window環境下我們還要加一個前綴set 為了方便在兩個環境下都能跑，我們安裝了cross-env插件，然后在package.json引入該插件就可以在兩個環境上跑了 - 我們使用webpack跑的環境有生產環境和開發環境，生產環境不需要那些報錯，而開發環境需要一些警告以及報錯，為了區分生產環境和開發環境，我們需要在指令上寫上這個是生產環境還是開發環境的 - --mode development 代表開發環境 - --mode production 代表生產環境 - 默認情況下跑的都是生產環境，生產環境下跑webpack-dev-server，熱加載的時候，更新html數據時會反復生產dom節點，而開發環境不會出現這種情況。 - NODE_ENV表示環境變量，我們在開發環境給他賦值為development,生產環境賦值為production, 為了方便我們在配置webpack.config.js根據NODE_ENV參數做不同的配置，適應各種環境。 - 在webpack.config.js我們只需要使用process.env 加變量名就可以取出當前的變量； ~~~ const isDev = process.env.NODE_ENV === 'development'; ~~~