// cheap-module-eval-source-map is faster for development
// devtool是开发工具选项，用来指定如何生成sourcemap文件，cheap-module-eval-source-map此款soucemap文件性价比最高
devtool: '#cheap-module-eval-source-map',
plugins: [
// DefinePlugin内置webpack插件，专门用来定义全局变量的，下面定义一个全局变量 process.env 并且值是如下
/\* 'process.env': {
NODE_ENV: '"development"' } 这样的形式会被自动转为 'process.env': '"development"' development如果不加双引号就当做变量处理，程序会报错 */ new webpack.DefinePlugin({ 'process.env': config.dev.env }), // github.com/glenjamin/w… new webpack.HotModuleReplacementPlugin(), // 下面这个插件比较简单，就是当webpack编译错误的时候，来中断打包进程，防止错误代码打包到文件中 new webpack.NoEmitOnErrorsPlugin(), // github.com/ampedandwir… // 下面这个插件介绍过了 new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true // 设置为true表示把所有的js文件都放在body标签的屁股 }), // 使用FriendlyErrorsPlugin插件，介绍过了，这个插件的其他细节还设置在dev-server-js文件中 new FriendlyErrorsPlugin() ] })
### 二、html-webpack-plugin
`html-webpack-plugin`插件是用来生成`html`文件的，有很灵活的配置项，下面是基本的一些用法。
plugins: [ new HtmlWebpackPlugin(), // Generates default index.html new HtmlWebpackPlugin({ // Also generate a test.html filename: 'test.html', // 生成的文件的名称 title: 'Custom template', // 文件的标题 template: 'my-index.ejs' //可以指定模块html文件 }) ]
下面是模板文件`my-index.ejs`的内容
### 三、friendly-errors-webpack-plugin 插件
`friendly-errors-webpack-plugin`插件把`webpack`编译出来的错误展示给我们，方便调试。
#### 3.1 安装
npm install friendly-errors-webpack-plugin --save-dev
#### 3.2 基本使用
plugins: [ new FriendlyErrorsWebpackPlugin(), ]
使用这个插件时要遵守以下几点：
* 需要关闭所有的错误日志记录，将`webpack`配置静默选项设置为`true`.
在使用`webpack-dev-middleware`插件，关于这个插件的解释在`dev-sever-js`配置文件中有解释，设置以下内容
app.use(require('webpack-dev-middleware')(compiler, { quiet: true, // 必须设置 publicPath: config.output.publicPath, }));
使用`webpack-dev-server`时设置如下
{ devServer: { quiet: true } }
使用`webpack-hot-middleware`中间件
app.use(require('webpack-hot-middleware')(compiler, { log: () => {} }));
完成以上配置，就可以正常使用这个插件，这个插件还有一些配置项，感兴趣自行了解。
### 四、HotModuleReplacementPlugin
`webpack`支持如下模块
* `CoffeeScript`
* `TypeScript`
* `ESNext (Babel)`
* `Sass`
* `Less`
* `Stylus`
这些模块支持如下导入方式：
>
> * `ES2015 import` 语句
> * `CommonJS require()` 语句
> * `AMD define` 和 `require` 语句
> * `css/sass/less` 文件中的 `@import` 语句
> * 样式(`url(...)`)或 HTML 文件(`<img src=...>`)中的图片链接(`image url`)
>
>
>
这个插件的作用就是当程序在运行时，而你现在要替换、添加或删除某个模块，又不想重新加载页面， 这个插件可实现无刷新加载，关于内部实现原理，各位请自行查看。
### 五、拓展阅读
# 判断
回到题目，如果你真想检验一个人的水平。第一步先考察一下基本的编程基础，问几个基本的编程问题，可以和前端相关也可以无关。比如垃圾收集大致是怎么做的，setTimeout 大致做了什么（说会在另一个线程里执行回调的直接毙掉）。
第二步考察一下知识面，问问http、tcp的基本知识，dns是怎么工作的，或者常用框架的实现原理，看看候选人是不是除了自己的一亩三分地什么都不关心。
第三步考察hold业务逻辑的能力，从一个简单的注册页，或者查询页开始，先让说下代码的基本架构，然后需求、性能、可靠性、安全层层加码，看看能不能很快的反馈出解决方案。能对答如流的要么做过，要么对他来说这种复杂度的东西是小case。
前三步都没问题，基本上说明候选人已经还行了，但是行到什么程度，不知道。如果想找比较厉害的，就增加个第四步，亮点项目考察。
总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了，**我整理一套前端面试题分享给大家，希望对即将去面试的小伙伴们有帮助！**
**开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**
