webpack的安装和常用插件

前端工程化的具体解决方案

   提供了友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端javascript的兼容性，性能优化等强大的功能。

1. 在项目中安装webpack以及webpack-cli
   
   -S是- -save的简写，安装路径节点在dependencies（在dependencies中是项目开发和上线阶段都在使用的依赖)。
   -D是- -save-dev的简写，安装路径节点在devDependencies（只在开发阶段使用的依赖)。
   webpack可以解决兼容性问题，在webpack.config.js的webpack的配置文件中，mode指定了构造模式，development是开发模式，production是上线模式。在package.json的scripts节点下，新增dev脚本

2. 使用Vue脚手架构建项目
   1.打开控制台，安装Vue脚手架
   

   2.安装cnpm
   
   3.查看Vue版本，确认是否安装成功
   4.在项目所需要放置的文件目录下打开控制台，输入：
   
   初始化项目(此处的my-project为项目名称，使用驼峰命名法也可以)
   5.模板下载完成后vue-cli将引导我们进行项目配置
   
   6.cnpm install 安装项目依赖
   7.npm start (开发版本) npm run build (生产版本)

3. webpack使用webpack.config.js配置文件(自定义打包的入口与出口，不借助webpack-cli)
   1.默认打包入口文件为src目录下的–>index.js
   2.默认文件的输出路径为dist文件下的–>main.js
   在webpack.config.js配置文件中，通过entry节点指定打包的入口，通过output节点指定打包的出口
   

4. 常用插件的安装和配置
   1.webpack-dev-server
   类似于node.js时用到的nodemon工具，每当修改了源代码，webpack会自动进行项目的打包和构建
   
   修改package.json–>scripts中的dev命令如下，通过 npm run dev 重新进行项目的打包
   
   webpack-dev-server实时打包的工作原理(修改源代码以后，监听到源代码的改动，实时打包编译，生成的文件放在内存里)

   2.html-webpack-plugin
   webpack中的html插件(类似于一个模板引擎插件),可以通过插件自定义index.html页面的内容
   
   在webpack.config.js中配置指定的页面复制一份放在根目录里面
   
   了解html-webpack-plugin插件的特性
   把指定目录下的页面放在项目的根目录里面去，若修改index.html中的js文件，复制出的页面中会自动注入未修改的js的脚本。

5. 了解devServer中常用的选项
   devServer节点：
   在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置(自定义)，示例代码如下:
   
   注：凡是修改了webpack.config.js配置文件，或者修改了package.json配置文件,必须重启实时打包的服务器，否则最新配置无法生效

   • vue-cli构建的项目目录下，在config文件下的index.js中
     
     在http协议中，如果端口号是80，可以省略端口号