React和Webpack的新手

时间:2017-09-20 15:58:41

标签: reactjs webpack babeljs

我很擅长将React与webpack一起使用;这是一个合理的配置文件吗?你会加减什么?

const path = require('path');

const webpackConfig = {
  entry: path.resolve(__dirname, 'ENTRY'),
  output: {
    path: path.resolve(__dirname, 'STATIC'),
    filename: 'bundle.js',
  },
  module: {
    loaders: [],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  devtool: 'inline-source-map',
};

webpackConfig.module.loaders.push({
  test: /\.js[x]?$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: { presets: ['es2015', 'react']},
});

webpackConfig.module.loaders.push({
  test: /\.(scss|css)$/,
  loaders: ['style-loader', 'css-loader', 'sass-loader'],
});

module.exports = webpackConfig;

另外,我不完全确定需要哪些依赖项才能使其工作。有一些不同的babel依赖项已预先加载到我的项目文件夹中,但我只看到这里引用了一对(即babel-loader和es2015 / react预设)。

在我的package.json中我有

  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.6.0"
  },

1 个答案:

答案 0 :(得分:0)

您在webpack和package.json文件中使用的内容取决于您的应用程序的需求。例如,如果您的应用处理大量图像,您可能需要考虑添加可以处理图像的加载程序,例如url-loader。如果您希望它处理更多动态css类,您可能需要添加classNames npm模块。所以你现在所拥有的......但是在不知道你正在建造什么的情况下很难说要添加什么。

在我个人看来,我建议您使用create-react-app,因为您还是新手。这样您就不必处理配置Webpack的问题,而是可以专注于反应的基础知识。