Webpack打包

1.什么是webpack？
模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
2.为什么使用webpack
现在是网络时代，在我们的生活中网络成为了必不可少的，我们在网络上可以看到很多漂亮的功能丰富的页面，这些页面都是由复杂的JavaScript代码和各种依赖包组合形成的，那么这些都是怎么*组合在一起的呢，组合在一起需要花费多少精力呢，经过漫长发展时间现前端涌现出了很多实践方法来处理复杂的工作流程，让开发变得更加简便。
模块化 可以使复杂的程序细化成为各个小的文件
预处理器 可以对Scss，less等CSS预先进行处理
3. weback使用流程
（1）目录结构

index.html是主入口，需要设置根目录并且将打包后的文件导入
runoob1.js是一个组件,它的目的是将我们写的一些代码模块返回并插入到页面中
（2） 安装
第一步，在code2文件目录下用npm init初始化，生成package.json文件

npm init

第二步，安装webpack

npm install webpack -g // 全局安装
npm install webpack --save-dev // 项目内安装

安装指定版本@xx --版本号

npm install webpack@xx -g
npm install webpack@xx --save-dev
//例如
npm install [email protected] --save-dev

注意：webpack4版需要去额外安装webpack-cli

npm install webpack@4 --save-dev
npm install webpack@4 webpack-cli --save-dev

第三步， 使用Webpack打包

// webpack2的命令
webpack src/runoob1.js dist/bundle.js
// webpack4的命令
webpack src/runoob1.js -o dist/bundle.js

src/runoob1.js：是入口文件的路径
dist/bundle.js：是打包文件的存放路径
打包成功后可以在dist文件下看到bundle.js

第四步 通过配置文件webpack.config.js来使用webpack

module.exports = {
    entry: path.join(__dirname, 'src/runoob1.js'),