欢迎来到3672js教程,我们关注js教程、js框架、js代码特效等。

webpack+React最全打包配置

3672Js.Com2019-05-30 12:18 来源:未知 阅读:16698 关注度2

webpack+React最全打包配置


看到一个网友发的webpack打包配置,感觉不太全。下面是我自己现在用的打包配置。
javascript 代码

var webpack = require('webpack')
var CleanPlugin = require('clean-webpack-plugin')
var path = require('path')
var ExtractTextPlugin = require("extract-text-webpack-plugin")

// plugins
plugins = [
    new ExtractTextPlugin("styles.css"),
    new webpack.optimize.CommonsChunkPlugin('common',  'common.js'),

    new webpack.optimize.DedupePlugin(),//重复的代码不被大包到bundle文件里面
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.LimitChunkCountPlugin({maxChunks: 15}),//合并重复请求
    new webpack.optimize.MinChunkSizePlugin({//合并重复请求
        minChunkSize: 51200, // ~50kb
    }),

    // This plugin minifies all the Javascript code of the final bundle
    new webpack.optimize.UglifyJsPlugin({
        mangle: true,
        comments: false,
        compress: {
            warnings: false, // Suppress uglification warnings
        },
    }),

    // This plugins defines various variables that we can set to false
    // in production to avoid code related to them from being compiled
    // in our final bundle
    new webpack.DefinePlugin({
        __SERVER__: false,
        __DEVELOPMENT__: false,
        __DEVTOOLS__: false,
        'process.env': {
            NODE_ENV: JSON.stringify('production'),
        },
    }),
]

module.exports = {
    debug: false,
    entry: {
        'app':['./src/client.jsx'],
        'common': ['react', 'react-dom','react-router', 'redux', 'react-redux', 'redux-router', 'redux-thunk', 'redux-logger', 'react-document-title', 'history/lib/createHashHistory']
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015']
        }, {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract(['css'])
        }, {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract("style", "css!less")
        },{
            test: /\.(ttf|eot|woff(2)?)(\?(t=)?[a-z0-9]+)?$/,
            loader: 'url?limit=50000&hash=sha512&digest=hex&name=[hash].[ext]'
        }, {
            test: /\.(svg?)(\?(t=)?[a-z0-9]+)$/,
            loader: 'url?limit=50000&hash=sha512&digest=hex&name=[hash].[ext]'
        }, {
            test: /\.svg$/,
            loader: 'svg-inline'
        }, {
            test: /\.(jpe?g|png|gif)$/i,
            loaders: [
                'file?hash=sha512&digest=hex&name=[hash].[ext]',
                'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false',
            ]
        }, {
            test: /\.mp3$/,
            loaders: [
                'file?hash=sha512&digest=hex&name=[hash].[ext]',
            ]
        }]
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: 'bundle.js'
    },
    plugins: plugins,
    devtool: false,
}

如果有问题,还请大佬们指教!

本站文章为3672js教程网友分享投稿,版权归原作者,欢迎任何形式的转载,但请务必注明出处。同时文章内容如有侵犯了您的权益,请联系我们处理。
评论已被关闭
{dede:include filename="foot.htm"/}