webpack4配置詳解之經常使用插件分享

時間  2019-11-06
標籤 webpack4 webpack 配置 詳解 經常 使用 插件 分享 简体版
原文   原文鏈接

經常使用的webpack插件整理

前言

　　繼上一次webpack的基礎配置分享以後，本次將分享一些工做中項目經常使用的配置插件、也會包含一些本身瞭解過以爲不錯的插件，若有分析不到位的，歡迎糾錯，嗯，這些東西文檔都有，大佬可繞過。javascript

　　Wepack4以後廢棄了不少的插件，這裏只會講解webpack4還支持的（包含4以前插件），已經廢棄的將再也不闡述。css

　　上一次的分享以後，有部分掘金網友留言質疑：騙小白的贊、是否原創、是不是抄別人等等，固然也有不少的網友支持和鼓勵，無論褒貶，蘇南都很是的感謝，是大家讓我認識到本身的不足與優劣。html

　　你們的留言，讓我想起了本身剛入門前端初期的心酸，基本靠本身自學，沒有人帶，遇到問題像無頭的蒼蠅，處處亂撞網上一頓搜索，百度未曾欺我，在點了一個又一個的廣告以後，翻過十頁八頁以後終於找到了問題的解決方案。前端

　　執着於對前端的熱愛，經常一個問題卡到深夜，初入前端的我曾一度感嘆在編輯器寫一些東西，在網頁上就能跑，甚至感嘆 js 寫上一個 alert hello world，瀏覽器就會自動彈出一個窗口，感受全世界都在向你招手，當時的興奮是難以形容的，甚至幻想着將來有一天，可能有千萬、億萬的用戶，在用你寫的東西。java

　　這幾天一直在想，這篇插件的總結仍是否要繼續寫下去？從寫博客到今天，將近兩個月吧，也算是一個新人，技術方面雖然說工做了幾年，但也不敢說多牛B，寫博客的初衷是爲了對本身工做中遇到的問題/心得等作一個總結，俗話說：好記性不如爛筆頭；同時也但願能把本身遇到的問題、坑點分享給他人，讓遇到一樣問題的基友們能少走那麼一點點彎路。react

　　終於最後在想了好久以後明白，人無完人，百人百性、千人千面，無論你作總會有不一樣的聲音，一樣無論你分享什麼，總會有人須要。因此走本身的路，讓別人打車吧，堅持本身所想 努力成爲本身想成爲的樣子，就是對本身最大的確定 ———— 至曾經初入前端的咱們。webpack

  • 去作想作的事，去愛值得的人；
  • 去成爲本身喜歡的模樣，
  • 去讓本身發光！渾身充滿力量，
  • 充實的日子最美好！

各位早安，這裏是@IT·平頭哥聯盟，我是首席填坑官∙蘇南，用心分享 一塊兒成長 作有溫度的攻城獅。 公衆號：honeyBadger8，羣：912594095git

mini-css-extract-plugin

  • css-提取，看名字就懂提取css用的。
  • 在這以前咱們可能會使用extract-text-webpack-plugin比較多一些，二者相比它有什麼優點呢？
  • extract-text-webpack-plugin 它對css的提取，最終是根據你建立的實例、或者配置多個入口 chunk來的，
  • 好比你配置了一個入口文件，最終全部的css都會提取在一個樣式文件裏，
  • 若是你建立了多個extract-text-webpack-plugin實例，則會生成多個css的文件，
  • 而mini-css-extract-plugin，它默認就會對你的樣式進行模塊化拆分，嗯，有點跟output裏的配置一個意思，異步按需加載，再也不僅僅是js的特權; 二者編譯結果進行比較
//extract-text-webpack-plugin 編譯打包
config.module.rules.push({
  test: /\.(scss|css)$/,
  use: ExtractTextPlugin.extract({
    use: [
      "css-loader",
      { //首席填坑官∙蘇南的專欄 交流：91259409五、公衆號：honeyBadger8
        loader: 'postcss-loader',
        options: {
          plugins: [
            require('autoprefixer')({ //添加前綴
              browsers: CSS_BROWSERS,
            }),
          ],
          minimize: true
        },
      },
      "sass-loader"
    ]
  })
})
config.plugins.push(new ExtractTextPlugin({
  filename: 'css/[name].css',
  disable: false,
  allChunks: true,
}));


//mini-css-extract-plugin  編譯打包
config.module.rules.push({
  test: /\.(scss|css)$/,//同時處理css/scss
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
      },
      "css-loader", //css處理器
      {
        loader: 'postcss-loader',
        /*
            postcss 這個插件的做用在於，與已有的工具集成一塊兒使用，不多有單獨使用的狀況，
            通用咱們用的最多的，是配合 autoprefixer 來添加各瀏覽器的前綴，以達到更好的兼容，
            再深刻一些就是 cssnext 就是容許開發者自定義屬性和變量 ：     color:var(--theme-color,#42b983);
        */
        options: {
          plugins: [
            require('autoprefixer')({ 
              browsers: CSS_BROWSERS,
            }),
          ],
        },
      },
      "sass-loader" //sass處理器 、甚至還能夠再加一個less的處理器
    ]
})

config.plugins.push(new MiniCssExtractPlugin({
  filename: 'css/[name].css', //這裏配置跟output寫法一致
  chunkFilename: 'css/[id][chunkhash:8].css',
}));
config.plugins.push(new OptimizeCssAssetsPlugin({})); //壓縮文件

optimize-css-assets-webpack-plugin

  • 上面的示例裏已經用到了，它的做用在於壓縮css文件，
  • assetNameRegExp：默認是所有的css都會壓縮，該字段能夠進行指定某些要處理的文件，
  • cssProcessor：指定一個優化css的處理器，默認cssnano，
  • cssProcessorPluginOptions：cssProcessor後面能夠跟一個process方法，會返回一個promise對象，而cssProcessorPluginOptions就是一個options參數選項！
  • canPrint：布爾，是否要將編譯的消息顯示在控制檯，沒發現有什麼用！
  • 坑點 ：建議使用高版本的包，以前低版本有遇到樣式丟失把各瀏覽器前綴幹掉的問題，
new OptimizeCssAssetsPlugin({
  assetNameRegExp: /\.optimize\.css$/g,
  cssProcessor: require('cssnano'),
  cssProcessorPluginOptions: {
    preset: ['default', { discardComments: { removeAll: true } }],
    //autoprefixer: { browsers: CSS_BROWSERS }, 也是能夠指定前綴的
  },
  canPrint: true
})

SplitChunksPlugin、RuntimeChunkPlugin

  • 它們跟上一篇的optimization配置下的的splitChunks、runtimeChunk基本是一致的，；
  • SplitChunksPlugin、RuntimeChunkPlugin，其實就是webpack4以前CommonsChunkPlugin的替代品，用於提取一些公共模塊；
  • chunks：要進行處理的類型，它有三個值：all,async,initial
  • minSize：最少大小
  • maxSize：最大包的大小，超出生成新的包
  • minChunks：至少要引用N次的模塊，
  • maxAsyncRequests：最大的按需加載並行請求數量
  • maxInitialRequests：最大的初始化加載請求次數
new webpack.optimize.SplitChunksPlugin({
        chunks: 'async', 
      minSize: 30000, 
      maxSize: 0, 
    minChunks: 1,  
      maxAsyncRequests: 1,
        maxInitialRequests:1, 
    name: true, //能夠指定
    ……,

  }),
  new webpack.optimize.RuntimeChunkPlugin({
    name: 'manifest',
    name: entrypoint => `runtimechunk~${entrypoint.name}` //動態文件名
  })

HotModuleReplacementPlugin

  • 熱更新替換，在不刷新重載頁面的狀況下更換編輯修改後的代碼：
  • 它只會更新改動過的內容，因此速度很快，幾乎在本身剛改完，切到瀏覽器窗口內容就已經更新完了；
  • 使用 HotModuleReplacementPlugin插件後，它會暴露一個module.hot對象，它下面有不少的屬性：
  • accept：它有兩個參數，一個是受權模塊(能夠直接是單個文件路徑、也能夠是一個數組包含多個文件路徑)，第二個參數，是回調函數，即更新後要作的邏輯處理。
  • decline 有點黑名單的意思，就是忽略一些模塊，不更新它們，
  • status 當前更新的狀態，idle、check、prepare、ready、dispose、apply、fail等；
  • 通常只用到 accept 最多，下面有個示例；

熱更新替換展現過程

new webpack.HotModuleReplacementPlugin()


//路由入口頁
……
if (module.hot) {
    module
        .hot
        .accept([
            './pages/routes'
        ], (err) => {
            const NextRoute = require('./pages/routes')
            // 從DOM 中移除已經掛載的 React 組件 而後重裝
            ReactDOM.unmountComponentAtNode(APP_DOM);
            ReactDOM.render(
                <Provider store={Store}>
                    <Router routes={NextRoute} history={browserHistory}/>
                </Provider>, APP_DOM);
        });
}
……

html-webpack-plugin

  • 這個插件相信你們都熟悉的不能再熟悉了,
  • 把編譯後的文件（css/js）插入到入口文件中，能夠只指定某些文件插入，能夠對html進行壓縮等
  • filename：輸出文件名；
  • template：模板文件，不侷限於html後綴哦；
  • removeComments：移除HTML中的註釋；
  • collapseWhitespace：刪除空白符與換行符，整個文件會壓成一行；
  • inlineSource：插入到html的css、js文件都要內聯，即不是以link、script的形式引入；
  • inject：是否能注入內容到 輸出 的頁面去；
  • chunks：指定插入某些模塊；
  • hash：每次會在插入的文件後面加上hash ，用於處理緩存，如：<link href="/css/index.css?v=a6fc12dd5002c">；
  • 其餘：favicon、meta、title ……；
new HtmlWebPackPlugin({
  filename: path.resolve(__dirname, '../assets/index.html'), 
  template: path.resolve(__dirname,"../views/temp.html"),
  minify:{ //壓縮HTML文件　
　　removeComments:true, 
　　collapseWhitespace:true 
    },
  inlineSource:  '.(js|css)',
  inject: false,
    chunks: ['vendors', 'index'], //首席填坑官∙蘇南的專欄
    hash:true, 
    favicon、meta、title等均可以配置，頁面內使用「<%= htmlWebpackPlugin.options.title %>」便可
    ……
})

uglifyjs-webpack-plugin

  • js代碼壓縮,默認會使用 optimization.minimizer，
  • cache: Boolean/String ,字符串便是緩存文件存放的路徑；
  • test：正則表達式、字符串、數組均可以，用於只匹配某些文件，如：/.js(?.*)?$/i;
  • parallel : 啓用多線程並行運行來提升編譯速度，常常編譯的時候聽到電腦跑的呼呼響，可能就是它乾的，哈哈～；
  • output.comments ： 刪除全部註釋，
  • compress.warnings ：插件在進行刪除一些無用代碼的時候，不提示警告，
  • compress.drop_console：喜歡打console的同窗，它能自動幫你過濾掉，不再用擔憂線上還打印日誌了；
  • 等等還有一些如：定義壓縮的程度、提出屢次出現但沒有變量的值的配置，想深刻的同窗可移步官方；
//默認：
optimization:{
    minimizer:true
};

//自定義
minimizer: [
  new UglifyJsPlugin({
    cache: true,
    // cache: "assets", 
    parallel: true, //也能夠指定 Number ,即最多並行運行數量
    sourceMap: true,
    uglifyOptions: {
      output: {
        comments: false,
        …… //首席填坑官∙蘇南的專欄，QQ:912594095
      },
      compress: {
          warnings: false,
          drop_console:true,
          …… 
        }
    },
  }),
],

BannerPlugin

  • 這個插件，它的做用在於某些時候，咱們須要對文件添加一些說明，好比版本號，做者、日期等，
  • 它就能夠幫到，每次編譯，在頭部插件一些註釋；
  • 它能夠直接是一個字符串，也能夠是一個options;
  • 嗯，差點忘說了，它是webpack自帶的一個插件，不用另外再安裝依賴，

以上爲自定配置中使用頻率較高的選項，公ZH：honeyBadger8

//字符串：
new webpack.BannerPlugin('給文件添加一些信息，打包日期：'+ new Date());

//自定義
plugins: [
  new webpack.BannerPlugin({
    {
          banner: ' \n @item:蘇南的項目 \n @author:suSouth \n @date:'+new Date()+' \n @description:蘇南的項目 \n @version:'+package.version+'  \n', // 要輸出的註釋內容
          test:string/正則/數組，//可用於匹配某些文件才輸出，
          entryOnly: boolean, // 便是否只在入口 模塊 文件中添加註釋；
          ……
        }
  })
],

preload-webpack-plugin

  • 在使用這個插件以前，咱們須要先了解一下 preload、prefetch，從字面意思上講：預加載，
  • 不難理解，就是提早加載資源(匹配其餘頁面可能用到的資源進行預先，從而達到無loading ，用戶無感知的跳轉)，它的使用也很是的簡單，在你要進行預加載的資源上添加 rel="preload"標籤便可；
  • 示例：<link rel="preload" href="index.css" as="style" />
  • 而preload-webpack-plugin它的做用就是在編譯打包的時候，幫咱們把以上的操做都作了，
  • 編譯完成後，你能夠（指定某些/所有）文件動態插入到 HtmlWebPackPlugin 配置輸出的文件內，
  • as： 表示你預加載的資源類型；能夠有有先多：script、font、image、style、video等等，更多詳細請查看API，它還能夠返回function；
  • include：要插入，進行預加載的文件，它有：allChunks、initial、asyncChunks、數組等選項，數組即表示指定插入某些文件
  • fileBlacklist:即文件黑名單，能夠指定某個文件，也可使用正則來匹配；

以上爲自定配置中使用頻率較高的選項，公衆號：honeyBadger8

//注意點1：請把配置必定寫在HtmlWebPackPlugin插件以後，不然會報`HtmlWebpackPlugin.getHooks is not a function`錯誤，
//注意點2：webpack4以後，請使用最新版本 npm install --save-dev preload-webpack-plugin@next，

new PreloadWebpackPlugin({
  rel: 'prefetch',
  as: 'script',
  // as(entry) {
  //   if (/\.css$/.test(entry)) return 'style';
  //   return 'script';//首席填坑官∙蘇南的專欄，QQ:912594095
  // },
  include: 'asyncChunks',
  // fileBlacklist: ["index.css"]
  fileBlacklist: [/\index.css|index.js|vendors.js/, /\.whatever/]
})

webpack-bundle-analyzer

  • 這個插件仍是蠻棒的，強烈推薦能夠看看，也是本次分享的最後一個插件
  • 它的做用在於能幫咱們很清晰直觀的看到，你編譯後的每個、每個文件哦，內容的分佈組成，有利於咱們快速查找包過大、內容是否重複、問題定位優化等；
  • 它會在編譯完成後，自動啓動一個服務、也能夠自定義配置，打開一個可視化窗口，鼠標移動到對應的模塊上，均可以顯示出，該模塊在某文件內佔比的大小及stat、parsed、gzipped等的狀態；
  • analyzerHost、analyzerPort：自定配置打開的地址、端口，默認使用：127.0.0.1:8888
  • reportFilename： 報告生成的路徑，默認以項目的output.path輸出；
  • openAnalyzer：是否要自動打開分析窗口，
  • 其餘還有不少屬性，官網也有，這裏只是引導簡介，請大佬們勿噴；

以上爲自定配置中使用頻率較高的選項，公衆號：honeyBadger8 以上爲自定配置中使用頻率較高的選項，公衆號：honeyBadger8

plugins:[
    new BundleAnalyzerPlugin({...}) //默認配置就很好了，能知足咱們的要求
]

經常使用的幾個插件地址彙總：

結尾：

　　以上就是今天爲你們整理的幾個項目中經常使用的插件，可能有些地方理解的不是特別到位，歡迎你們補充，同時我也給你們準備了一個整合後完整的webpack配置的示例，若有興趣可自行測試。github

　　下一期計劃跟你們一塊兒分享「React如何封裝一個組件」（或者說沉澱一個組件庫）來簡單實戰一下react如何上手？歡迎持續關注，如以爲不錯記得點個贊哦，固然您能動動手指關注下方公ZH就更棒了，謝謝支持！web

寶劍鋒從磨礪出，梅花香自苦寒來，作有溫度的攻城獅!，公衆號：honeyBadger8

做者：蘇南 - 首席填坑官

連接：http://www.javashuo.com/article/p-aawoclhu-gh.html

交流：91259409五、公Z號：honeyBadger8

本文原創，著做權歸做者全部。商業轉載請聯繫@IT·平頭哥聯盟得到受權，非商業轉載請註明原連接及出處。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程