webpack学习笔记（五）

1. 如果想编写一个libray的库，代码结构如下：

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

math.js

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.js

import _ from 'lodash';

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

index.js

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

export default { math, string }

为了使用下面方式引入：

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

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

需在配置文件中定义：

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；

2 如果我们写的库中已经引入打包过 lodash.js这个库，但是用户也在业务代码中引入了这个库，造成了重复引入。所以要在配置文件中设置 externals: 'lodash', 即打包时不打包依恋文件

扫描二维码关注公众号，回复： 5801809 查看本文章

3 结合pwa：

//对线上代码做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');
      })
  })
}

具体：

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

webpack学习笔记（五）

猜你喜欢