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教程网友分享投稿,版权归原作者,欢迎任何形式的转载,但请务必注明出处。同时文章内容如有侵犯了您的权益,请联系我们处理。
评论已被关闭