JS中的模块化实现
- 先来看一下JavaScript如何实现模块话开发。其实很多小伙伴都会这种操作，那我们就当复习了，再预习一遍知识。看下面ES6中的模块化代码。
function jspang() {
alert('jspang.com:' + 'webpack');
}
module.exports = jspang;
- 上面的代码是一个最简单的es6模块化写法，我们声明了一个jspang方法，并且把这个方法用module.exports进行暴露出去。然后我们在入口文件中用import进行引入，并进行使用。
import jspang from './jspang.js';
jspang();
- 我们了解如何作Javascript的模块化后，其实webpack的模块化和上边的过程很类似。
webpack模块
- 为了让大家容易看懂，我把webpack.config.js中的entry入口文件进行模块化设置，单独拿出来制作成一个模块。
- 首先在根目录，新建一个webpack_config文件夹，然后新建entry_webpack.js文件，代码如下：
entry_webpack.js
//声明entry变量
const entry = {};
//声明路径属性
entry.path = {
entry: './src/entry.js'
}
//进行模块化
module.exports = entry;
- 配置的模块化代码编写好以后，需要在webpack.config.js中引入，注意这里的引入只能使用require的方法。
const entry = require("./webpack_config/entry_webpack.js")
- 然后在入口文件部分，修改成如下代码：
entry: entry.path
- 这时候你可以再次使用npm run dev 进行测试，你会发现模块化成功了。
