webpack入门构建

1）配置文件入口和出口

入口（entry）是指示webpack应该使用哪个模块来作为构建内部依赖js的开始，进入入口起点后，webpack会在找出有哪些模块和库是入口js依赖的；

出口（output）是告诉webpack在什么地方输出它所创建的bundles，以及如何命名这些文件，默认值为'./dist'；

2）使用loader

webpack的构建是一个采用CommonJS规范的模块化项目，通过module.rules数组配置一组规则，用来告诉webpack在遇到哪些文件时使用哪些loader去加载和转换；user属性的值是一个使用Loader名称组成的数组，Loader的执行顺序是由后往前的；配置loader的方式也可以使用Object来实现；

3）使用插件plugin

loader的作用是被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务，插件的范围包括：从打包优化和压缩，一直到重新定义环节中的变量。如果想要使用一个插件，我们只需要require它，然后把它添加到plugins数组中。我们可以在一个配置文件中因为不同的目的多次使用同一个插件，因此我们可以使用new操作符来创建它的实例。

4）使用devServer

webpack-dev-server

使用devServer可方便代码调试等功能；

功能一：实时预览

webpack -- watch

webpack在启动时可以开启监听模式，默认是关闭的，开启后webpack会监听本地文件系统的变化，当项目中入口文件或入口依赖的文件有改变的时候，他会自动重新构建，构建完成后会自动刷新下页面，但是如果修改的不是入口文件或入口依赖的文件是不会有任何效果的；devServer会将webpack构建出的文件保存在内存中，devServer不会理会webpack.config.js配置的output.path属性的；

功能二：模块热替换

webpack-dev-server --inline --hot【区别iframe--自动打包，浏览器不会自动刷新】

模块热替换技术能做到在不重新加载整个页面的情况下，通过将已更新的模块替换就模块，它默认是关闭的，通过--inline参数启动即可

功能三：支持Source Map

webpack-dev-server --inline --hot --devtool source-map

在浏览器中运行js代码都是编译器输出的代码，但是如果在代码中碰到一个bug时，我们不好调试，因此需要Source Map来映射到源代码上，webpack支持生成Source Map