基于已有项目整合webpack配合babel支持es6转码压缩

需求：

    在已有的项目基础上整合webpack，babel支持es6转码压缩

想要单独使用请参考

    1.单独使用webpack压缩代码
        [https://segmentfault.com/a/1190000005742037](https://segmentfault.com/a/1190000005742037)
    2.单独使用babel进行es6转码es5
        [https://www.cnblogs.com/yuanbo88/p/6389299.html](https://www.cnblogs.com/yuanbo88/p/6389299.html)

已有环境

    假设我们已经有了一个支持es6的web项目，并且安装了nodejs，并且npm配置高速镜像

没有安装的请参考一下资料

1.web项目
重新搭建https://blog.csdn.net/mengxiangxingdong/article/details/76577953
或者直接下载
链接：https://pan.baidu.com/s/1kU6mYjH 密码：z181
2.支持es6
https://blog.csdn.net/mengxiangxingdong/article/details/76577953
3.没有安装nodejs
https://www.runoob.com/nodejs/nodejs-install-setup.html
4.npm的使用学习
https://www.runoob.com/nodejs/nodejs-npm.html

配置镜像（二选一）

1.配置npm淘宝镜像

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm –registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了：
$ cnpm install [name]
更多信息可以查阅：https://npm.taobao.org/。

2.配置国内良心镜像仍然是用npm命令

                npm config set registry https://registry.npm.taobao.org

安装webpack

    1.首先全局安装webpack
        npm install webpack -g
    2.选择安装的版本
        npm install webpack@1.31.x --save-dev
        此命令也可以解决cmd不支持webpack命令
    3.如果要使用webpack开发工具，要单独安装 webpack-dev-server
        npm install webpack-dev-server --save-dev
    4.跳转到当前项目下带有packjson的目录
        没有packjson的默认创建再项目根目录下创建
            packjson详解
        我的是在项目的根目录下的web下
    执行
        npm install --save-dev webpack webpack-dev-server

安装webpack所需要的插件

    1.安装loaders 
        npm install style-loader css-loader 
        wepback的一大特色就是可以将一些浏览器不能原生支持的文件通过loaders编译成浏览器可以支持的文件
    2.自动补全css3前缀
        npm install --save-dev autoprefixer postcss-loader
    3.自动生成html插件
        npm install html-webpack-plugin --save-dev
    4.提取样式插件（必须）
        把额外的数据加到编译好的文件中
        npm install extract-text-webpack-plugin --save-dev
    5.拷贝资源插件（必须）
        在webpack中拷贝文件和文件夹
        npm install copy-webpack-plugin --save-dev
    6.全局挂载插件
        webpack.ProvidePlugin [webpack内置插件 ]

安装babel

    npm install --save-dev babel-core babel-preset-es2015  
        可以选择其他规则
        一共有四种规则
    npm install --save-dev babel-loader 

安装对应的第三方库

    如果未使用百度云盘下载的项目可以不用安装
    1.jquery
        npm install jquery
    2.d3.js
        npm install d3

启动

    首次编译
        webpack
    webpack --progress --colors --watch
启动tomcat就可以看到网页并且调试了

webpack常用命令

    $ webpack --config webpack.min.js //另一份配置文件
    $ webpack --display-error-details //显示异常信息
    $ webpack --watch   //监听变动并自动打包
    $ webpack -p    //压缩混淆脚本，这个非常非常重要！
    $ webpack -d    //生成map映射文件，告知哪些模块被最终打包到哪里了
    当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色
        webpack --progress --colors
    监听模式
        webpack --progress --colors --watch
        作用：
            如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的