webpack概念

webpack概念

Webpack是一种前端资源构建工具，一个静态模块打包器(module bundler)
一般我们比如编写个less文件或者带有ES6语法的js文件，浏览器可能就无法识别了，所以需要一个个小的编译工具将这些文件编译成浏览器能够识别的样子，构建工具就是将这些小的编译工具进行整合，我们只要关注构建工具怎么使用就可以了，webpack会从一个入口文件，一般是index.js开始，把index所导入（依赖）的文件的资源引进来，形成一个chunk（代码块），然后对代码块进行各项处理，比如把less编译成css，es6编译成普通语法。这些编译操作合起来称为打包，打包完将这些资源输出出去，输出出去的称为bundle

webpack五个核心概念

Entey
指示入口文件，分析构建内部依赖图
Output
指示打包完的文件(bundles)输出到哪里去，以为怎么命名
Loader
能让webpack处理非js文件，把less等资源翻译成webpack能识别的资源，因为webpack本身只理解js
Plugins
打包优化和压缩，一直到重新定义环境中的变量都可以做
Mode

webpack初体验

webpack可以打包js和json资源，但是不能打包css和图片资源
生产环境比开发环境多一个压缩js代码，生产环境和开发环境把es6模块编译成浏览器能识别的模块化
要使用webpack起码要安装webpack和webpack-cli（能让webpack在命令行使用webpack的功能）
运行指令
开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
意思就是以src下的index.js作为入口文件开始打包最后输出到build目录下的built.js文件中
生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
每次打包完都会产生一个哈希值
可以在build下创建一个index.html直接将打包后的js引入，方便查看结果