webpack的安装与配置

    虽然33+岁了，但为了生活还得必须不断地学习，避免被饿死，生活就是这么残酷，也不知道今天学的以后还用不用得上。前段时间学习了spring系列，算是入门了。现在准备好好学一下vue的开发，做了这么多年前后端，也没做过大型的vue项目，感觉是该学习一下。不错的框架。

     安装了nodejs，然后蒙蒙顿顿npm安装了webpack 4.4版本，打开webstorm写了几个js。准备webpack ./src/xxx.js  /dist/sss.js的时候报错了。完成和视频上的不一样。视频上面的webpack版本低。与是看了看官网，要配置，也不知道怎么配置。找了一篇文档，摘录了部分记下来，虽然记录这些东西有点浪费时间，但为了以后需要的时候找不到解决方案，也就记下了：

     安装nodejs不用说了，js的运行环境，找个单独的目录，以后好管理。然后全局安装webpack，npm install webpack安装最新，后面加@可以指定版本。有项目了再项目里搞一个局部安装，为什么？到时候一起打包用呗

　　先创建项目目录结构，根目录是mywebpack。进入项目根目录，执行：npm init，生成package.json文件，内容就是一堆json数据，基本就是在终端里输入的信息。

　　进入项目根目录局部安装webpack，进入./mywebpack，执行：npm install webpack --save-dev，局部安装webpack成功了，根目录下会出现一个node_modules文件夹。进入根目录，建两个文件夹，分别为src和dist

　　（1）src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。

　　（2）dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。 

然后写一下js文件，html文件，自己写吧，有依赖关系就可以。在根目录新建一个webpack.config.js文件，然后开始配置：

const path = require('path');
module.exports={
    //入口文件的配置项
    entry:{
        entry:'./src/index.js'
    },
    //出口文件的配置项
    output:{
        //输出的路径，用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'bundle.js'
    },
    mode:"development",//注意最新版本必须加mode，否则会报错
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

然后在终端输入：webpack，进行打包，之后我们就可以在disc目录下看到打包生产的bundle.js文件，并能成功运行index.html文件。就好了。会指定目录下生产打包后的js文件。