为什么需要构建工具
转换ES6语法 转换JSX CSS前缀补全/预处理器 压缩混淆 图片压缩
初识webpack
webpack默认配置文件：webpack.config.js
可以通过webpack --config指定其他的配置文件 比如可以在开发过程中使用webpack --config webpack.dev.config.js
在生产环境可以使用 webpck --config webpack.produce.config.js
webpack 配置组成
环境搭建 安装node.js npm /安装webpack webpack-cli
安装webpack webpack-cli
在webpack4里面 将 webpack内核和webpack-cli进行了分离，因此在实际项目使用 我们需同时安装webpack webpack-cli 创建空目录和package.json mkdir my-project cd my-project npm init-y (-y是默认都选择yes 这时候会生成初始的package.json的文件) npm install webpack webpack-cli --save-dev(dev安装的是devDependencies里面，不会安装dependencies里面) 安装好了之后，我们可以打印一下安装的版本看一下安装是否成功
安装完webpack,通过简单的例子感受一下webpack的使用
webpack初体验，一个简单的例子
创建一个webpack配置文件 webpack.config.js
这个例子设定了下 entry output mode 对于entry 我们将src/index.js作为入口文件 output我们输出到当前文件夹下的dist目录，dist这个目录输出的文件名叫bundle.js,同时我们指定mode值为 production也就是生产环境 webpack.config.js需要通过module.exports = {}导出个对象的 编写代码：
接下来进行打包 首先还是找到./node_modules/.bin/webpack 可以直接运行 直接运行就是不指定webpack配置文件的名称
这时候就打包好了 然后我们看一下打包的结果是什么样子的
这里可以看到打包出来放到dist目录，dist目录有一个bundle.js文件输出出来了 我们可以看一下这个效果，因为目前没有Html文件的，为了看效果，我们手动创建一个html文件 在这个html文件里面，手动的把这个打包好的脚本bundle.js引入进来
用浏览器打开一下
这个时候效果就出来了，不过大家可能通过这个例子发现，目前运行webpack打包的话可能是比较麻烦的 需要./node_modules/.bin/webpack 这一串 所以我们可以通过便捷的方式进行webpack的打包。
通过npm script运行webpack
每次我们安装依赖(webpack )，这样依赖如果有创建命令的话，它会在./node_modules/.bin下创建一个软连接，那么我们 package.json可以默认读到./node_modules/.bin下命令，所以可以直接在package.json指定一个scripts，里面指定webpack就可以了， 如果在scripts运行webpack,它就会去./node_modules/.bin下去寻找，
配置一下试试，
这样我们就可以npm run build进行打包。
