webpack完整配置

2021-10-08 11:30:14 字數 2084 閱讀 7204

這裡簡單學習了一下webpack的配置

首先是webpack.development.js

const path=

require

('path');

const stylelintplugin=

require

('stylelint-webpack-plugin');

const htmlwebpackplugin=

require

('html-webpack-plugin');

module.exports=

, plugins:

[new

stylelintplugin()

,new

htmlwebpackplugin()

],devtool:

'source-map'

};

這裡定義的是一些開發環境的的配置選項

主要是將檔案輸出並載入了一些外掛程式

webpack.produce.js檔案

const path=

require

('path');

const stylelintplugin=

require

('stylelint-webpack-plugin');

const htmlwebpackplugin=

require

('html-webpack-plugin');

module.exports=

, plugins:

[new

stylelintplugin()

,new

htmlwebpackplugin()]};

大致作用同上 這裡是生產環境

webpack.test.js

const stylelintplugin=

require

('stylelint-webpack-plugin');

module.exports=

, plugins:

[new

stylelintplugin()]};

這裡是測試環境

以下是package.json

很重要的檔案 包含了一些快捷的啟動方式

以及一些重要的外掛程式版本 如果想要完整配置 以下的外掛程式幾乎必不可少

,"keywords":[

],"author":""

,"license"

:"isc"

,"devdependencies":,

"browserslist":[

"> 0.5%"

,"last 1 version"

,"not dead"],

"stylelint":,

"jest":,

"directories":,

"description":""

}

webpack.config.js

const path=

require

('path');

const stylelintplugin=

require

('stylelint-webpack-plugin');

module.exports=function (env, ar**)

;let conf=

null;if

(env.production)

else

if(env.development)

else

return},

}]},

//css}]

},//less

,//images}}

,//fonts}}

]},.

..conf

};};

這裡就是最具體載入外掛程式的配置

webpack配置 基礎配置

本片文章主要是一些webpack的基礎配置在webpack中,這個工具只識別js和json這兩種格式,別的格式或者說資源在webpack中是不認可的。例如 css檔案 less檔案 資源 圖示資源等等,這時候就需要用一些loader來對它們進行編譯處理。在敲 之前,一定要先安裝上面的包 安裝命令 n...

webpack 完整入門學習筆記(二)

在第一節配置webpack的配置檔案,這一節我們就對裡面一些配置進行一下探索,entry入口檔案配置可以配置字串,也可以配置陣列,也可以配置物件 其中字串模式和陣列都可以算作是單頁面入口 字串 const config 陣列 const config 發現這樣寫,並沒有什麼卵用,好像只載入了第乙個,...

webpack 發布配置

上次寫的是開發配置,這次是發布配置 解析 引用了單獨打包模組 在loaders內配置的css less scss都用到了,這樣它們都解析完後會合併到指定的css檔案內。還有的配置,name images hash 8 name ext 設定了name引數。表示的儲存地 在plugins內有二個配置,...