vue 中webpack学习

webpack模块化打包机 或者 模块打包工具。
它是一个工具。打包工具“打包”，帮助我们将不同的资源和文件，进行打包，也就是合并在一个文件里面 。css js img等 ⇒　一个js
模块化，两个js就是两个模块
附加功能：
1.CSS 预处理。将 Less, Sass 编译成css
2.减少io请求。通常我们在请求后，会返回一个html到浏览器。这时，我们如果打开控制台，就会发现在html页面通过script,link等标签引用的静态资源， 浏览器会再次发出请求去获取这些资源。但是webpack的打包，将所有的静态资源都合并好了，减少了io请求。
vue 项目中 使用vue-cli创建的vue项目，直接集成了webpack工具

image.png

const path = require('path');
module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build')
    }
}

创建webpack.config.js文件，做一个接口并暴露出来：module.exports = {}，其中配置项一共有五项：
entry：入口文件
output：出口文件
module：模块，用于打包、图片转换压缩等配置
plugins：项目中所需的插件(数组，可以有多个，其余的都是对象)
devserver：配置的开发服务

image.png

编译结果：编译前多个文件夹结构，多个文件，打包以后 大部分js被打成一个app.js包。