项目创建

创建项目文件夹

运行项目时会出现以下报错：
loaderContext.getResolve is not a function
原因：less-loader版本太高
解决办法：
修改package.json文件：

雷区

上一节已经画出了雷区，并且按位置放置好了雷，那么这一节，就要开始交互处理了。

但是，细细一想，在扫雷游戏中，每个雷区都会有遮罩(mask)、雷、旗、问号等显示，并且需要处理鼠标的左/右键的点击事件，相对来说，这算一个比较复杂的功能了。既然如此，就新写一个组件 Square.vue 吧。

前面HMR和source-map是开发环境下的优化，下面我们要为生产环境优化一下，首先就是缓存。

【编者按】本文为《Building modular javascript applications in ES6 with React, Webpack and Babel》的简译内容，讲述了作者基于ES6，使用React、Webpack、Babel构建模块化JavaScript应用的编程心得。

如果你想用React构建一个新的JavaScript应用，而且你还想实践ES6语法中的新特性，此外，你甚至想创建一些可重用组件并发布到NPM上，那么你究竟应该怎样实现这些需求？你如何将ES6代码发布到NPM，又如何在后续的项目中使用这些代码？我花了一些时间解决上面这些问题，现在我愿意与你们分享我习得的新知识。

之前我们用style-loader将js中的样式放入到了一个style标签中，访问html的时候会把style标签通过js的方式插入到了head里，此时，css是与js混在一起的。这样不仅会增加js的体积，而且css内容多的话，访问html还会出现闪屏的情况。为了解决这个问题，我们需要引入一个插件来把样式文件分离出来。

现在我们每次更改src目录下文件的时候，都需要手动运行一下打包命令，这是非常不利于开发体验的，因此，我们需要改良一下，引入webpack-dev-server。

1.npm install webpack -g 全局安装webpack

作为快 7 年的前端开发，有时会参与公司的招人面试，面试的对象主要是初中级前端人员。一般会先围绕项目经历问一些问题，随后就问一些前端基础知识。下面就谈谈个人常问的一些基础技术问题。

CSS

在多人开发中，代码里有时候会有一些无用的代码，因此在生产环境打包构建的时候就需要去除掉，我们可以使用webpack默认的tree shaking。必须满足以下两个条件：