描述你的问题
之前项目中的js代码都是直接使用jquery，以 $(document).ready(function(){xxxxx}) 的形式写在html中。这样的代码看起来很low不说，还很难以维护。为了实现js和html的分离，我将$(document).ready(function(){xxxxx}) 这样的代码转移到了js文件中。
在后来, 项目中引入了es6, 非页面相关的js(不操作dom或者不监听DOM事件的js)都直接以es6 modules的形式组织起来了。可是 $(document).ready(function(){xxxxx}) 这样的代码如何封装成 es6 module 供其它js文件来import呢？
我目前的解决方法
我目前是将页面相关的js(也就是操作dom或者监听DOM事件的js)按照功能来分模块， 比如用户管理模块就叫user.js， 其中包含 后台中用户管理(用户列表，添加/编辑用户资料)的相关页面，以及前台个人资料(如编辑个人信息 等)相关页面的js。伪代码如下:
// user.js
$(document).ready(function(){
$('.front .profile .btn-edit').click(function(){
// 点击个人资料页面中编辑按钮的响应方法
...
});
...
$('.backend .user-list .btn-del').click(function(){
// 点击管理后台中用户列表页面的删除用户按钮的响应方法
...
});
...
});这样，如果当前页面是个人资料修改页面，那 肯定不存在 .backend .user-list .btn-del 这个元素， $('.backend .user-list .btn-del').click() 自然也就无效。同理，如果在后台用户管理的用户列表页面， $('.front .profile .btn-edit').click() 也就无效，如此页面相关的js肯定不会冲突。
但是这样的问题是，web项目中大部分的js代码都是页面相关的js(操作dom或者需要相应dom事件的js)。这样user.js这个文件就很大, 我想将其拆分成多个js文件，然后通过 import 的方式引用到入口文件中，再通过webpack打包。可是，$(document).ready(function(){xxxxx}) 这样的代码如何写才可以让其它js文件导入呢？
$(document).ready() 的写法和把js放到<body>结束的地方，效果一样。你自己的代码关于dom操作可以放在html结束的地方。如果是一些浏览器polyfill的代码，例如html5shiv放到header。
楼主说：可是 $(document).ready(function(){xxxxx}) 这样的代码如何封装成 es6 module 供其它js文件来import呢？，这句话矛盾啊。。啥叫非页面相关的js得先整明白啊
jQuery本身兼容了amd和CommonJS的规范，可以直接require，不需要全局引入
let $ = require('jquery');
//还是用标准的on方法更好一些
$(
$('.backend .user-list .btn-del').on('click', ()=>{
// 点击管理后台中用户列表页面的删除用户按钮的响应方法
...
});
);可是，$(document).ready(function(){xxxxx}) 这样的代码如何写才可以让其它js文件导入呢？
这个我没太明白你什么意思啊。
既然你都用webpack了，把$(document).ready(function(){xxxxx})放到entry文件中就可以了呀,至于其中你划分的小模块，都封装成module然后import进来就好，反正最后也是用使用webpack打包好的bundle.js。
如果你是想问怎么封装module文件，一般有个模板:
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
global.YourGlobalVar = factory();
}(this, function () {xxxxx})这可以保证在不同的模块标准和运行环境下都好用。
大神勿喷。