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