分享一个简单的webpack+React配置

分享一个webpack+React配置

packjson内容

{
  "name": "webpack-material-ui-boilerplate",
  "version": "0.0.1",
  "description": "Sample project that uses material-ui",
  "repository": {
    "type": "git",
    "url": "https://github.com/503945930/webpack-material-ui-boilerplate.git"
  },
  "scripts": {
    "start": "webpack-dev-server --config webpack-dev-server.config.js --progress --inline --colors",
    "build": "webpack --config webpack-production.config.js --progress --colors",
    "lint": "eslint src && echo \"eslint: no lint errors\""
  },
  "private": true,
  "devDependencies": {
    "babel-core": "^6.3.26",
    "babel-eslint": "^6.0.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "css-loader": "^0.23.1",
    "eslint": "^2.5.1",
    "eslint-plugin-react": "^4.0.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "html-webpack-plugin": "^2.16.0",
    "react-hot-loader": "^1.3.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "material-ui": "^0.15.0-beta.2",
    "react": "^15.0.1",
    "react-dom": "^15.0.1",
    "react-intl": "^2.1.2",
    "react-tap-event-plugin": "^1.0.0",
    "webmaker-i18n": "^0.3.28"
  }
}

webpack内容

const webpack = require('webpack');
const path = require('path');
const nodeModulesPath = path.resolve(__dirname, 'node_modules');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const PATHS = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build')
};


const config = {
  //Entry points to the project
  entry: [
    'webpack/hot/dev-server',
    'webpack/hot/only-dev-server',
    path.join(__dirname, 'src/app/app.jsx'),
  ],
  //Config options on how to interpret requires imports
  resolve: {
    extensions: ["", ".js", ".jsx"],
    //node_modules: ["web_modules", "node_modules"]  (Default Settings)
  },
  //Server Configuration options
  devServer: {
    contentBase: 'src/', //Relative directory for base of server
    devtool: 'eval',
    hot: true, //Live-reload
    inline: true,
    port: 3000, //Port Number
    host: 'localhost', //Change to '0.0.0.0' for external facing server
  },
  devtool: 'eval',
  output: {
    path: PATHS.build, //Path of output file
    filename: 'js/app.js', //Name of output file
  },
  plugins: [
    //Enables Hot Modules Replacement
    new webpack.HotModuleReplacementPlugin(),
    //Allows error warnings but does not stop compiling. Will remove when eslint is added
    new webpack.NoErrorsPlugin(),

    new HtmlwebpackPlugin({
      filename: './index.html',
      template: './src/index.html',
      inject: 'body'
    }),
    new ExtractTextPlugin("css/[name].css")

  ],
  module: {
    loaders: [{
      test: /\.css$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
    }, {
      //React-hot loader and
      test: /\.jsx$/, //All .js files
      loaders: ['react-hot', 'babel-loader'], //react-hot is like browser sync and babel loads jsx and es6-7
      exclude: [nodeModulesPath],
    }]
  },
  //eslint config options. Part of the eslint-loader package
  eslint: {
    configFile: '.eslintrc',
  },
};

module.exports = config;

const webpack = require('webpack');
const path = require('path');
const nodeModulesPath = path.resolve(__dirname, 'node_modules');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const PATHS = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build')
};


const config = {
  //Entry points to the project
  entry: [
    'webpack/hot/dev-server',
    'webpack/hot/only-dev-server',
    path.join(__dirname, 'src/app/app.jsx'),
  ],
  //Config options on how to interpret requires imports
  resolve: {
    extensions: ["", ".js", ".jsx"],
    //node_modules: ["web_modules", "node_modules"]  (Default Settings)
  },
  //Server Configuration options
  devServer: {
    contentBase: 'src/', //Relative directory for base of server
    devtool: 'eval',
    hot: true, //Live-reload
    inline: true,
    port: 3000, //Port Number
    host: 'localhost', //Change to '0.0.0.0' for external facing server
  },
  devtool: 'eval',
  output: {
    path: PATHS.build, //Path of output file
    filename: 'js/app.js', //Name of output file
  },
  plugins: [
    //Enables Hot Modules Replacement
    new webpack.HotModuleReplacementPlugin(),
    //Allows error warnings but does not stop compiling. Will remove when eslint is added
    new webpack.NoErrorsPlugin(),

    new HtmlwebpackPlugin({
      filename: './index.html',
      template: './src/index.html',
      inject: 'body'
    }),
    new ExtractTextPlugin("css/[name].css")

  ],
  module: {
    loaders: [{
      test: /\.css$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
    }, {
      //React-hot loader and
      test: /\.jsx$/, //All .js files
      loaders: ['react-hot', 'babel-loader'], //react-hot is like browser sync and babel loads jsx and es6-7
      exclude: [nodeModulesPath],
    }]
  },
  //eslint config options. Part of the eslint-loader package
  eslint: {
    configFile: '.eslintrc',
  },
};
module.exports = config;