1.關(guān)于NODE_ENV
通常情況下我們習(xí)慣將npm run dev和npm run build分別對應(yīng)開發(fā)環(huán)境和生產(chǎn)環(huán)境
package.json文件中一般要設(shè)置mode值：--mode=development和--mode=production篓跛，
這里設(shè)置和webpack.config.js中設(shè)置mode是一個意思禾嫉，官方文檔說此時設(shè)置會將process.env.NODE_ENV設(shè)置為對應(yīng)值，但是在webpack.config.js中打印值時并沒有看到現(xiàn)象，在查證的過程中發(fā)現(xiàn)webpack文檔的說法有兩種，https://www.webpackjs.com/concepts/mode/的說法是：
webpack --mode=production會將 process.env.NODE_ENV 的值設(shè)為 development。啟用 NamedChunksPlugin 和 NamedModulesPlugin故源。
而https://webpack.docschina.org/concepts/mode/的說法是：
webpack --mode=production會將DefinePlugin中process.env.NODE_ENV的值設(shè)置為development。啟用NamedChunksPlugin和NamedModulesPlugin
細(xì)微差別但是實際差很多汞贸，如果按照前者所說绳军，在webpack.config.js中應(yīng)該直接獲取到NODE_ENV的值，實際并沒有獲取到矢腻。
由此可見并不能通過--mode=development的值設(shè)置全局process.env.NODE_ENV门驾，那么只能通過NODE_ENV=development和NODE_ENV=production來設(shè)置了。
2.cross-env
windows在使用NODE_ENV=production時會報異常踏堡，因此需要使用cross-env進(jìn)行設(shè)置
3.loader相關(guān)說明
- loader全部都寫在module的rules里
- 常見的loader有：
- babel-loader（處理js猎唁，可以將ES6語法轉(zhuǎn)為ES5以下），
- css-loader等顷蟆，包括less-loader和style-loader诫隅，處理樣式，支持樣式引用和less語法帐偎，
- url-loader逐纬，處理樣式中的圖片和字體處理
- html-withimg-loader，處理html中的本地圖片（一般將圖片資源放在oss上）
4.文件路徑問題
- 起因：路徑填寫的是基于開發(fā)時的路徑削樊，在打包成一個文件后路徑修改為基于html 文件的豁生，這時需要使用url-loader，然而在css文件中引入img時漫贞，會因為url-loader的設(shè)置引起錯誤
- 不想寫了甸箱，這人寫的挺好的看這個吧 https://juejin.im/post/5b8d1e926fb9a019b66e4657
5.package設(shè)置script問題
待更新
6.自定義插件
插件中必須有apply方法，否則在使用插件時會報錯：
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.plugins[0] misses the property 'apply'.
function
-> The run point of the plugin, required method.
常見拼寫錯誤
例如plugins拼成plugin時：
-configuration has an unknown property 'plugin'
loader中
options的presets拼成了preset：
Error: Unknown option: .preset. Check out ······
