今天去了中兴面试，中兴下属子公司，专给中兴做外包的，别的都没什么特别的，跟面试管聊了一下。回来检讨了下自己，可能有三个问题回答的不理想。
- 浅拷贝与深拷贝有什么区别
- 做一下自我简介
- webpack有些什么参数
第一个问题，其实这个问题是知道的，不知道怎么当时就短路了。虽然当时只知道assign和object.create这个能拷贝，递归可能不会写，但只要答出来与引用类型或是值类型相关的基础知识点，是没问题的。延伸问题包括如何实现深拷贝
对象只有一层的话：
最简单粗暴的就是直接写属性，但这样很麻烦，要一个一个自己复制；
var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = { a: obj1.a, b: obj1.b, c: obj1.c }
可以使用：Object.assign()函数，ES6
Object.assign({}, obj1)
意思是先建立一个空对象{}，接着把obj1中所有的属性复制过去
第三种方式，转成 JSON 再转回来
ar obj1 = { body: { a: 10 } };
var obj2 = JSON.parse(JSON.stringify(obj1));
这种方法只有可以转成JSON格式的对象才可以这样用，像function没办法转成JSON。
第四种递归
deepCopy (o, c) {
c = c || {}
for (let i in o) {
if (typeof o[i] === 'object') {
// 需要深拷贝
if (o[i].constructor === Array) {
// 数组
console.log('是数组')
c[i] = []
} else {
// 对象
console.log('是对象')
c[i] = {}
}
this.deepCopy(o[i], c[i])
} else {
c[i] = o[i]
}
}
return c
}
第五种方法 object.create
function deepClone(initalObj, finalObj) {
var obj = finalObj || {};
for (var i in initalObj) {
var prop = initalObj[i]; // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
if(prop === obj) {
continue;
}
if (typeof prop === 'object') {
obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
} else {
obj[i] = prop;
}
}
return obj;
}
第二个问题，没来的急准备，临时发挥，最好的应该是提前准备好，以此来引导面试官，而不是让面试官来问一个一个问你
第三个问题答的也不太好，简单的回答了一下，说有什么entry，output，这些，还配置一些babel，一般是用cli。
回来做了下功课，这个题目其实又设计到了前端工程化和构建自动化的相关问题，延伸到怎么实现前端工程化的相关问题。
- 提升开发效率
webpack-dev-server 热加载
数据mock
- 优化性能
代码合并压缩，混淆加密
减少小图片请求
部署静态文件缓存管理
- 提高代码质量
模块化
CSS 预处理
ES6 + babel 编译
代码检查
单元测试
UI 自动化测试
web组件化
webpack 的最大特点是一切皆为模块，一切全包，最适和应用在SPA一站式应用场景。只有简单几个页面的情况下使用 webpack 反而可能会增加不必要的配置成本，反而直接用gulp或者其他工具处理代码压缩，css 预处理之类的工作会更加快捷易用。
一些常见的配置
比如
entry: { // 入口文件，打包通过入口，找到所有依赖的模块，打包输出
main: resolve(webRootDir, './src/main.js'),
},
output: {
path: resolve(webRootDir, './build'), // 输出路径
publicPath: '/build/', // 公共资源路径
filename: '[name].js' // 输出文件名字，此处输出main.js, babel-polyfill.js , 视情况可以配置[name].[chunkhash].js添加文件hash, 管理缓存
},
module: {//模块化的loader，有对应的loader，该文件才能作为模块被webpack识别
},
resolve: {
extensions: ['.js'], // 定义后缀名 ，import时可以省略“.js”后缀
alias: { // 别名。 如 import "./src/style/common.css" ==> import "style/common.css"
'components': resolve(webRootDir, './src/components'),
'page': resolve(webRootDir, './src/page'),
'style': resolve(webRootDir, './src/style'),
'script': resolve(webRootDir, './src/script'),
'static': resolve(webRootDir, './static')
}
},
devServer: { // webpack-dev-server 热加载的配置
host: '127.0.0.1', //本地ip, 如需局域网内其他及其通过ip访问，配置"0.0.0.0"即可
port: 8080,
disableHostCheck: true,
historyApiFallback: true,
noInfo: true
}
/*插件*/
module.exports.plugins = (module.exports.plugins || []).concat([
// webpack 变量定义，，可在其他模块访问到该变量值，以便根据不同环境来进行不同情况的打包操作。
// 例如，在main.js 下 console.log( process.env.Node_ENV ) 输出 development字符串
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: `"development"`
}
}),
])
这只是其中一些，还有非常多的东西等着去发现。
