webPack打包工具介绍

传统的js文件需要一个一个的加载进来，在<script src=1.js>

1.问题：需要加载多个js文件，耗时长；
  解决：将多个js文件合并为一个；

2.项目页面，右键查看网页源码可以得到地址参数，安全问题；
  解决2：将js文件进行混淆编译；

就这个webPack工具会将js文件以及CSS样式文件进行打包；

通过这个webPack工具就可以将多个js文件，合并成一个文件;

比如这个：webpack.config.js

const path = requie('path')；
moudle.export={
    entry:'./src/index.js',              //打包入口文件
    output:{                   // 输出文件
        path:path.resolve(_dirName,'dist')// 创建文件夹
        filename:'boudle.js'             //打包后生成js文件，将来直接使用这个js文件即可；
    }

}

接下来配置好后，就直接进入有这个webpack.config.js文件，进行cmd中 webpack命令打包，打包后项目中就会出现dist文件夹，包含boudle.js文件；3.CSS打包
其实webpack本身只支持javaScript模块，如果要处理其他类型的文件，就需要使用loader进行转换。
这个loader可以理解为模块和资源的转换器，它本身就是一个函数，接受源文件作为参数返回转换的结果。
这样我们就可以通过require来加载任何类型的模块或文件，比如CoffeeScript、jsx、less或者图片。
首先我们就需要安装相关的loader插件，CSS—loader是将css装载到js文件中，style-loader是让javaScript认识css。
代码在原来的webpack.config.js修改：
需要在原来得改装一下：

moudle.export={
    entry:'./src/index.js',              //打包入口文件
    output:{                   // 输出文件
        path:path.resolve(_dirName,'dist')// 创建文件夹
        filename:'boudle.js'             //打包后生成js文件，将来直接使用这个js文件即可；
    }，
    // 其中这个moudle就是css的打包处理
    moudle:{
        rules:[
              test：/\.css$/,
              use:['style-loader','css-loader'] 
        ]
    }

}