wepack学习

WebPack简介：
    webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,
它能有Grunt或Gulp所有基本功能。webpack的官网是 https://webpack.github.io/ ，文档地址是https://webpack.github.io/docs，官网对webpack的定义是MODULE BUNDLER， 他的目的就是把有依赖关系的各种文件打包成一系列的静态资源
其优势主要可以归类为如下几个：
    1.webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
    2.支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码;less-loader加载器，可以将less编译成css文件；
    3.开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
    4.可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。
WebPack安装记录：
首先得有node.js环境
 1.安装webpack
  npm install webpack@3.6.0 -g
  报错：/ rollbackFailedOptional: verb npm-session cb71c3d2baeba676
    查看node版本
    node -v  
  原因：npm没有设置国内镜像服务器
  解决方法：重设镜像服务器 
        1.直接通过命令：npm config set registry http://registry.npm.taobao.org，
        2.也可以找到nodejs下的.npmrc或者去c盘user下找.npmrc直接编辑配置文件。
 2.查看版本
  >webpack -version
  >3.6.0 
搭建本地服务器

  1.webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。不过它是一个单独的模块，在webpack中使用之前需要先安装它
   npm install --save-dev webpack-dev-server@2.9.1
  2.devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：
        contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
        port：端口号
        inline：页面实时刷新
        historyApiFallback：在SPA页面中，依赖HTML5的history模式
  3.webpack.config.js 中配置：  (只是在开发的时候配置)
       devServer:{
               contentBase:"./dist",
               inline:true,
               rort:8081,
           },
       启动方式两种：
            1.路径启动：因为npm install --save-dev webpack-dev-server@2.9.1命令安装的是开发时依赖不是全局的
            2.在package.json中配置
                "scripts": {
                    "test": "echo \"Error: no test specified\" && exit 1",
                    "dev": "webpack-dev-server  --open"    //加上--open 启动成功后会自动打开浏览器页面
                   }
        执行命令：npm run dev
  4.配置文件的抽离：
        1.安装配置文件合并插件：
            npm install webpack-merge --save-dev      //开发时依赖
        2.配置文件写法：
            prod.config.js:
                    //部署时配置文件，放的是部署时的依赖
                    const WebpackMerge=require("webpack-merge")
                    const baseConfig=require("./base.config.js")
                    const UglifyjsWebpackPlugin=require("uglifyjs-webpack-plugin")
                    module.exports =WebpackMerge(baseConfig,{
                        plugins:[
                            new UglifyjsWebpackPlugin(),
                        ]
                    })
            dev.config.js:
                //开发时配置文件，放的是开发时的依赖
                const WebpackMerge=require("webpack-merge")
                const baseConfig=require("./base.config.js")
                module.exports = WebpackMerge(baseConfig,{
                    devServer:{
                        contentBase:"./dist",
                        inline:true,
                        port:8081,
                    }
                })
        3.修改package.json
                     "build": "webpack ",
                     "dev": "webpack-dev-server --open "
                 修改成这样：
                     "build": "webpack --config ./src/config/dev.config.js",
                     "dev": "webpack-dev-server --open  --config ./src/config/dev.config.js"  //教程说这里可以不用加这个  --config ./src/config/dev.config.js 但是不加，会报找不到配置文件的错误