关于使用webStrom工具做webpack打包的问题

今天使用webStrom测试以前写的webpack工程时，在打包时遇到了一个奇怪的问题。那就是执行了n次npm run build指令时都无法打包成功。最后找了好长时间，错误的原因让我哭笑不得。好了，废话不多说了。直接上问题
下面这个图是我的webpack工程。

了解过webpack工程的小伙伴都知道构建一个webpack工程有两个重要的配置文件
（1）.package.json文件
（2）.webpack.config.js文件
这里简单的介绍下这两个文件。
1. package.json配置文件是我们在使用npm init(或者npm  init -y)指令时生成的。它里面主要是对webpack工程做一些配置，比如说配置webpack的工程名称，版本，描述等信息。这里面有一个重要的标签scripts，它里面可以做一些重要的配置。
比如配置
							 "scripts": {
							    "test": "echo \"Error: no test specified\" && exit 1",
							    "build": "webpack"
							  },
  表示可以使用npm run build指令运行当前webpack工程。
  此外该文件里除了做一些重要信息的配置外，还管理了一些我们项目中用到依赖
							   "devDependencies": {
							    "css-loader": "^2.0.2",
							    "style-loader": "^0.23.1",
							    "webpack": "^3.6.0"
							  }
 比如这里就表示我们的项目中分别引入了三个依赖，依次是css依赖/style依赖/webpack依赖，并且还标明了每个依赖的版本

 下面是我当前工程里的package.json文件的具体内容
{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^2.0.2",
    "style-loader": "^0.23.1",
    "webpack": "^3.6.0"
  }
}

```java
2.webpack.config.js文件，该文件里主要配置我们通过webpack打包时，指定打包时需要用到资源的路径和打包后文件生成的路径，并且明确配置了打包时生成的文件的名称。
//这里的path是从node环境里面获取的
const path = require('path')
module.exports = {
  entry: './src/main.js', //指定打包时需要用到资源的路径
  output: {
      //__dirname: 是node环境里面的一个全局变量，保存了webpack.config.js文件所在的路径
    //通过使用resolve函数对两个路径进行拼接
    path: path.resolve(__dirname, 'dist'),//打包后文件生成的路径
    filename: 'bundle1.js'//打包时生成的文件的名称。
    //最终打包后的文件存放的目录拼接的结果是：当前工程目录/dist文件夹/bundle1.js
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左依次进行加载的
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}
另外，大家看到了我的webpack.config.js配置文件里配置了一些loader
那么loader是什么呢？这里给大家解释下
loader是webpack中一个非常核心的概念。
webpack用来做什么呢？
在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。
但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。
对于webpack本身的能力来说，对于这些转化是不支持的。
那怎么办呢？给webpack扩展对应的loader就可以啦。

```java
讲到这里package.json和webpack.config.js配置文件就结束了。接下来开始步入正题
正如我上面webpack.config.js文件里的配置 filename: 'bundle1.js' 打包后应该在dist文件夹里生成对应的文件，可是在控制台中执行了n次npm run build 指令均没有生成该文件。我把效果图给发下

控制台上红色框框标记的就是我们生成的文件**bundle.js**,此时就应该有疑问了，明明我配置生成的配置文件应该是bundle1.js呀，为什么最后生成一个bundle.js文件呢？看似一切都很合理，但是真相总是隐藏在细节之下
遇到这个绞尽脑汁的问题，我使用了一套自己解决问题的流程。最终解决了问题，这里给大家分享下。
第一步：检查工程里各个配置文件是否存在配置错误的地方
第二步：如果工程里各种配置文件都配置的很准确，那接下来进行百度
第三步：如果百度后依旧没有找到合适的解决方案，那就重新创建一个新工程，从零开始一步步搭建
第四步：如果新工程搭建后仍然没有解决问题，此时建议更换一个工具，比如说从webStrom切换到vsCode重新尝试搭建新工程
第五步：如果依旧没有解决问题，那就要考虑你的webpack版本是否存在，你的node环境是否配置正确，你的电脑环境是否存在问题了

令人兴奋的事是最后我只走到第三步就解决了问题。
搭建了一个新工程后重新执行npm run build指令立刻就生成了对应的配置文件，最后经过我的分析发现原来问题出现在终端上面了。
原来是我刚开始为了偷懒，没有打开当前工程对应的终端，直接使用了以前工程里的终端窗口，并且通过cd指令强制跳转到当前工程目录，导致后续一系列操作均失败了。
在这里我给大家截一张图，在webStrom中如何打开当前工程的终端窗口的方法：将鼠标移动至当前工程，右键即可打开图中的菜单。选中红色框框里的选项即可打开终端。

使用vsCode打开终端的方式这里我也截张图

在这里我强调一点，以后在开发操作终端时一定不要为了偷懒使用以前的终端，为了保持准确性避免错误，建议大家在使用一个工程时打开一个终端，在结束对该工程的使用时及时关闭该终端。

好了今天的问题就分享到这里，养成一个好的编码和操作习惯可以避免很多不必要的错误。