首先创建好文件夹目录 并且安装好NODE git webpack
安装
npm i -g webpack
分别内容写入到对应的文件
app.js
import modules from './modules';
(前面的modules 代表自定义接收"./moudules"里面default的函数;)
modules();
执行方法
document.write('I am App');
index.html
引用生成好的文件
<script src="./dist/bundles.js" charset="utf-8"></script>
modules.js
导出默认的方法，使用default系统自动生成默认方法
export default function () {
console.log('I am modules');
}#在项目的根目录打开GIT/node 输入
webpack ./app.js ./dist/bundles.js 回车
eg：wepack 入口文件 新文件放的位置
#可以看到dist目录下多了一个bundles.js文件，执行index.html文件,并打开控制台，会看到输出如下：
如果你上面明白了webpack简单的工作原理，那么下面开始修炼webpack进阶版
1.同样先进行文件目录创建
前面的app.j、index.html、modules.js、都是一样的类容，多创建了两个文件
在项目根目录下面执行
npm i -D webpack-dev-server 回车
npm init -y <执行完成后会自动创建一个package.json>
<如果会用yarn，那最好>####在手动创建一个webpack.config.js文件内容如下：
const path = require('path');
module.exports = {
//入口文件地址
entry: './app.js',
//输入文件的地址
output: {
//__dirname代表node打开文件的根目录
path: path.join(__dirname, 'dist'),
//文件存放的目录位置
publicPath: '/dist/',
//新文件的名字
filename: 'bundle.js'
},
//创建一个端口为3000，并且执行的目录为/dist/
devServer: {
publicPath: "/dist/",
//端口为3000
port: 3000
}
}
###准备工作都做完成的时候，模块也装好了就会出现下图内容
打开package.json文件
在scripts的对象里面添加
"dev":"webpack-dev-server"
##打开根目录执行
npm run dev 回车
或者输入webpack 回车
打开index.html 文件看效果就成功了
