webpack打包工工具总结（1）

最近在学习webpack，于是就想着把学习webpack过程中遇到的问题总结下来。
遇到了这样一个问题：在webpack.config.js这个文件进行配置的时候,代码如下：

// webpack是用node写出来的，所以采用node的写法
let path = require('path');
let HtmlWebpckPlugin = require('html-webpack-plugin');
module.exports = {
    devServer: { // 开发服务器的配置
        port: 3000, //端口号
        progress: true, //进度条
        open: true, //自动打开浏览器
        contentBase: './dist' //作为静态服务
    },
    mode: "development", // 模式 默认两种模式 production 生产  development开发
    entry: "./src/index.js", // 入口，可以写相对路径
    output: { //出口
        filename: "bundle.js", // 出口文件，也就是都打包到哪个文件里面
        path: path.resolve(__dirname, 'dist') // 也就是打包到哪个路径下面 这个必须是绝对路径
        // 其中__dirname为根目录，也就是当前的项目名webpack-pro

    },
    plugins: [ //数组 放着所有的webpack插件
        new HtmlWebpckPlugin({
            template: "./src/index.html", //模板
            filename: "index.html", //打包后的名字
        })
    ]
}

在devServer中我原先配置的端口号是8000，但是启动项目的时候报错了

      devServer: { // 开发服务器的配置
            port: 3000, //端口号
            progress: true, //进度条
            open: true, //自动打开浏览器
            contentBase: './dist' //作为静态服务
        },

错误如下：

> webpack@1.0.0 dev G:\webpack-pro
> webpack-dev-server

 10% building 1/1 modules 0 activeevents.js:174
      throw er; // Unhandled 'error' event
      ^

Error: listen EACCES: permission denied 127.0.0.1:8000
    at Server.setupListenHandle [as _listen2] (net.js:1260:19)
    at listenInCluster (net.js:1325:12)
    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1458:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:62:10)
Emitted 'error' event at:
    at emitErrorNT (net.js:1304:8)
    at process._tickCallback (internal/process/next_tick.js:63:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack@1.0.0 dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\develop\nvm\npm-cache\_logs\2019-03-20T15_18_59_260Z-debug.log
PS G:\webpack-pro> npm run build

> webpack@1.0.0 build G:\webpack-pro
> webpack --config webpack.config.js

Hash: 89adb25717081a8d20b1
Version: webpack 4.29.6
Time: 157ms
Built at: 2019-03-20 23:27:09
    Asset      Size  Chunks             Chunk Names
bundle.js  4.19 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./src/a.js] 38 bytes {main} [built]
[./src/index.js] 113 bytes {main} [built]
PS G:\webpack-pro> npm run dev

> webpack@1.0.0 dev G:\webpack-pro
> webpack-dev-server

 10% building 1/1 modules 0 activeevents.js:174
      throw er; // Unhandled 'error' event
      ^

Error: listen EACCES: permission denied 127.0.0.1:8000
    at Server.setupListenHandle [as _listen2] (net.js:1260:19)
    at listenInCluster (net.js:1325:12)
    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1458:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:62:10)
Emitted 'error' event at:
    at emitErrorNT (net.js:1304:8)
    at process._tickCallback (internal/process/next_tick.js:63:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack@1.0.0 dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\develop\nvm\npm-cache\_logs\2019-03-20T15_27_17_606Z-debug.log

Error: listen EACCES: permission denied 127.0.0.1:8000
看这一行错误：我们来看一下这句话的意思listen EACCES是访问权限的意思
permission 是允许，批准的意思 denied 拒绝的意思
连起来就是 没有权限或者是拒绝访问127.0.0.1:8000这个接口
那问题出现哪里呢？
原来是端口号被占用了，所以才会报这样的错，那我改成3000端口号就好了
我们可以在命令行中输入netstat -ano即可查看端口使用情况

netstat -ano

命令行中展示如下：

最后是0的都是没有被占用的，不为0的都是已经启用的
好了，先到这吧，以后还会有很多问题要总结下来，努力着，从未放弃。。。