这是我参与「第四届青训营」笔记创作活动的的第18天，今天主要记录的内容是首次接触webpack的一些学习笔记以及个人感悟.

一、本文内容

模块包的概念
webpack是什么？
webpack有什么用？
moudle和export对比
webpack怎么安装搭建？

二、模块和包

如果你有一定的编程基础，那么你知道在c语言中我们可以include某个文件比如最熟悉的stdio文件，此时stdio文件就是模块或者包，亦或者是python种的某个文件import method from 111.py ，此时的模块就是111.py了，想信你看了上述的描述大概可以明白什么是包了，以及什么是模块其实就是一个东西俩个概念，不同开发人员叫法不同.我们知道在前端开发是没有包的概念的没有引用，但是为了方便开发不得不使用，所以就绪要学习一下如何加快开发了。

三、webpack是什么？

webpack是现代 JavaScript 应用程序的静态模块打包器，大白话就是将前端杂乱无章的资源，打包成一个文件，主要有js、css、json以及图片格式,简单理解可以比作为是一个编码器.就是输入东西然后生成指定文件这么个东西.

四、webpack有什么用?

使用webpack可以加快页面访问速度，理论上减轻服务器相应次数，为什么这么说，因为webpack主要功能是讲大量的文件压缩成一个文件，这样页面向服务器发送请求会从100个减少到1个，降低了访问次数，减轻了服务器次数，同时让程序开发效率变高，模块化思想开发程序完美的低耦合.

五、Node中的moudle和es6的export对比

首先需要安装node环境，nodejs.org/zh-cn/downl… 点击连接进去选择对应电脑系统进行软件下载，然后无脑安装，安装好配置下系统环境变量目的让全局可以使用node，配置好后在cmd里输入node -v 查看node版本号，正常显示说明安装成功。

安装好后，新建一个文件叫1.js,代码如下，作为模块导出去.


var p = {
    name:'zl',
    age : 15
}
var f1 = () =>{
    console.log('早上好！');
}
var f2= () =>{
    console.log('晚上好');
}
module.exports.f1 = f1;
module.exports.f2 = f2;
module.exports.p = p;

然后新建一个文件叫 2.js,代码如下，是主要运行的文件,然后在使用命令 node 2.js，即可看到正常运行结果，如图1所示.

var res = require('./1.js')
res.f1();
res.f2();
console.log(res.per);

图1 使用结果

由于技术更新迭代，出现了es6语法，有了export default和import为了使用该语句引入了webpack,我们新建3.js，作为包代码如下.

function say(){ 
   console.log('123');
}
export default say;

新建文件4.js作为主文件，代码如下，很简答一句引入然后使用.

import cc from 'c.js'
cc();

我们发现在node里却运行不了该文件，因为不支持改语法，所以我们需要使用webpack编译了.代码保留接着看下文.

六、webpack搭建项目

首先找一个文件夹然后打开终端:

1.全局安装一下webpack

npm i -g webpack
npm i -g webpack-cli

2.然后运行npm init初始化项目，一直无脑按回车即可，里面如果有自己想改的项目信息，可以读一下英文名然后进行修改,在最后也可以改.会生成package.json文件，里面存放了一些配置信息.

3.本地安装webpack会生成一个文件夹不用管；node_modules.

npm i -D webpack
npm i -D webpack-cli

4.然后分别新建这几个文件夹和文件src dist webpack.config.js，在webpakc.config.js文件里输入下面内容.


const path = require('path');
module.exports = {
  // JavaScript 执行入口文件
  entry: './src/index.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  }
};

主要注意entry是入口，output是出口,filename是输出的文件夹名字.

5.在src文件夹下面创建index.js和show.js文件.index.js为入口文件，show.JS是模块需要导出才能使用，使用

index.js
const show = require('./show.js');
show('every reader');

show.js
function show(content) {
    window.document.getElementById('root').innerText = 'Hello,' + content;
}
export default show;

6.然后在disk文件夹下新建index.html文件，然后写整个html框架然后写下面的代码.

<div id="root"></div>
<script src="./bundle.js"></script>

6.好了无脑配置上述信息，然后就是最重要的一步那就是编译了直接终端输入webpack.打开index.html去看看吧，是不是看到了想要的结果.

上述就是整个简单的项目大家过程.

七、总结

经过简单的学习使用了一下webpack进行简单项目搭建流程，同时也明白了webpack的作用，以及一些简单的概念，最后如果有哪里不懂，欢迎留言!!!

webpack新手浅谈项目搭建 | 青训营笔记