关于webpack安装及安装出现的错误的解决办法

1. 先说下什么是WebPack？

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任，目前已经到了4.x版本。

打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。

转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。

优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。

2. 安装WebPack

WebPack的安装，采用的是命令行npm形式的安装。

d://切到d盘

mkdir webpack_demo//在d盘下新建webpack_demo文件夹

cd webpack_demo//进入该文件夹下

npm install -g webpack //全局安装webpack

（备注如果这样安装会出现提示安装webpack-cli；这是4.x的提示，如果不想安装webpack-cli需重新安装低版本webpack）

npm uninstall -g webpack //先卸载之前安装的webpack

npm install -g webpack@3.6.0 //安装低版本webpack

全局安装完成后，我们还要进行一个项目目录的安装。在用npm安装前，我们先要进行一下初始化，

初始化的主要目的是生成package.json文件（这是一个标准的npm说明文件，里面蕴含了丰富的信息，

包括当前项目的依赖模块，自定义的脚本任务等等，如果你对此文件还不了解，可以看看node 的相关知识）。

npm init//初始化项目，可以一路回车生成的package.json文件

npm install --save-dev webpack@3.6.0 //官方不太支持全局安装，会锁定版本，因此对项目目录安装

安装完成后可以查看版本号 webpack -v 

安装完成后新建webpack.config.js配置文件基本配置

const path = require('path');

const uglify = require('uglifyjs-webpack-plugin');//代码压缩

module.exports={

    //入口文件的配置项

    entry:{

        entry:'./src/entry.js',

        //这里我们又引入了一个入口文件

        entry2:'./src/entry2.js'

    },

    //出口文件的配置项

    output:{

        //输出的路径，用了Node语法

        path:path.resolve(__dirname,'dist'),

        //输出的文件名称

        filename:'[name].js'

    },

    //模块：例如解读CSS,图片如何转换，压缩

    module:{

        rules: [

            {

              test: /\.css$/,

              use: [ 'style-loader', 'css-loader' ]//处理样式的loader

            }

          ]

    },

    //插件，用于生产模版和各项功能

    plugins:[

        new uglify()//代码压缩

    ],

    //配置webpack开发服务功能

    devServer:{

        //设置基本目录结构

        contentBase:path.resolve(__dirname,'dist'),

        //服务器的IP地址，可以使用IP也可以使用localhost

        host:'localhost',

        //服务端压缩是否开启

        compress:true,

        //配置服务端口号,可自定义

        port:1717

    }

}

（备注：安装webpack-dev-server时安装完后，运行报不是内部指令，需要在package.json中配置下）

"scripts": {

    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

    "start": "npm run dev",

    "build": "node build/build.js"

  },

如果还是报不是内部指令，则重新安装低版本 npm i webpack-dev-server@2.9.1

npm install --save-dev webpack