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

 我来答
可口可越
2016-01-27 · TA获得超过276个赞
知道小有建树答主
回答量:221
采纳率:0%
帮助的人:202万
展开全部

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

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

  },

};

千锋教育
2018-06-27 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI&UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
展开全部
不知道你要配置什么内容,格式就是 module.exports = { entry:[ ], output:{ }, module:{ //loader } } webpack的配置文件主要就是这样的结构,也就是类似json的配置文件,你要根据自己的需要去看官方文档。 好像只有英文版的
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式