在web開發(fā)中，我們得使用到j(luò)s（es6）、css、html等技術(shù)，需要對資源文件管理，例如圖片，同時還需要對性能、熱加載等進行處理；這些功能都是可以在webpack中進行配置管理的，下面具體介紹說明。

1、devServer:在我們開發(fā)中能夠自動使我們的代碼即時起作用，自動幫我們刷新頁面，啟動服務(wù)器后能夠自動打開頁面，就是使用了devServer，devServer只會在內(nèi)存中打包，不會進行任何的文件輸出。在使用vue手腳架搭建的項目中，devServer的配置是在build/webpack.dev.conf.js中。

2、CSS：CSS配置可以集中打包在最終輸出的js文件中，也可以進行打包成一個個獨立的文件，可以進行壓縮。CSS 開發(fā)中可能使用less、sass，相應(yīng)的需要使用less-loader、sass-loader、css-loader

1）基礎(chǔ)配置：

2)css文件單獨打包：需要使用到mini-css-extract-plugin 插件；

安裝mini-css-extract-plugin 插件：npm i mini-css-extract-plugin --D

引用插件 ：const miniCssExtractPlugin = require 'mini-css-extract-plugin'

配置插件使用：

配置CSS loader,既然使用了mini-css-extract-plugin，就不能使用style-loader 了

3）、CSS 兼容性處理,需要使用到postcss-loader，和postcss-preset-env插件

安裝：npm i postcss-loader postcss-preset-env --D

loader 配置，這樣就可以在生成css文件的時候不需要寫自己寫太多的瀏覽器兼容語句了，css生成的文件會自動處理的，非常的方便。

4）壓縮CSS:需要使用到Optimize-css-assets-webpack-plugin 插件

安裝插件：npm i optimize-css-assets-webpack-plugin --D

3、打包html資源配置,需要使用到html-webpack-plugin插件，vue 手腳架搭建的環(huán)境默認已經(jīng)安裝了此插件

安裝：npm i HtmlWebpackPlugin --D

壓縮html,配置html-webpack-plugin 項的minify配置項即可：

4、打包圖片資源，使用url-loader，在vue手腳架搭建的項目中已經(jīng)有默認的配置生成，

5、js 的babel 轉(zhuǎn)換，在vue手腳架搭建的項目中如果選擇安裝babel會有相應(yīng)的配置，

6、其他資源:其他資源是除了上面的配置項目外的配置，例如字體等

7、resolve 配置項：解析模塊的配置項，

1）alias：配置路徑別名，例如一個路徑深度比較高，可以配置一個別名，在引用的時候便可以別名替代；

2）extensions：配置省略文件路徑的后綴名，例如 a.js 可以在引用的時候 a 即可

8、optimization：此項必須在生產(chǎn)模式下進行配置

總結(jié)

以上是生活随笔為你收集整理的vue mianjs 引用css_vue 学习记录八——webpack中常见的配置项的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。