• 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={{  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;
    }
    

      

     

  • 相关阅读:
    IIS7.5 webapi 不支持 Delete、Put 解决方法
    pip 安装 MySQL-python 失败
    Windows 下针对python脚本做一个简单的进程保护
    Python 多线程 Condition 的使用
    Python 无限循环
    Window nginx+tomcat+https部署方案 支持ios9
    Window Redis分布式部署方案 java
    Struts2注解 特别注意
    PermGen space Eclipse 终极解决方案
    特别备注一下一个缓存加载的问题,百度上还搜不出来,在一个老外的网站上看到的
  • 原文地址:https://www.cnblogs.com/huangguojin/p/6702873.html
Copyright © 2020-2023  润新知