服务器对大前端扫盲 Vue.js + Element-UI(4)

devtool: "eval-source-map" webpack打包后的文件可读性非常低，不利于调试，使用devtool可以生成对应的源码便于调试。使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项;

3.2 webpack-dev-server

webpack-dev-server 是一个本地开发服务器，居于node.js实现的，使用npm run dev 后就可以使用默认的8080端口在浏览器上访问了，类似于apache的功能

3.3 loaders

loader可以让webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件(ES6，ES7)转换为现代浏览器兼容的JS文件

css-loader 和 style-loader 就是用来处理样式的。

3.4 babel(很重要)

Babel其实是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：

让你能使用最新的JavaScript代码(ES6，ES7等待)，而不用管新标准是否被当前使用的浏览器完全支持;

让你能使用基于JavaScript进行了拓展的语言，比如React的JSX;

3.5 plugins

插件(Plugins)是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。

Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的(JSX，Scss，Less..)，一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。

Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。

常用的插件：

HtmlWebpackPlugin

Hot Module Replacement(HMR) 热加载：允许你在修改组件代码后，自动刷新实时预览修改后的效果

clean-webpack-plugin 去除build文件中的残余文件

OccurenceOrderPlugin :为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID

UglifyJsPlugin： 压缩JS代码

ExtractTextPlugin：分离CSS和JS文件

3.6 webpack配置文件

如果与输入相关的需求，找entry(比如多页面就有多个入口)

如果与输出相关的需求，找output(比如你需要定义输出文件的路径、名字等等)

如果与模块寻址相关的需求，找resolve(比如定义别名alias)

如果与转译相关的需求，找loader(比如处理sass处理es678N)

如果与构建流程相关的需求，找plugin(比如我需要在打包完成后，将打包好的文件复制到某个目录，然后提交到git上)

五：vue.js是什么

5.1 简介

它是一个轻量级的MVVM框架。

使用 数据驱动+组件化 来开。

数据双向绑定(当修改视图时数据也会赋值给model，当更改model的时候也会反应到视图上)。

（编辑：ASP站长网）