为了账号安全,请及时绑定邮箱和手机立即绑定

求教一下,在React+es6下的webpack.config.js怎么写?

/ 猿问

求教一下,在React+es6下的webpack.config.js怎么写?

繁花如伊 2019-11-11 13:09:18

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


查看完整描述

3 回答

?
慕桂英3389331

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

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];

  },

};


查看完整回答
反对 回复 2019-11-16
?
慕用2447696

参考github上面的示例:
https://github.com/newtriks/generator-react-webpack

'use strict';
let opts = require('./configopts.json');

/**
* Get a setting
* @param {String} setting
* @return {Mixed} setting or null if not found
*/
let getSetting = (setting) => {
return opts[setting] !== undefined ? opts[setting] : null;
}

/**
* Get choices for a given setting
* @param {String} setting
* @return {Mixed} Result or null if nothing was found
*/
let getChoices = function getChoices(setting) {

let config = getSetting(setting);
return config && Array.isArray(config.options) ? config.options : null;
}

/**
* Get the wanted choice by key
* @param {String} setting
* @param {String} key
* @return {Object}
*/
let getChoiceByKey = (setting, key) => {

let choices = getChoices(setting);
if(!choices) {
return null;
}

let result = null;

for(let choice of choices) {

if(choice.name === key) {
result = choice;
break;
}
}

return result;
}

/**
* Get the default choice for a config setting
* @param {String} setting
* @return {Mixed}
*/
let getDefaultChoice = (setting) => {
let config = getSetting(setting);
return config && config.default !== undefined && config.default.length > 0 ? config.default : null;
}

// getChoices
// getDefault

module.exports = {
getSetting: getSetting,
getChoices: getChoices,
getChoiceByKey: getChoiceByKey,
getDefaultChoice: getDefaultChoice
};



查看完整回答
反对 回复 2019-11-16
?
莫回无

这种配置方式和你的可能有点不同,仅作参考
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];
},
};



查看完整回答
反对 回复 2019-11-16

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信