webpack2配置react + antd开发生产环境

[NsNe]

webpack.dev.config.js

const webpack = require('webpack');
const path = require('path');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const precss = require('precss');
const autoprefixer = require('autoprefixer');

module.exports = function(env) {
    return {

        resolve: {
            extensions: [    //扩展后缀，让你的import 'index.js' 可以写成 import 'index'
                ".js",
                ".json",
                ".jsx",
                ".css",
                '.less',
                '.sass',
                '.scss'
            ]
        },

        entry: {
            main: path.resolve(__dirname, '../src/index.js'),    //项目入口文件
            vendors: [          //公共第三方依赖
                "react",
                'react-dom',
                'react-router',
                'react-router-dom',
                'react-router-redux',
                'redux',
                'react-redux',
                'redux-thunk',
                'immutable',
                'recharts'
            ],

        },

        module: {
            rules: [    //处理css, js, 图片等。其中js添加了对antd的支持
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader', 'postcss-loader'],
                }, {
                    test: /\.s[a|c]ss$/,
                    use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
                }, {
                    test: /\.less$/,
                    use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
                }, {
                    test: /\.jsx?$/,
                    exclude: /(node_modules)/,
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                presets: [
                                    [
                                        "es2015", {
                                            "modules": false
                                        }
                                    ],
                                    "stage-2",
                                    "react"
                                ],
                                plugins: [
                                    "transform-runtime",
                                    [
                                        "import", {
                                            "libraryName": "antd",
                                            "style": true,
                                        }
                                    ]
                                ]
                            }
                        }
                    ]
                }, {
                    test: /\.(woff|woff2|eot|ttf|svg)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 10000,
                            name: '[name]-[hash:8].[ext]',
                            outputPath: 'fonts/',
                            publicPath: '../fonts/'
                        }
                    }
                }, {
                    test: /\.(png|jpg)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'img/[name]-[hash:8].[ext]'
                        }
                    }
                }
            ]
        },

        output: {       //打包输出路径
            filename: 'js/[name].[hash:8].js',
            path: path.resolve(__dirname, '../dist'),
            publicPath: '/'
        },

        devtool: 'cheap-module-eval-source-map',

        plugins: [
            new webpack.LoaderOptionsPlugin({        //使用postcss对css添加浏览器兼容支持
                options: {
                    postcss: function() {
                        return [precss, autoprefixer];
                    }
                }
            }),
            new webpack.optimize.CommonsChunkPlugin({           //配置公共js
                names: ['vendors', 'manifest'] // Specify the common bundle's name.
            }),
            new webpack.optimize.UglifyJsPlugin({sourceMap: true, beautify: true, compress: false}),    //压缩js
            new HtmlWebpackPlugin({            //生成index.html, 并将css和js注入
                title: "webpack",
                template: path.resolve(__dirname, '../src/index.html'),
                favicon: path.resolve(__dirname, '../src/favicon.ico'),
                inject: 'body'
            }),
            new webpack.DefinePlugin({             //定义全局环境标识
                'process.env': {
                    NODE_ENV: JSON.stringify('development')
                }
            }),
            new webpack.HotModuleReplacementPlugin(),         //热部署
            new webpack.NamedModulesPlugin(),                //输出热部署改变的文件的详细信息
            new ManifestPlugin({fileName: 'asset-manifest.json'})
        ],

        devServer: {          //配置开发服务器
            port: 8080,
            host: 'localhost',
            inline: true,
            hot: true,
            historyApiFallback: true,
            noInfo: false,
            stats: 'minimal',
            compress: true,
            contentBase: path.resolve(__dirname, '../dist'),
            // match the output path
            publicPath: '/',
            // match the output 'publicPath'
            // 开发过程中可设置代理
            proxy: {
               '/api/v1': {
                    target: 'http://10.246.75.12:8080',
                    pathRewrite: {"^/api/v1" : ""},
                    secure: false,
                    changeOrigin: true
               }
            }
        }
    };
};

webpack.prod.config.js

const webpack = require('webpack');
const path = require('path');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const precss = require('precss');
const autoprefixer = require('autoprefixer');

module.exports = function(env) {

    var data = {

        resolve: {
            extensions: [".js", ".json", ".jsx", ".css", '.less', '.sass', '.scss']
        },

        entry: {
            main: path.resolve(__dirname, '../src/index.js'),
            vendors: [
                "react",
                'react-dom',
                'react-router',
                'react-router-dom',
                'react-router-redux',
                'redux',
                'react-redux',
                'redux-thunk',
                'immutable',
                'recharts'
            ]
        },

        module: {
            noParse: /node_modules\/(jquey|moment|chart\.js)/,
            rules: [{
                test: /\.css$/,
                use: ExtractTextWebpackPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'postcss-loader']
                })
            }, {
                test: /\.s[a|c]ss$/,
                use: ExtractTextWebpackPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'postcss-loader', 'sass-loader']
                })
            }, {
                test: /\.less$/,
                use: ExtractTextWebpackPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'postcss-loader', 'less-loader']
                })
            }, {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ["es2015", {"modules": false}],
                            "stage-2",
                            "react"
                        ],
                        plugins: [
                            "transform-runtime",
                            [
                                "import", {
                                    "libraryName": "antd",
                                    "style": 'css',
                                }
                            ]
                        ]
                    }
                }]
            }, {
                test: /\.(woff|woff2|eot|ttf|svg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: '[name]-[hash:8].[ext]',
                        outputPath: 'fonts/',
                        publicPath: '../fonts/'
                    }
                }
            }, {
                test: /\.(png|jpg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 8192,
                        name: 'img/[name]-[hash:8].[ext]'
                    }
                }
            }]
        },

        output: {
            path: path.resolve(__dirname, '../dist'),
            filename: 'js/[name].[chunkhash:8].js'
        },

        devtool: 'cheap-module-source-map',

        plugins: [

            new webpack.LoaderOptionsPlugin({
                options: {
                    postcss: function() {
                        return [precss, autoprefixer];
                    }
                }
            }),
            new ExtractTextWebpackPlugin('css/bundle.css'),
            new webpack.optimize.CommonsChunkPlugin({
                names: ['vendors', 'manifest'] // Specify the common bundle's name.
            }),
            new webpack.optimize.UglifyJsPlugin({
                output: {
                    comments: false  // remove all comments
                },
                compress: {
                    warnings: false
                }
            }),
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: JSON.stringify('production')
                }
            }),
            new HtmlWebpackPlugin({
                title: "webpack",
                filename: "../dist/index.html",
                template: path.resolve(__dirname, '../src/index.html'),
                favicon: path.resolve(__dirname, '../src/favicon.ico'),
                inject: 'body',
                minify: {
                    "removeAttributeQuotes": true,
                    "removeComments": true,
                    "removeEmptyAttributes": true
                }
            })

        ]

    };

    return data;
};

[Kylinyu]

That's what I need!Thank you~

[niaogege]

厉害了，我的哥！