webpack

新建一个目录叫webpack

文件夹地址栏里输入cmd，要用webpack首先肯定是安装他

首先进行全局安装cnpm install -g webpack(-g  是global全局安装)

接下来一个命令cnpm install --save-dev webpack( --save-dev 是本地的目录的安装)

安装成功以后文件将爱里面就会多出来一个目录和一个文件夹

在根目录webpack下创建一个webpack.config.js的文件，里面写配置文件,然后再创建一个src和www文件夹(这个文件名是可以随便取的，这里src和www是习惯性取的文件名，src里面放的是自己编写的项目的相关代码，www里面是通过webpack生成的copy代码，这里也可以不创建www因为后面运行webpack会自动生成)

然后在src下配置相关目录(scripts放js，styles放样式sass，images放图片等等，就是你项目里面应该有的东西，还有一个index.html)

在scripts下面再创建一个common(放公共文件)的目录和一个index.js的文件

再在common目录下面创建两个目录libs(放引用的相关类库)，utils(放自己写的一些代码，由于要进行模块化开发要在这里面的文件进行接口暴露)

关于上面说到的utils目录下面自己写的文件进行接口暴露的问题代码示例：

//这里就是做一个模块化开发的示例
//先在目录utils下dateUtil.js文件中暴露接口
var DateUtil = {
    getDate:function(){
        return new Date().toLocaleDateString();
    }
} 
module.exports = DateUtil;//这里就是进行接口暴露

var DateUtil = require('./common/utils/dateUtil');//这里在index.js下引用
console.log(DateUtil.getDate());//如果console成功的话就说明接口暴露成功了


//文件接口暴露示例
//module.exports = DateUtil;
//引入暴露接口的文件示例
//var Swiper(变量名随便取) = require('这里写路径地址');
//var DateUtil = require('./common/utils/dateUtil');

styles目录也是一样的配置：

如果你有引入iscroll，swiper之类的类库的话在common目录下就要引入这些类库的相关css样式:

接下来就开始配置webpack.config.js文件，第一步就是将这个文件暴露，然后指定出入口文件，这里就是之前创建的src(出口文件)和www(入口文件)：

module.exports = {
    //入口文件
    entry:{
        app:__dirname + '/src/scripts/index.js'//__dirname是当前目录的意思
    },

    //出口文件(指明发布的地方)
    output:{
        path:__dirname + '/www',
        filename:'js/index.js'
    }
    //这里说白就是把src目录下的index.js文件copy到www目录下js下的index.js文件中
}

配置完这些就可以在cmd中运行webpack爽一把：

然后你回www目录下查看就会发现目录下面多了一个webpack.config.js文件中指定的出口目录js而且目录下多了一个文件index.js：

点开这个生成的js文件会看到之前测试模块化开发的DateUtil：

接下来就是安装资源拷贝插件(cnpm install --save-dev copy-webpack-plugin)，先在webpack.config.js中引入：

 var CopyWebpackPlugin = require('copy-webpack-plugin'); 

再在cmd中输入cnpm install --save-dev copy-webpack-plugin：

这里顺便看一下原文文档的介绍，地址https://www.npmjs.com/package/copy-webpack-plugin，英文文档里面说的很清楚

写到这儿我突然觉得说的有些繁琐了，还是直接对要运行的命令和webpack.config.js文件进行具体分析就可以了，安装好插件运行命令然后webpack.config.js配置好就只要注意接口的暴露和引入就可以了

命令分析:

cnpm install -g webpack 全局安装

cnpm install --save-dev webpack本地目录安装

cnpm install --save-dev copy-webpack-plugin 安装拷贝资源插件

webpack-dev-server可以实现本地服务的启动(不行的话就webpack-dev-server -g全局实现本地服务的启动)

webpack-dev-server --inline可以实现本地服务，并且监控文件的修改以及自动刷新的操作(可以通过修改配置文件，增加devServer配置项，将inline设置为true，在cmd里可以直接运行webpack-dev-server即可实现本地服务及自动刷新)

cnpm install -g json-server 利用json-server进行模拟数据的显示

再在文件地址栏输入cmd重新打开一个cmd，输入json-server --watch db.json(db.json是自己创建的创建的文件名字随便取)输入完这个命令行会出现一个笑脸开头的一系列英文,然后打开这个json文件就会看到文件里面的数据

注意json文件的书写格式，里面是数组形式：

{
      "skill": [{
          "id":1,
          "category": "规范--edit",
          "name": "HTML4、HTML5、ES5、ES6、CommonJS、CMD、AMD等",
          "time": "1年",
          "level": "了解"
      }],
     "work": [{
         "id":1,
         "category": "私营企业",
         "name": "杭州易网灵杰科技有限公司",
         "url": "http://www.eoner.com/",
         "image": "images/eoner.png",
     }], 
     "project":[{
         "id":1,
         "category": "框架",
         "name": "Mui、Yo、Ionic等",
        "time": "2年",
         "level": "熟悉"
     }]
 }

可以直接通过localhost:3000/skill/1来获取是第一个数组里面的数据，每个数组里面可以有多个信息，通过里面设置的id值来获取，这里只是做了一个简单的示范，每个数组里面只放了一个数据。

然后引入zepto框架进行数据请求，这里进行数据请求的时候不能用post要用get，$.get('http://localhost:3000/skill')，这里只是测试地址。

接下来就是css和sass了

cnpm i css-loader style-loader --save-dec 样式加载器安装 然后添加模块处理  

{
    test:/.css$/,
    loader:"style-loader!css-loader"
}

cnpm i sass-loader node-sass --save-dev sass加载器安装   可以将css  @import 'h1.css'; 进scss里面 注意在index.js中引入require('../styles/index.scss'); 然后添加模块处理

{
    test:/.scss$/,
    loader:"style!css!sass"
}

cnpm i babel-loader babel-core babel-preset-es2015 --save-dev      es2015de 支持，也就是支持es6

cnpm i extract-text-webpack-plugin --save-dev 安装完后要在webpack.config.js里面申明变量引入var ExtractTextPlugin = require('extract-text-webpack-plugin');  然后加入模块处理

{
    test: /.scss$/, 
    loader: ExtractTextPlugin.extract("style", "css!sass")
}

粗略的步骤：

1.先进行了webpack的安装，包括全局安装和本地安装
cnpm install -g webpack
cnpm install --save-dev webpack
2.创建了
    src/scripts/index.js
    src/scripts/common/utils/dateUtil.js
3.修改了webpack.config.js，并且加入了entry(入口文件)和output(出口文件)
4.运行命令webpack，可以生成www/js/index.js，代码有60多行
5.运行命令webpack -p，可以对www/js/index.js进行代码压缩，并成一行
6.运行命令webpack -w，可以对来源文件进行实时监控，并进行实时的输出
7.cnpm install --save-dev copy-webpack-plugin
8.添加插件模块plugins
9.利用CopyWebpackPlugin(copy-webpack-plugin)实现文件的拷贝复制操作
10.cnpm install webpack-dev-server -g
11.利用cmd，运行webpack-dev-server可以实现本地服务的启动，运行webpack-dev-server --inline可以实现本地服务，并且监控文件的修改以及自动刷新的操作
12.修改配置文件，增加devServer配置项，将inline设置为true，在cmd里可以直接运行webpack-dev-server即可实现本地服务及自动刷新
13.mock数据的操作，首先需要进行cnpm install -g json-server，利用json-server进行模拟数据的显示，需要给json对象加上id
14.可以利用zepto进行$.get数据的获取
15.修改配置文件，在devServer上加上proxy代理操作，就可以直接将http://localhost:3000的地址转向了http://localhost:8080
16.cnpm i css-loader style-loader --save-dev(样式加载器的安装)
17.修改配置文件，增加module模块操作，设置loaders
18.cnpm i sass-loader node-sass --save-dev(sass加载器)
19.cnpm i babel-loader babel-core babel-preset-es2015 --save-dev(es2015的支持，也就是支持es6)
20.cnpm i extract-text-webpack-plugin --save-dev

webpack.config.js分析:

var webpack  = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');//引入插件copy-webpack-plugin
var ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {
    //入口文件
    entry:{
        app:__dirname + '/src/scripts/index.js'//__dirname是当前目录的意思
    },

    //出口文件(指明发布的地方)
    output:{
        path:__dirname + '/www',
        filename:'js/index.js'
    },
    //这里说白就是把src目录下的index.js文件copy到www目录下js下的index.js文件中
    
    // 服务器配置
    devServer:{//有了这个就可以不用运行webpack-dev-server --inline命令
        inline:true,
        //代理服务
        //http://localhost:8080 ----> http://localhost:3000意思就是通过localhost:8080也可以访问接送数据了
        proxy:{
            '/skill/*':{
                target:'http://localhost:3000',
                secure:false
            },'/work/*':{
                target:'http://localhost:3000',
                secure:false
            },'/project/*':{
                target:'http://localhost:3000',
                secure:false
            },
        }
    },

    //模块处理
    module:{
        loaders:[
            {
                test:/.js$/,
                loader:'babel'
            },
            /*
            有了下面的模块 这两个就可以不用了
            {//处理css
                test://css$/,
                loader:"style-loader!css-loader"
            },{//处理scss
                test:/.scss$/,
                loader:"style!css!sass"
            }*/
            {
                test:/.scss$/,
                loader:ExtractTextPlugin.extract("style","css!sass")
            }
        ]
    },

    //插件模块
    plugins:[
        new CopyWebpackPlugin([
            {from:'./src.index.html',to:'./'},//把src下的index.html文件copy到www下
            {form:'./src/images',to:'./images',ignore:['*.gif']},//把src下的图片文件copy到www中images目录下，并且ignore(忽略)jif图片
            
            /*{form:'./src/xml/**',to:'./data'},//把src下的xml文件copy到www中data文件下
            {form:'./src/json/**',to:'./data'}//把src下的json文件copy到www中data文件下
            需要copy什么文件就这样类推就可以了
            */
        ]),
        new ExtractTextPlugin('./index.css'),
        new webpack.optimize.UglifyJsPlugin({//压缩丑化
            compress:{
                warnings:false//取消警告信息
            }
        })
    ]    
}