为什么需要模块化?
答：真实开发的时候，代码量大，js文件多，分工开发的时候大家都不知道别人的代码，容易引发全局变量灾难。
node应用由模块组成，采用的commonjs模块规范。每一个文件就是一个模块，拥有自己独立的作用域，变量，以及方法等，对其他的模块都不可见。CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。require方法用于加载模块。
https://www.jianshu.com/p/dd08f4095a49
导入是model.export={}，导出是let{变量1，变量2，变量3}= require('模块A')
npm（node package manager）用来管理node的包。webpack需要node环境才能正常运行，webpack是中间的模块化打包，它打包后生成一个文件夹，把文件夹放在服务器部署就可以使用了。
npm install webpack@3.6.0 -g使用命令在cmd进行全局安装，可以指定版本。安装后通过
webpack --version能够查看版本则安装成功
这个webpack怎么使用呢？非常简单。
function add(num1,num2){
return num1+ num2
}
function mul(num1,num2){
return num1*num2
}
module.exports={
add,
mul
}这是mathUtil.js文件，是个简单的工具类实现了加法和乘法，我们在main.js中想要使用这个类则：
//commonjs规范
const{add,mul} = require('./mathUtil.js')
console.log(add(20,30))
console.log(mul(20,30))通过commonjs规范来引入mathUtil文件中add和mul两个方法。也可以：
//es6模块化规范
import {name,age,height} from "./info"
console.log(name)
console.log(age)
console.log(height)使用es6模块化规范来引入info文件中的三个变量。在你准备用index.html文件测试的时候需要在控制台这样使用webpack
webpack .\src\main.js .\dist\bundle.js这样在dist文件夹内就生成了bundle.js文件，它会帮助你处理那些引用的包，然后你只需要在index中引用它就可以了。
<script src="./dist/bundle.js"></script>
虽然可以这样使用，但是使用起来还并不是很方便，我们还有更规范的使用方法：
首先在控制台输入：npm init，然后根据提示进行回车/更改，生成了package.json文件，里面是项目的一些信息。然后我们在项目的文件夹下建一个webpack.config.js文件，这个文件只能是这个名字。内容如下
const path = require('path')
module.exports={
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
}这里entry代表项目入口，output为项目出口，path中使用path.resolve对dirname和文件夹dist进行拼接形成了生成bundle.js路径的名字，然后文件名我们起名为bundle.js这时候我们就可以直接输入webpack命令直接编译了。这里需要注意的是webpack命令一定要在你项目那个文件夹（也就是webpack.config文件所在的文件夹内）使用。
使用webpack命令并不是十分专业，我们在package.json文件里找到：
build后面输入命令webpack，之后我们通过输入
npm run build就可以实现webpack的功能了。他会优先去本地找命令，如果没有再使用全局的命令。本地的webpack包可能依赖的版本和全局不一样，所以这样更加合适。终端里的命令使用的都是全局的。
npm install webpack@3.6.0 --save-dev使用这行代码进行本地式依赖的webpack的安装。
上面我们学习了webpack，webpack可以帮我们处理js代码，帮我们自动处理js代码之间的依赖。那么还有图片文件、css文件还有其他转换webpack做不到，我们使用webpack的扩充loader来实现。
先使用npm安装loader，官网有非常简单的步骤：https://www.webpackjs.com/loaders/css-loader/#%E5%AE%89%E8%A3%85
在src目录下建立一个css文件夹，里面写一个背景红色的样式：
那么如何可以使用这个样式呢？首先我们根据上面的网站下载了styleloader和cssloader，
npm install style-loader --save-dev还有个去官网查把，然后下载好了就可以到webpack.config.js文件把官网让复制的内容复制进去：
module: {
rules: [
{
test: /\.css$/,
//stype 负责将样式添加在dom中 多个loader从右向左进行
use: [ 'style-loader','css-loader' ] //css loader只负责加载
}
]
}
}就是这个module，use里面的加载是从右往左的，所以先加载css-loader之后在使用styleloader把css样式添加到dom中。
都下载完成后npm run build没有报错就可以了。
webpack上使用less文件的顺序，和上面的顺序也相似：
1.首先到上面那个网站找到下载命令，下载一下
npm install --save-dev less-loader less2.在把需要复制的内容复制到webpack.config.js
module: {
rules: [
{
test: /\.css$/,
//stype 负责将样式添加在dom中 多个loader从右向左进行
use: [ 'style-loader','css-loader' ] //css loader只负责加载
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}
]
}这里rules中第一个大括号是前面加入的内容，后面是新加入的内容。加入后build一下就可以使用了。例如我在一个less文件定义了：
main.js中使用依赖：第二个是less的
然后
这样就可以了。
图片格式的：
把图片文件放在img文件夹，在normal中使用
background:url("../img/动漫人物.jpeg")之后和前面一样下载url loader
npm install --save-dev url-loader把官方内容加进去：
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
//加载图片小于limit时候变成base64
limit: 140000
}
}
]
}这里手动添加了一个jpeg格式的识别，limit中的内容可以修改。如果图片较大可以使用fileloader的方式进行使用。
在webpack.config文件前面添加：
publicPath:'dist/'这样以后的url的文件都从dist下面去找。
name:'img/[name].[hash:8].[ext]'在option中图片部分添加这种形式可以让生成的图片按照这种方式命名。
