webpack模块化配置

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 进行测试，你会发现模块化成功了。