webpack构建ant-design

 

　　

一：首先在d盘下面创建一个文件夹名为webpack，在webpack下创建一个文件夹名为react，使用phpstorm打开react文件夹，打开Terminal，执行操作

 npm init 

　初始化一下项目，生成package.json

文件

二：在文件根目录下创建文件“webpack.config.js”，在根目录下面创建一个文件夹命名为“src”，在下面创建一个文件命名为index.js,在项目中安装webpack，在Terminal中执行操作 

npm install --save-dev webpack

Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖

npm install --save-dev webpack-dev-server

编写配置文件webpack.config.js

var path = require('path'); //引文文件路径
module.exports = {
    entry: ['./src/index'], //入口文件
    output: {
        path: path.join(__dirname, 'dist'), //打包出口文件路径
        filename: 'index.js' //打包文件名
    },
    devServer: {
        //配置nodejs本地服务器，
        contentBase: './dist',
        hot: true //本地服务器热更新
    }
}

修改package.json文件

  "scripts": {
    "start": "webpack"
  },

　　在Terminal中执行 

npm run start

执行打包过程

在dist文件夹中生成index.js文件

 三：Webpack把所有的文件都可以当做模块处理，包括JavaScript代码，也包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。 

     CSS

    webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。在src目录下面添加文件main.css，并添加代码

h1{
 color:red
}

在Terminal执行操作

npm install --save-dev style-loader css-loader

安装完毕之后，在webpack.config.js中添加配置

  module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'//添加对样式表的处理
            }
        ]
    },

在index.js文件中添加代码

require("./main.css")

执行

npm run start

   打包完毕，并没有新文件生成，是由于webpack将样式文件和javascript合并到了同一个文件中去了。使用 extract-text-webpack-plugin就可以把css从js中独立抽离出来，首先执行extract-text-webpack-plugin插件的安装操作

npm install --save-dev extract-text-webpack-plugin

插件安装完毕后，修改webpac.config.js中的配置文件为

var path = require('path'); //引文文件路径
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    entry: ['./src/index'], //入口文件
    output: {
        path: path.join(__dirname, 'dist'), //打包出口文件路径
        filename: 'index.js' //打包文件名
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css"),
    ],
    devServer: {
        //配置nodejs本地服务器，
        contentBase: './dist',
        hot: true //本地服务器热更新
    }
}

　　执行打包操作

自动生成html插件的安装，“

html-webpack-plugin

”插件可以根据模板生成html，在src下创建一个index.html文件，作为生成html的模板文件

npm install html-webpack-plugin --save-dev

　　修改配置文件如下

var path = require('path'); //引文文件路径
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var autoprefixer = require('autoprefixer');
module.exports = {
    entry: ['./src/index'], //入口文件
    output: {
        path: path.join(__dirname, 'dist'), //打包出口文件路径
        filename: 'index.js' //打包文件名
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    }
                ]
            },
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            mangle: {
                except: ['$super', '$', 'exports', 'require']
            }
        }),
        new ExtractTextPlugin("main.css"),
        new HtmlWebpackPlugin({
            template: './src/index.html', //模板路径
            filename: "index.html",
            inject: false,
        }),
    ],
    devServer: {
        //配置nodejs本地服务器，
        contentBase: './dist',
        hot: true //本地服务器热更新
    }
}

四：每次打包之前，删除上一次打包生成的文件

    clean-webpack-plugin：A webpack plugin to remove/clean your build folder(s) before building（清除打包文件夹的一个插件），首先安装

 

npm install clean-webpack-plugin --save-dev

　安装完成之后，添加配置文件

var CleanWebpackPlugin = require('clean-webpack-plugin');
new CleanWebpackPlugin(['dist'], {
    root: 'd:/webpack/demo1/',
    verbose: true,
    dry: false,
}),

五：webpack服务配置和打包配置

     webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时.，在根目录下面创建一个文件名为 “webpack.config.dev.js“ 作为一个临时的服务，配置文件为：

 

webpack.config.dev.js

var path = require('path'); //引文文件路径
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var autoprefixer = require('autoprefixer');
module.exports = {
    devtool: 'source-map',
    entry: ['./src/index'], //入口文件
    output: {
        path: path.join(__dirname, 'dist'), //打包出口文件路径
        filename: 'index.js' //打包文件名
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    }
                ]
            },
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            mangle: {
                except: ['$super', '$', 'exports', 'require']
            }
        }),
        new ExtractTextPlugin("main.css"),
    ],
    devServer: {
        //配置nodejs本地服务器，
        contentBase: './dist',
        hot: true //本地服务器热更新
    }
}

　　在文件根目录下添加一个文件“webpack.config.prod.js”，作为打包文件，添加配置文件为

   

webpack.config.prod.js


var path = require('path'); //引文文件路径
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var autoprefixer = require('autoprefixer');
module.exports = {
    devtool: 'source-map',
    entry: ['./src/index'], //入口文件
    output: {
        path: path.join(__dirname, 'dist'), //打包出口文件路径
        filename: 'index.js' //打包文件名
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    }
                ]
            },
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            mangle: {
                except: ['$super', '$', 'exports', 'require']
            }
        }),
        new ExtractTextPlugin("main.css"),
        new HtmlWebpackPlugin({
            template: './src/index.html', //模板路径
            filename: "index.html",
            inject: false,
        }),
        new CleanWebpackPlugin(['dist'], {
            root: 'd:/webpack/demo1/',
            verbose: true,
            dry: false,
        }),
    ],
    devServer: {
        //配置nodejs本地服务器，
        contentBase: './dist',
        hot: true //本地服务器热更新
    }
}

　　修改package.json文件

   

  "scripts": {
    "build": "webpack --config webpack.config.prod.js",
    "dev": "webpack-dev-server --config webpack.config.dev.js"
  },

　　六添加解析less样式文件的扩展

     安装代码为

npm install --save-dev less-loader less

　　添加扩展，修改配置文件为

var path = require('path'); //引文文件路径
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
    devtool: 'source-map',
    entry: ['./src/index'], //入口文件
    output: {
        path: path.join(__dirname, 'dist'), //打包出口文件路径
        filename: 'index.js' //打包文件名
    },
    module: {
        loaders: [
            {
              //正则匹配后缀.css文件;
              test: /\.css$/,
               //使用html-webpack-plugin插件独立css到一个文件;
               use: ExtractTextPlugin.extract({
                 //加载css-loader、postcss-loader（编译顺序从下往上）转译css
                  use: [{
                        loader : 'css-loader?importLoaders=1',
                        },
                        {
                         loader : 'postcss-loader',
                         //配置参数;
                           options: {
                           //从postcss插件autoprefixer 添加css3前缀;
                            plugins: function() {
                                             return [
                                      //加载autoprefixer并配置前缀,可加载更多postcss插件;
                                                      require('autoprefixer')({
                                                          browsers: ['ios >= 7.0']
                                                   })
                                               ];
                                             }
                                  }
                         }]
                })
            },
            {//正则匹配后缀.less文件;
              test: /\.less$/,
             //使用html-webpack-plugin插件独立css到一个文件;
              use: ExtractTextPlugin.extract({
                  use: [{
                         loader : 'css-loader?importLoaders=1',
                        },
                        {
                         loader : 'postcss-loader', //配置参数;
                         options: {
                            plugins: function() {
                                     return [
                                       require('autoprefixer')
                                       ({
                                        browsers: ['ios >= 7.0']
                                      })];
                               }
                          }
                         },
                        //加载less-loader同时也得安装less;
                       "less-loader"
                      ]
                 })
            },
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            mangle: {
                except: ['$super', '$', 'exports', 'require']
            }
        }),
        new ExtractTextPlugin({
            filename :"[name].css",
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html', //模板路径
            filename: "index.html",
            inject: "body",
        }),
        //webpack内置js压缩插件;
       new webpack.optimize.UglifyJsPlugin({
                    compress: {                               //压缩;
                    warnings: false                      //关闭警告;
                 }
       }),
        new CleanWebpackPlugin(['dist'], {
            root: 'd:/webpack/react/',
            verbose: true,
            dry: false,
        }),
    ],
    devServer: {
        //配置nodejs本地服务器，
        contentBase: './dist',
        hot: true //本地服务器热更新
    },
    resolve:{
              //设置可省略文件后缀名(注:如果有文件没有后缀设置‘’会在编译时会报错,必须改成' '中间加个空格。ps:虽然看起来很强大但有时候省略后缀真不知道加载是啥啊~);
           extensions: [' ','.css','.scss','.sass','.less','.js','.json'],
           //查找module的话从这里开始查找;
           modules: [path.resolve(__dirname, "src"), "node_modules"], //绝对路径;
        //别名设置,主要是为了配和webpack.ProvidePlugin设置全局插件;
           alias: {
                  //设置全局jquery插件;
                 }
          }
}

　安装压缩图片的扩展，首先执行命令

npm install  img-loader   url-loader  file-loader   --save-dev 

　　安装完成之后，在loaders数组中添加一条配置

   {
           //正则匹配后缀.png、.jpg、.gif图片文件;
             test: /\.(png|jpg|gif)$/i,
                use: [{//加载url-loader 同时安装 file-loader;
                      loader : 'url-loader',
                         options : {
                                //小于10000K的图片文件转base64到css里,当然css文件体积更大;
                         limit : 10000,
                              //设置最终img路径;
                          name : '/img/[name].[ext]'
                      }
                    },
                    {
                       //压缩图片(另一个压缩图片：image-webpack-loader);
                       loader : 'img-loader?minimize&optimizationLevel=5&progressive=true'
                    },]
           }

    在src目录下面添加一个img目录，拷贝一张图片放到img目录下，命名为img，然后，修改main.css文件如下

  

h1{
    color:red;
    display: flex;
    background:url("./img/img.jpg");
}

然后执行以下，build，可以发现在dist目录下生成如下文件

 

　七 支持es6，安装es6扩展，执行安装命令

 

npm install babel-core babel-loader babel-preset-es2015 --save-dev

　　安装完成之后，修改配置文件，在“loaders”数组中添加一个扩展的配置为

  

   {
            //正则匹配后缀.js文件;
              test: /\.js$/,
            //需要排除的目录
            exclude: '/node_modules/',
             //加载babel-loader转译es6
           use: [{
                 loader: 'babel-loader',
               }],
           },

　　在根文件目录下添加文件“.babelrc”，次文件没有扩展名，可以sublime或者phpstorm等编辑器来创建，给".babelrc"文件中添加如下配置

{
  "presets": ["es2015"],
  "sourceMaps": true
}

　　配置完成之后，就可以使用es6的新语法了。打包过程中出现了提示，样式文件超过了500kb，可以使用插件“optimize-css-assets-webpack“来压缩css样式文件

安装语法如下

npm install   optimize-css-assets-webpack-plugin  --save-dev

　修改配置文件如下

 

var path = require('path'); //引文文件路径
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //压缩CSS模块;
module.exports = {
    devtool: 'source-map',
    entry: ['./src/index'], //入口文件
    output: {
        publicPath: "http://localhost:8081/",        //配合devServer本地Server;
        path: path.join(__dirname, 'dist'), //打包出口文件路径
        filename: 'index.js' //打包文件名
    },
    module: {
        loaders: [
            {
            //正则匹配后缀.js文件;
              test: /\.js$/,
            //需要排除的目录
            exclude: '/node_modules/',
             //加载babel-loader转译es6
           use: [{
                 loader: 'babel-loader',
               }],
           },
            {
              //正则匹配后缀.css文件;
              test: /\.css$/,
               //使用html-webpack-plugin插件独立css到一个文件;
               use: ExtractTextPlugin.extract({
                 //加载css-loader、postcss-loader（编译顺序从下往上）转译css
                  use: [{
                        loader : 'css-loader?importLoaders=1',
                        },
                        {
                         loader : 'postcss-loader',
                         //配置参数;
                           options: {
                           //从postcss插件autoprefixer 添加css3前缀;
                            plugins: function() {
                                             return [
                                      //加载autoprefixer并配置前缀,可加载更多postcss插件;
                                                      require('autoprefixer')({
                                                          browsers: ['ios >= 7.0']
                                                   })
                                               ];
                                             }
                                  }
                         }]
                })
            },
            {//正则匹配后缀.less文件;
              test: /\.less$/,
             //使用html-webpack-plugin插件独立css到一个文件;
              use: ExtractTextPlugin.extract({
                  use: [{
                         loader : 'css-loader?importLoaders=1',
                        },
                        {
                         loader : 'postcss-loader', //配置参数;
                         options: {
                            plugins: function() {
                                     return [
                                       require('autoprefixer')
                                       ({
                                        browsers: ['ios >= 7.0']
                                      })];
                               }
                          }
                         },
                        //加载less-loader同时也得安装less;
                       "less-loader"
                      ]
                 })
            },
            {
           //正则匹配后缀.png、.jpg、.gif图片文件;
             test: /\.(png|jpg|gif)$/i,
                use: [{//加载url-loader 同时安装 file-loader;
                      loader : 'url-loader',
                         options : {
                                //小于10000K的图片文件转base64到css里,当然css文件体积更大;
                         limit : 10000,
                              //设置最终img路径;
                          name : '/img/[name].[ext]'
                      }
                    },
                    {
                       //压缩图片(另一个压缩图片：image-webpack-loader);
                       loader : 'img-loader?minimize&optimizationLevel=5&progressive=true'
                    },]
           }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            mangle: {
                except: ['$super', '$', 'exports', 'require']
            }
        }),
        new ExtractTextPlugin({
            filename :"[name].css",
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html', //模板路径
            filename: "index.html",
            inject: "body",
        }),
        //webpack内置js压缩插件;
       new webpack.optimize.UglifyJsPlugin({
                    compress: {                               //压缩;
                    warnings: false                      //关闭警告;
                 }
       }),
        new CleanWebpackPlugin(['dist'], {
            root: 'd:/webpack/react/',
            verbose: true,
            dry: false,
        }),
        //压缩css（注:因为没有用style-loader打包到js里所以webpack.optimize.UglifyJsPlugin的压缩本身对独立css不管用）;
        new OptimizeCssAssetsPlugin({
          assetNameRegExp: /\.css$/g,                //正则匹配后缀.css文件;
          cssProcessor: require('cssnano'),            //加载‘cssnano’css优化插件;
          cssProcessorOptions: { discardComments: {removeAll: true } }, //插件设置,删除所有注释;
          canPrint: true                             //设置是否可以向控制台打日志,默认为true;
       }),
    ],
    devServer: {
        //配置nodejs本地服务器，
        contentBase: './dist',
        hot: true //本地服务器热更新
    },
    resolve:{
              //设置可省略文件后缀名(注:如果有文件没有后缀设置‘’会在编译时会报错,必须改成' '中间加个空格。ps:虽然看起来很强大但有时候省略后缀真不知道加载是啥啊~);
           extensions: [' ','.css','.scss','.sass','.less','.js','.json'],
           //查找module的话从这里开始查找;
           modules: [path.resolve(__dirname, "src"), "node_modules"], //绝对路径;
        //别名设置,主要是为了配和webpack.ProvidePlugin设置全局插件;
           alias: {
                  //设置全局jquery插件;
                 }
          }
}

　八 安装react

       在终端输入

npm install --save-dev react react-dom

同时安装React和React-DOM，标准的React组件后缀名为.jsx，而.jsx是默认不被浏览器所支持的；所以需要一个转换器，将不被浏览器识别的.jsx文件转换成浏览器能够正常运行的文件，这个转换器就是Babel

用npm一次性安装这些依赖包

npm install --save-dev babel-core babel-loader  babel-preset-es2015 babel-preset-react

　　在webpack.config.js中，修改配置文件如下

 

{
                //正则匹配后缀.js 和.jsx文件;
                test: /\.(js|jsx)$/,
                //需要排除的目录
                exclude: '/node_modules/',
                //加载babel-loader转译es6
                use: [{
                    loader: 'babel-loader',
                }],
            },

　　修改.babelrc文件添加如下代码：

 "presets": [
    "react",
    "es2015"
  ],

　　在src->component目录下新建一个Component.jsx文件（注意首字母一定要大写），使用ES6语法返回一个React组件，代码如下

  

//Component1.jsx
import React from 'react';
class Component1 extends React.Component {
    render() {
        return (
            <div>Hello World!</div>
    )
    }
}
//导出组件
export default Component1;

　　在index.js中使用ES6的语法，定义和渲染Component1模块，将React组件渲染至html的标签中：

import React from 'react';
import ReactDom from 'react-dom';
import Component1 from './component/Component1';

ReactDom.render(
    <Component1 />,
    document.getElementById('root')
);

　　执行一下 run npm build和run npm dev，在浏览器中查看127.0.0.1:8081 输出"hello world"

九 执行 npm run dev，浏览器自行打开浏览器，安装插件

npm install open-browser-webpack-plugin --save-dev

 修改“webpack.config.dev.js”的配置为

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
module.exports = {
    devtool: 'cheap-eval-source-map',
    entry: [
        './src/index'
    ],
    output: {
        publicPath: "http://localhost:8081/",
        path: path.join(__dirname, 'build'),
        filename: 'index.js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new ExtractTextPlugin("styles.css"),
        new OpenBrowserPlugin({ url: 'http://localhost:8081' }),
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader:  ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
            }
            ,{
                test: /\.js$/,
                loaders: ['babel-loader'],
                exclude:/node_modules/
            },{
                test: /\.json$/,
                loader: "json-loader"
            },{
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                },]}
        ]
    },
    devServer: {
        contentBase: './build',
        hot: true,
        host: '127.0.0.1',
        port: '8081'
    }
}

　　十 安装 ant-design ui开发环境

推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处，npm安装语句为

npm install antd --save

　在 npm 发布包内的 antd/dist 目录下提供了 antd.js antd.css 以及 antd.min.js antd.min.css，这里通过 “babel-plugin-import”来引用扩展文件，首先安装扩展

npm install babel-plugin-import --save-dev

　　然后修改 “.bablerc”的配置项如下

{
  "presets": [
    "es2015",
    "react"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ],
  "sourceMaps": true
}

　　最后添加一个ant-design 控件来进行测试，在index.js文件中添加如下代码

 

import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker, message } from 'antd';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: '',
    };
  }
  handleChange(date) {
    message.info('您选择的日期是: ' + date.toString());
    this.setState({ date });
  }
  render() {
    return (
      <div style={{ width: 400, margin: '100px auto' }}>
        <DatePicker onChange={value => this.handleChange(value)} />
        <div style={{ marginTop: 20 }}>当前日期：{this.state.date.toString()}</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

　　执行build的程序，然后执行dev，查看到的结果如图

 

十一：最后我的文件目录如图所示

其中“webpack.config.prod.js“配置如下

const path = require('path'); //引文文件路径
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const glob = require('glob'); // glob模块，用于读取webpack入口目录文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //压缩CSS模块;
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;//处理trunk
const entries = getEntry('src/**/*.js', 'src/**/');
const config =  {
    devtool: 'source-map',
    entry: entries,
    output: {
        publicPath: "http://localhost:8081/",        //配合devServer本地Server;
        path: path.join(__dirname, 'build'), //打包出口文件路径
        filename: "[name].js",
    },
    module: {
        loaders: [
            {
            //正则匹配后缀.js文件;
            test: /\.(js|jsx)$/,
            //需要排除的目录
            exclude: '/node_modules/',
             //加载babel-loader转译es6
           use: [{
                 loader: 'babel-loader',
               }],
           },
            {
              //正则匹配后缀.css文件;
              test: /\.css$/,
               //使用html-webpack-plugin插件独立css到一个文件;
               use: ExtractTextPlugin.extract({
                 //加载css-loader、postcss-loader（编译顺序从下往上）转译css
                  use: [{
                        loader : 'css-loader?importLoaders=1',
                        },
                        {
                         loader : 'postcss-loader',
                         //配置参数;
                           options: {
                           //从postcss插件autoprefixer 添加css3前缀;
                            plugins: function() {
                                             return [
                                      //加载autoprefixer并配置前缀,可加载更多postcss插件;
                                                      require('autoprefixer')({
                                                          browsers: ['ios >= 7.0']
                                                   })
                                               ];
                                             }
                                  }
                         }]
                })
            },
            {//正则匹配后缀.less文件;
              test: /\.less$/,
             //使用html-webpack-plugin插件独立css到一个文件;
              use: ExtractTextPlugin.extract({
                  use: [{
                         loader : 'css-loader?importLoaders=1',
                        },
                        {
                         loader : 'postcss-loader', //配置参数;
                         options: {
                            plugins: function() {
                                     return [
                                       require('autoprefixer')
                                       ({
                                        browsers: ['ios >= 7.0']
                                      })];
                               }
                          }
                         },
                        //加载less-loader同时也得安装less;
                       "less-loader"
                      ]
                 })
            },
            {
           //正则匹配后缀.png、.jpg、.gif图片文件;
             test: /\.(png|jpg|gif)$/i,
                use: [{//加载url-loader 同时安装 file-loader;
                      loader : 'url-loader',
                         options : {
                                //小于10000K的图片文件转base64到css里,当然css文件体积更大;
                         limit : 10000,
                              //设置最终img路径;
                          name : '/img/[name].[ext]'
                      }
                    },
                    {
                       //压缩图片(另一个压缩图片：image-webpack-loader);
                       loader : 'img-loader?minimize&optimizationLevel=5&progressive=true'
                    },]
           }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            mangle: {
                except: ['$super', '$', 'exports', 'require']
            }
        }),
        new CommonsChunkPlugin({
            name: 'vendors',
            minChunks: Infinity
        }),
        new ExtractTextPlugin({
            filename :"[name].css",
        }),
        // new HtmlWebpackPlugin({
        //     template: './src/index.html', //模板路径
        //     filename: "index.html", //输出名字
        //     inject: "body", //打包文件插入模板的位置
        // }),
        //webpack内置js压缩插件;
       new webpack.optimize.UglifyJsPlugin({
                    compress: {    //压缩;
                    warnings: false     //关闭警告;
                 }
       }),
        new CleanWebpackPlugin(['build'], {
            root: 'd:/webpack/react/', //要删除文件的绝对路径
            verbose: true,
            dry: false,
        }),
        //压缩css（注:因为没有用style-loader打包到js里所以webpack.optimize.UglifyJsPlugin的压缩本身对独立css不管用）;
        new OptimizeCssAssetsPlugin({
          assetNameRegExp: /\.css$/g,                //正则匹配后缀.css文件;
          cssProcessor: require('cssnano'),            //加载‘cssnano’css优化插件;
          cssProcessorOptions: { discardComments: {removeAll: true } }, //插件设置,删除所有注释;
          canPrint: true                             //设置是否可以向控制台打日志,默认为true;
       }),
    ],
    devServer: {
        //配置nodejs本地服务器，
        contentBase: './dist',
        hot: true //本地服务器热更新
    },
    resolve:{
              //设置可省略文件后缀名(注:如果有文件没有后缀设置‘’会在编译时会报错,必须改成' '中间加个空格。ps:虽然看起来很强大但有时候省略后缀真不知道加载是啥啊~);
           extensions: [' ','.css','.scss','.sass','.less','.js','.json'],
        //别名设置,主要是为了配和webpack.ProvidePlugin设置全局插件;
           alias: {
                  //设置全局jquery插件;
                 }
          }
};
var pages = Object.keys(getEntry('src/**/*.js', 'src/**/'));
pages.forEach(function(pathname) {
    console.log(pathname);
    var conf = {
        filename: pathname + '.html', //生成的html存放路径，相对于path
        template: 'src/index.html', //html模板路径
        inject:false,
    };
    config.plugins.push(new HtmlWebpackPlugin(conf));
});
module.exports = config;
function getEntry(globPath, pathDir) {
    var files = glob.sync(globPath);
    var entries = {},
        entry, dirname, basename, pathname, extname;
    for (var i = 0; i < files.length; i++) {
        entry = files[i];
        dirname = path.dirname(entry);
        extname = path.extname(entry);
        basename = path.basename(entry, extname);
        pathname = path.normalize(path.join(dirname,  basename));
        pathDir = path.normalize(pathDir);
        if(pathname.startsWith(pathDir)){
            pathname = pathname.substring(pathDir.length)
        }
        entries[pathname] = ['./' + entry];
    }
    return entries;
}