webpack學習筆記（五）

時間 2019-11-13

標籤 webpack 學習筆記简体版

原文原文鏈接

1. 若是想編寫一個libray的庫，代碼結構以下：css

-library
  -src
     -index.js
     -math.js
     -string.js

math.jshtml

export function add(a, b) {
    return a + b;
}

export function minus(a, b) {
    return a - b;
}

export function multiply(a, b) {
    return a * b;
}

export function division(a, b) {
    return a / b;
}

string.jsreact

import _ from 'lodash';

export function join(a, b) {
    return _.join([a, b], ' ');
}

index.jswebpack

import * as math from './math';
import * as string from './string';

export default { math, string }

爲了使用下面方式引入：ios

import library from 'library';
const library = require('library');
require(['library'],function(){

})
<script src="library.js"></script>

需在配置文件中定義：es6

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  externals: 'lodash',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'library.js',
    library: 'root',     //在這裏定義可使用 script標籤引入 而後注入一個全局吧變量root 使用root.math
    libraryTarget: 'umd' //使用這種定義能夠支持 cmd es6 等語法的引入
  }
}

則調用方式是 library.math；web

2 若是咱們寫的庫中已經引入打包過 lodash.js這個庫，可是用戶也在業務代碼中引入了這個庫，形成了重複引入。因此要在配置文件中設置 externals: 'lodash', 即打包時不打包依戀文件chrome

3 結合pwa：npm

//對線上代碼作pwa處理，本地開發不用，因此在生成的dist目錄下執行 http-server 服務
首先安裝 http-server,而後執行：
"scripts": {
    "start": "http-server dist"
},

npm install workbox-webpack-plugin --save-dev
在線上打包的配置文件中
const WorkboxPlugin = require('workbox-webpack-plugin');
plugins: [
  new WorkboxPlugin.GenerateSW({
    clientsClaim: true,
    skipWaiting: true
  })
],

頁面代碼中：
console.log('hello, this is dell');

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js') //調用打包生成的 sw.js
      .then(registration => {
        console.log('service-worker registed');
      }).catch(error => {
        console.log('service-worker register error');
      })
  })
}

具體：json

webpack 中使用 workbox 實現 PWA
說明
重要文件版本

「workbox-webpack-plugin」: 「^3.0.0」 「webpack」: 「^3.11.0」 webpack 提供了 workbox 插件 workbox-webpack-plugin webpack 中使用 在 production 版本配置中使用 1. 在入口 html 模板中引入

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
      <title>webpack-react-template</title>
      <!-- 引入 manifest 文件 -->
      <link rel="manifest" href="./manifest.json">
   </head>

   <body>
      <div id="app"></div>
      <script>
        // 進行 service-wroker 註冊
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker
                    .register('./service-wroker.js')
                    .then(registration => {
                        console.log('SW registered: ', registration);
                    })
                    .catch(registrationError => {
                        console.log('SW registration failed: ', registrationError);
                    });
            });
        }
      </script>
   </body>

</html>

2. webpack.prod.config.js 中進行 webpack 配置

const WorkboxPlugin = require('workbox-webpack-plugin');

module.exports = merge(baseWebpackConfig, {
    // ... 省略其餘配置
    plugins: [
        // ... 省略其餘配置

        /*
            這裏也可使用 WorkboxPlugin.InjectManifest({}) 配置
            可是須要 配置 swSrc 指明模板 service-worker 文件
            WorkboxPlugin.GenerateSW({}) 能夠直接生成 service-worker 文件
         */
        new WorkboxPlugin.GenerateSW({
            cacheId: 'webpack-pwa', // 設置前綴
            skipWaiting: true, // 強制等待中的 Service Worker 被激活
            clientsClaim: true, // Service Worker 被激活後使其當即得到頁面控制權
            swDest: 'service-wroker.js', // 輸出 Service worker 文件
            globPatterns: ['**/*.{html,js,css,png.jpg}'], // 匹配的文件
            globIgnores: ['service-wroker.js'], // 忽略的文件
            runtimeCaching: [
                // 配置路由請求緩存
                {
                    urlPattern: /.*\.js/, // 匹配文件
                    handler: 'networkFirst' // 網絡優先
                }
            ]
        })
    ]
});


注意：配置路由請求緩存，請看另一篇文章

3. 轉移 manifest.json 以及須要的圖片 我這裏使用了 copy-webpack-plugin 插件用於文件轉移

new CopyWebpackPlugin([
    {
        from: 'src/manifest.json',
        to: 'manifest.json'
    },
    {
        from: 'src/icon.png',
        to: 'static/imgs/icon.png'
    }
]);

4. 編譯後生成的 service-worker 文件


importScripts(
    'https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js'
);

importScripts('/test/precache-manifest.14cde9ce3f3a728b83652a5461e9fd24.js');

workbox.core.setCacheNameDetails({ prefix: 'webpack-pwa' });

workbox.skipWaiting();
workbox.clientsClaim();

self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

workbox.routing.registerRoute(
    /.*\.js/,
    workbox.strategies.networkFirst(),
    'GET'
);

文章來源：
webpack 中使用 workbox 實現 PWA

相關文章 PWA 漸進式網絡應用 - 1 - 簡介及調試方法

PWA 漸進式網絡應用 - 3 - manifest.json 添加應用至桌面

5. devServer 開啓代理：

咱們在本地開發的時候常常會訪問到測試服務器等接口，可是若是寫的是相對路徑，好比：

axios.get('/react/api/header.json')
.then((res) => {
  console.log(res);
})

就會自動調用 http://localhost:8080/react/api/header.json ;這樣就會致使跨域。

因此須要作devserver的代理：

devServer: {
  proxy: {
    '/react/api': 'http://www.dell-lee.com' //若是請求的接口是 react/api 則去 dell-lee.com 域名下去訪問該接口
  }
}

若有多個路徑須要配置：

devServer: {
  proxy: [{
    context:['/auth','/api'],
    target:'http://localhost:3000'
  }]
}

若是相對根路徑進行配置，須要設置index 爲空：

devServer: {
  proxy: {
    index:'',
    '/': 'https://www.dell-lee.com'
  }
}

如需更多的代理配置項，須要增長參數：

devServer: {
  proxy: {
    '/react/api': {
      target: 'https://www.dell-lee.com', //若是請求的接口是 react/api 則去 dell-lee.com 域名下去訪問該接口
      secure: false,  //若是上面用的是https的話 須要設置secure
      pathRewrite: {
        'header.json': 'demo.json' //若是請求的四header.json 則替換成 demo.json
      },
      changeOrigin: true,//突破原網站對代理的限制
      headers: { //設置請求頭
        host: 'www.dell-lee.com',
        cookie:'123'
      }
    }
  }
}

更多配置詳見官網文檔： https://webpack.js.org/configuration/dev-server

6 devserver 若是不作配置，使用路由跳轉頁面的時候，好比想訪問 localhost:8080/list 這個路徑會報錯，由於他覺得是要訪問這個路徑，可是是單頁面應用，因此須要在devserver中配置：

devServer: {
  historyApiFallback:true
}

這樣的話，訪問任何的路徑（後端服務器沒有的路徑）都會跳轉到當前的根路徑。上線後須要後端修改ngnix或者apaqi服務器上設置（找不到頁面跳轉到首頁）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。