React+es6下的webpack.config.js怎么写

2025-04-05 09:25:10
推荐回答(1个)
回答1:

这种配置方式和你的可能有点不同,仅作参考

dev.config.js部分
var path = require('path');

var webpack = require('webpack');

var ExtractTextPlugin = require('extract-text-webpack-plugin');

var autoprefixer = require('autoprefixer');

var csswring = require('csswring');

module.exports = {

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

entry: [

'webpack-hot-middleware/client',

'./src/index',

],

output: {

filename: 'bundle.js',

path: path.join(__dirname, '/dist/'),

publicPath: '/dist/',

},

plugins: [

new webpack.DefinePlugin({

__DEVELOPMENT__: true

}),

new ExtractTextPlugin('bundle.css'),

new webpack.optimize.OccurenceOrderPlugin(),

new webpack.HotModuleReplacementPlugin(),

new webpack.NoErrorsPlugin(),

new webpack.ProvidePlugin({

jQuery: 'jquery',

}),

],

resolve: {

extensions: ['', '.jsx', '.js', '.json'],

modulesDirectories: ['node_modules', 'src'],

},

module: {

loaders: [{

test: /bootstrap\/js\//,

loader: 'imports?jQuery=jquery',

}, {

test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,

loader: 'url?limit=10000&mimetype=application/font-woff',

}, {

test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,

loader: 'url?limit=10000&mimetype=application/font-woff2',

}, {

test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,

loader: 'url?limit=10000&mimetype=application/octet-stream',

}, {

test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,

loader: 'url?limit=10000&mimetype=application/font-otf',

}, {

test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,

loader: 'file',

}, {

test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,

loader: 'url?limit=10000&mimetype=image/svg+xml',

}, {

test: /\.js$/,

loaders: ['react-hot', 'babel?stage=0&loose[]=es6.modules'],

exclude: /node_modules/,

}, {

test: /\.scss$/,

loader: 'css?localIdentName=[path]!postcss-loader!sass',

}, {

test: /\.png$/,

loader: 'file?name=[name].[ext]',

}, {

test: /\.jpg$/,

loader: 'file?name=[name].[ext]',

}],

},

postcss: function() {

return [autoprefixer({ browsers: ['last 2 versions', 'safari 5', 'ie 9', 'ios 6', 'android 4'] }), csswring];

},

};

prod.config,js部分

var path = require('path');

var webpack = require('webpack');

var ExtractTextPlugin = require('extract-text-webpack-plugin');

var autoprefixer = require('autoprefixer');

var csswring = require('csswring');

module.exports = {

devtool: 'source-map',

entry: [

'./src/index',

],

output: {

filename: 'bundle.js',

path: path.join(__dirname, '../dist/'),

publicPath: 'dist/',

},

plugins: [

new webpack.DefinePlugin({

'process.env': {

NODE_ENV: '"production"',

},

__DEVELOPMENT__: false,

}),

new ExtractTextPlugin('bundle.css'),

new webpack.optimize.DedupePlugin(),

new webpack.optimize.OccurenceOrderPlugin(),

new webpack.optimize.UglifyJsPlugin({

compress: {

warnings: false,

},

}),

new webpack.ProvidePlugin({

jQuery: 'jquery',

}),

],

resolve: {

extensions: ['', '.jsx', '.js', '.json'],

modulesDirectories: ['node_modules', 'src'],

},

module: {

loaders: [{

test: /bootstrap\/js\//,

loader: 'imports?jQuery=jquery',

}, {

test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,

loader: 'url?limit=10000&mimetype=application/font-woff',

}, {

test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,

loader: 'url?limit=10000&mimetype=application/font-woff2',

}, {

test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,

loader: 'url?limit=10000&mimetype=application/octet-stream',

}, {

test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,

loader: 'url?limit=10000&mimetype=application/font-otf',

}, {

test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,

loader: 'file',

}, {

test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,

loader: 'url?limit=10000&mimetype=image/svg+xml',

}, {

test: /\.js$/,

loaders: ['react-hot', 'babel?stage=0&loose[]=es6.modules'],

exclude: /node_modules/,

}, {

test: /\.scss$/,

loader: 'css!postcss-loader!sass',

}, {

test: /\.png$/,

loader: 'file?name=[name].[ext]',

}, {

test: /\.jpg$/,

loader: 'file?name=[name].[ext]',

}],

},

postcss: function() {

return [autoprefixer({ browsers: ['last 2 versions', 'safari 5', 'ie 9', 'ios 6', 'android 4'] }), csswring];

},

};