Vue Webpack

vue Webpack

什么是Webpack：
它是模板打包的工具，可以分析项目结构，发现其他一些拓展语言（TypeScript、Scss）等等，这些拓展语言浏览器是不能识别的，将他们转化打包成浏览器可以识别的。

Webpack的工作方式：
把项目当成是一个整体，找到index.js主文件，然后从这个文件开始找到项目中的所有依赖文件，使用loaders处理，最后打包成浏览器可识别的js文件。

webpack把所有的文件当成模块，通过loaders来处理

使用webpack

第一种是在终端输入命令
指定入口文件和文件打包后放置的地方，如果weibpack不是全局安装的，还要指定weibpack在node_modules中的地址。
但是容易出错。
第二种是可以通过配置文件
webpack.config.js文件中，里面都是相关的配置代码，目前涉及的内容是入口文件和打包后的文件的路径，然后在终端输入相关命令。
（非全局安装webpack）node_modules/.bin/webpack
如果命令都不用输入，那岂不是更好？就用第三种打包方式。
第三种用npm
在package.json的script进行相关设置，里面有一定顺序的命令的位置。npm会引导任务执行，通过npm start或者是npm run (script name)就可打包文件。

source maps

当我们需要调试代码的时候，通过打包后的文件不容易找到相关代码的位置，我们可以在webpack.config.js配置文件中定义devtool配置，有四种相关的配置选项。这样会生成source maps文件或者是文件模块，它提供了一种编译文件和源文件的方法。
其中在配置选项种eval-source-map适用于小到中型的项目。

devserve

webpack提供一个本地的开发服务器，默认为8080端口，可以让浏览器实时监听代码，并且可以自动更新，不过它是一个单独的组件，需要安装。

Loaders

使用loaders，webpack可以调用外部的脚本或者工具，对不同格式的文件进行处理。比如把scss转换为css，ES6或者ES7转化成现代浏览器兼容的JS文件。也可以对React的JSX文件转化成JS文件。
可以在webpack.config.js配置文件中的moudule进行配置

Babel

Babel其实是一个编译代码的平台，它允许开发者使用ES6、JSX等代码，尽管浏览器不支持这些代码。
Babel其实是几个模块化的包，核心功能主要在babel-core的npm包中，每次你要使用一个功能，你都要单独安装包，webpack可以将不同的包整合在一起使用。用的最多的是解析ES6的babel-env-preset和解析JSX的babel-preset-react

CSS

css-loader实现require的功能
style-loader将所有的计算后的样式加入到页面中
两者结合可以将样式嵌入到打包后的JS文件
以后根据项目再来补充吧。。。

Plugins

loaders和Plugins的区别：loaders一次处理一个源文件，比如scss
、JSX等。Plugins是直接对整个构建过程起过程。
先用npm安装后，然后在webpack中的Plugins中增加插件的实例，Plugins是一个数组。

1. HtmlWebpackPlugin
   会依据一个index.html模板自动生成一个index.html，同时增加依赖的css、js、favicon等。在new插件实例中传入参数，参数为该模板的路径

2. Hot Module Replacement
   当我修改组件代码，会自动刷新修改后的效果。
   在webpack配置中增加实例代码后，还要再devserver增加hot参数。
   这样还不行，还要再js模块中执行一个webpack提供的API才能执行热加载。
   写的超级好