老师，你好，我这边新建一个文件  registerServiceWorker.js 文件

export default function registerServiceWorker() {
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/sw.js').then((registration) => { // 注册成功
        console.log('SW registered: ', registration); // eslint-disable-line
      }).catch((registrationError) => { // 注册失败
        console.error('SW registration failed: ', registrationError); // eslint-disable-line
      })
    })
  }
}

然后在 app.js 中引用 

import registerServiceWorker from './registerServiceWorker'
registerServiceWorker()

老师应该把 sw.js 新建在什么地方才可以访问到呀，还是需要怎么修改

如果是 navigator.serviceWorker.register('/sw.js') 那么网络请求的是 http://localhost:3333/sw.js

如果是 navigator.serviceWorker.register('/public/sw.js') 那么网络请求的是 http://localhost:3333/public/sw.js

还是应该修改 webpack 配置，应该怎么才能直接访问 目录 下的 js 文件

现在查找学习下来在开发模式下应该  修改devServer:{contentBase:''}才能加载sw.js

使用 copyWebpackPlugin{from:"",to:""} 来归类所有静态文件 做个尝试