需下载插件：workbox-webpack-plugin

webpack.config.js

  1. const { resolve } = require('path')
  2. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  3. const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
  4. const HtmlWebpackPlugin = require('html-webpack-plugin');
  5. const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
  6. /*
  7.    PWA：渐进式网络开发应用程序（离线可访问）
  8.    workbox --> workbox-webpack-plugin
  9. */
  11.  //定义nodejs环境变量：决定使用browserslist的哪个环境
  12. process.env.NODE_ENV = 'production'
  14. //复用loader
  15. const commonCssLoader = [
  16.     MiniCssExtractPlugin.loader,
  17.     'css-loader',
  18.     {
  19.         //还需要在package.json中定义browserslist
  20.         loader: 'postcss-loader',
  21.         options: {
  22.             ident: 'postcss',
  23.             plugins: () => [
  24.                 require('postcss-preset-env')()
  25.             ],
  27.         }
  28.     }
  29. ]
  31. module.exports = {
  32.     entry: './src/js/index.js',
  33.     output: {
  34.         filename: 'js/built.[contenthash:10].js',
  35.         path: resolve(__dirname, 'build'),
  36.         // publicPath: 'build'
  37.     },
  38.     module: {
  39.         rules: [
  40.             {
  41.                 //在package.json中eslintConfig --> airbnb
  42.                 test: /\.js$/,
  43.                 exclude: /node_modules/,
  44.                 //优先执行
  45.                 enforce: 'pre',
  46.                 loader: 'eslint-loader',
  47.                 options: {
  48.                     fix: true
  49.                 }
  50.             },
  51.             {
  52.                 //以下loader只会匹配一个
  53.                 //注意：不能有两个配置 处理同一个文件
  54.                 oneOf: [
  55.                     {
  56.                         test: /\.css$/,
  57.                         use: [...commonCssLoader],
  58.                     },
  59.                     {
  60.                         test: /\.less$/,
  61.                         use: [...commonCssLoader, 'less-loader']
  62.                     },
  63.                     /**
  64.                      * 正常来讲，一个文件只能被一个loader处理
  65.                      * 当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
  66.                      * 先执行eslint 再执行babel
  67.                      */
  69.                     {
  70.                         test: /\.js$/,
  71.                         exclude: /node_modules/,
  72.                         loader: 'babel-loader',
  73.                         options: {
  74.                             presets: [
  75.                                 [
  76.                                     '@babel/preset-env',
  77.                                     {
  78.                                         //按需加载
  79.                                         useBuiltIns: 'usage',
  80.                                         //指定core-js版本
  81.                                         corejs: {
  82.                                             version: 3
  83.                                         },
  84.                                         targets: {
  85.                                             chrome: '60',
  86.                                             firefox: '60',
  87.                                             ie: '9',
  88.                                             safari: '10',
  89.                                             edge: '17'
  90.                                         }
  91.                                     }
  92.                                 ],
  93.                             ],
  94.                             //开启babel缓存
  95.                             //第二次构建时，会读取之前的缓存
  96.                             cacheDirectory:true
  97.                         }
  98.                     },
  99.                     {
  100.                         test: /\.(jpg|png|gif)/,
  101.                         loader: 'url-loader',
  102.                         options: {
  103.                             limit: 8 * 1024,
  104.                             name: '[hash:10].[ext]',
  105.                             outputPath: '../imgs',
  106.                             esModule: false,
  108.                         }
  109.                     },
  110.                     {
  111.                         test: /\.html$/,
  112.                         loader: 'html-loader'
  113.                     },
  114.                     {
  115.                         exclude: /\.(js|css|less|html|jpg|png|gif)/,
  116.                         loader: 'file-loader',
  117.                         options: {
  118.                             outputPath: 'media',
  120.                         }
  121.                     }
  123.                 ]
  124.             }
  126.         ]
  127.     },
  128.     plugins: [
  129.         new MiniCssExtractPlugin({
  130.             filename: 'css/built.[contenthash:10].css'
  131.         }),
  132.         new OptimizeCssAssetsWebpackPlugin(),
  133.         new HtmlWebpackPlugin({
  134.             template: './src/index.html',
  135.             minify: {
  136.                 collapseWhitespace: true,
  137.                 removeComments: true
  138.             }
  139.         }),
  140.         new WorkboxWebpackPlugin.GenerateSW({
  141.             /**
  142.              * 1.帮助serviceworker快速启动
  143.              * 2.删除旧的serviceworker
  144.              * 
  145.              * 生成serviceworker的配置文件
  146.              */
  147.             clientsClaim:true,
  148.             skipWaiting:true
  149.         })
  150.     ],
  151.     mode: 'production',
  152.     devtool:'source-map'
  153. }

index.js

  1. import { mul } from './test';
  2. import '../css/index.css';
  4. function sum(...args) {
  5.   return args.reduce((p, c) => p + c, 0);
  6. }
  8. // eslint-disable-next-line
  9. console.log(mul(2, 3));
  10. // eslint-disable-next-line
  11. console.log(sum(1, 2, 3));
  13. /**
  14.  * 1.eslint不认识window.navigator全局变量
  15.  * 解决需要修改webpack.json中eslintConfig配置
  16.  *  "env":{
  17.       "browser":true
  18.     }
  19.     2.sw代码必须运行在服务器上
  20.     --> nodejs
  21.     -->
  22.       npm i serve -g
  23.       serve -s build 启动服务器，将build目录下所有资源作为静态资源暴露出去
  24.  */
  26. // 注册serviceworker
  27. // 处理兼容性问题
  28. if ('serviceWorker' in navigator) {
  29.   window.addEventListener('load', () => {
  30.     navigator.serviceWorker.register('./service-worker.js')
  31.       .then(() => {
  32.         console.log('sw注册成功');
  33.       })
  34.       .catch(() => {
  35.         console.log('sw注册失败');
  36.       });
  37.   });
  38. }

package.json

"eslintConfig": {
    "extends": "airbnb-base",
    "env":{
      "browser":true
    }
  },