package.json


{
  "name": "spa-note",
  "private": true,
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.26.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "postcss-easy-import": "^1.0.1",
    "postcss-loader": "^1.1.1",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-router": "^3.0.0"
  }
}

웹 패키지 버전은 하나의 시스템

webpack.config.js


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

module.exports = {
//エントリーポイント
  entry: {
    js: './src/main.js',
    css: './src/main.css',
  },
  output: {
    path: './public',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
//css-loaderとpoctcss-loaderを指定してCSSファイルをwebpackでビルドする
        loader: ExtractTextPlugin.extract('css-loader!postcss-loader'),
      },
    ],
  },
//変換対象のファイルを監視して変更があったら自動再変換、自動でリロードを行う。
  devServer: {
    contentBase: './public',
    inline: true,
    port: 8080,
    historyApiFallback: true,
    stats: {
      version: false,
      hash: false,
      chunkModules: false,
    },
  },
//extractTextPluginを使い、CSSファイルを外部ファイルとして出力するよう設定
  plugins: [
    new ExtractTextPlugin('bundle.css'),
  ],
//ワイルドカードを指定して@importができるプラグインを使う
  postcss: [
    require('postcss-easy-import')({ glob: true }),
  ],
  devtool: 'source-map',
};

.babelrc

{
  "presets": ["es2015", "react"]
}

index.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<link rel="stylesheet" href="/bundle.css">
</head>
<body>
<div id="app"></div>
<script src="/bundle.js"></script>
</body>
</html>

src/main.js


import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
　<h1>demo</h1>,
　document.getElementById("app")
);

src/main.js

main.css


@import 'styles/base.css';

src/styles/main.js

base.css


h1 {
  padding:20px;
  font-size:30px;
  color:#F00;
}

구축 실행

$ ./node_modules/.bin/webpack

서버 시작

$ ./node_modules/.bin/webpack-dev-server

Reference

이 문제에 관하여(React 노트 4 (React, Babel, webpack, PostCSS)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hththt/items/29d1b8fccdbc0e4b8731

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다