webpack構建ant-design

時間 2019-11-08

原文原文鏈接

一：首先在d盤下面建立一個文件夾名爲webpack，在webpack下建立一個文件夾名爲react，使用phpstorm打開react文件夾，打開Terminal，執行操做javascript

 npm init

　初始化一下項目，生成package.jsonphp

文件css

二：在文件根目錄下建立文件「webpack.config.js」，在根目錄下面建立一個文件夾命名爲「src」，在下面建立一個文件命名爲index.js,在項目中安裝webpack，在Terminal中執行操做 html

npm install --save-dev webpack

Webpack提供一個可選的本地開發服務器，這個本地服務器基於node.js構建，能夠實現你想要的這些功能，不過它是一個單獨的組件，在webpack中進行配置以前須要單獨安裝它做爲項目依賴java

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

編寫配置文件webpack.config.jsnode

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文件react

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

　　在Terminal中執行 jquery

npm run start

執行打包過程webpack

在dist文件夾中生成index.js文件ios

三：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;
}