## 注意 以下教程都是基于webpack3 ## 什么是webpack 是前端的一个项目构建工具,它是基于node.js开发出来的前端工具.webpack是基于整个项目进行构建的. ## webpack作用 1. webpack能够处理js的兼容问题,把高级的浏览器不识别的的语法,转换成低级的浏览器能正常识别的语法. 2. webpack能处理JS文件的互相依赖关系. 通过 ``` webpack 要打包的文件名 --output 要输出的文件名 //webpack3 不需要加--output webpack src/main.js --output dist/bundle.js ``` 命令将main.js编译成bundle.js文件引入到项目中.这样就可以只用导出这一个js文件了,而不用导入使用到的js依赖文件,比如jquery. ## 最基本文件配置 每次写输入文件和输出文件太麻烦了,可以在项目根目录配置webpack.config.js文件. 直接就可以通过webpack就可以自动打包了. 当我们在终端直接输入webpack命令执行的时候,webpack做了以下几步: 1. 我们并没有通过命令形式,给它指定入口和出口. 2. webpack就会去项目的根目录中,查找一个叫做'webpack.config.js'的配置文件. 3. 找到配置文件后,解析执行配置文件.当解析执行完,就得到了配置文件中导出的配置对象. 4. 当webpack拿到了配置对象后,就拿到了配置对象中指定的入口和出口.然后进行打包构建. ``` const path = require('path'); //这个配置文件,其实就是一个JS文件,通过Node中的模块操作,向外暴露了一个配置对象 module.exports = { //在配置文件中,指定入口和出口文件 entry: path.join(__dirname, './src/main.js'), //入口,表示要使用webpack打包那个文件 output: { //输出文件相关的配置 path: path.join(__dirname, './dist'), //指定打包好的文件,输出到哪个目录中去 filename: 'bundle.js', //指定输出文件的名称 } }; ```