一分鐘搭建Webpack+react+es6框架

時間 2019-11-19

標籤一分鐘搭建 webpack+react+es6 webpack react 框架欄目 React 简体版

原文原文鏈接

最近react刷屏的厲害，而隨着它一塊兒走進咱們視野的還有webpack，webpack只是個工具，爲何如此火呢？由於簡單好了不廢話。

直接進入正題：

打開命令行工具：

npm install -g webpack
npm install -g webpack-dev-server

mkdir webpack-react-es6
cd webpack-react-es6
npm init
# 一直點回車 若是懶得填一些信息

　打開package.json 複製如下代碼：javascript

{
  "name": "react-es6-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot --progress --colors",
    "build": "webpack --progress --colors"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.7.2",
    "babel-loader": "^6.2.4",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "css-loader": "^0.23.1",
    "file-loader": "^0.8.5",
    "html-webpack-plugin": "^2.10.0",
    "react": "^0.14.7",
    "react-hot-loader": "^1.3.0",
    "react-transform-hmr": "^1.0.4",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

　建立webpack.config.js，複製如下代碼：css

var path = require('path');
var webpack = require('webpack');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
// var htmlWebpackPlugin =  require('html-webpack-plugin');

module.exports = {
    entry: [
      'webpack/hot/only-dev-server',
      "./app/index.js"
    ],
    output: {
        path: BUILD_PATH,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
              test: /\.js$/,
              exclude: /node_modules/,
              loader: "babel-loader",
              query:
                {
                  presets:['react','es2015']
                }
            }, {
                test: /\.scss$/,
                loaders: ['style', 'css', 'sass'],
                include: APP_PATH
            }, {
                test: /\.(png|jpg)$/,
                loader: 'url?limit=40000'
            }
        ]
    },
    resolve:{
        extensions:['','.js','.json']
    },
    devServer: {
        hot: true,
        inline: true
    },
    plugins: [
      new webpack.NoErrorsPlugin(),
      new webpack.HotModuleReplacementPlugin()
    ]
};

根目錄下建立index.html，爲了調試用：html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>New React App</title>
  </head>
  <body>
    <div id="content"></div>
    <script src="bundle.js"></script>
  </body>
</html>

根目錄下建立app文件夾，新建index.jsjava

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

let App = React.createClass({
  render() {
      return(<h1>Hello, world!</h1>);
  }
});

ReactDOM.render(<App/>, document.getElementById('content'));

最後在根目錄下敲命令npm install,安心等待就ok，不過有很大的可能部分模塊安裝失敗，好比node-sass，比較頑固，須要反覆安裝屢次。

若是實在安裝不成功，就直接下載http://pan.baidu.com/s/1bnYgWgv。node