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 ······