react-todoMVC腳手架

• webpack.config.js

var path = require('path'); // node中的 路徑解析的模塊
const HtmlWebpackPlugin =require('html-webpack-plugin');

module.exports = {
    //入口文件
    entry:'./src/app.js',
    //出口文件
    output:{
        //出口文件名稱
        filename:'index.js',
        // 出口文件路徑
        path:path.resolve( __dirname , 'dist' )
        ,publicPath:"/"
    },
    // webpack-dev-server 服務器目錄
    devServer: {
     contentBase: './dist/'
    },

    //插件
    plugins:[
        // 自動在出口路勁生成 html文件， 函數能夠接受一個對象：template爲生成新html文件的模板文件
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    // 模塊處理
    module:{
        //處理規則
        rules:[
            //處理css
            {
                //匹配文件
                test:/\.css$/,
                //使用的loader，處理順序爲從後向前處理
                use:['style-loader','css-loader']
            },
            // 處理文件：img。。。
            {
                //匹配文件
                test:/\.(png|jpg|gif)$/,
                use:[{
                    loader:'url-loader',
                    //loader處理文件時的一些配置選項
                    options:{
                        //大小限制 （以字節爲單位）：小於這個限制的會轉爲 base64
                        limit:1024
                    }
                }]
            },
            //處理react JSX 語法 和 ES6語法
            {
                //匹配文件
                test:/\.js$/,
                //排除 node_modules文件下的全部文件
                exclude: path.resolve( __dirname , 'node_modules' ),
                //使用的loader信息
                use:{
                    loader:'babel-loader',
                    options:{
                        //使用的預設：env處理ES6語法 ， react處理JSX語法 , stage-0處理react對ES6部分語法不支持的問題
                        presets:[ 'env','react','stage-0']
                    }
                }

            }
        ]
    }

}

• package.json

{
  "name":"webpack-demo",
  "version":"1.0.0",
  "description":"",
  "main":"index.js",
  "scripts":{
      "webpack":"webpack",
      "start":"webpack-dev-server --open"
  },
  "author":"",
  "license":"ISC",
  "devDependencies":{
      "babel-cli":"^6.26.0",
      "babel-core":"^6.26.0",
      "babel-loader":"^7.1.2",
      "babel-preset-env":"^1.6.1",
      "babel-preset-react":"^6.24.1",
      "babel-preset-stage-0":"^6.24.1",
      "css-loader":"^0.28.7",
      "file-loader":"^1.1.5",
      "html-webpack-plugin":"^2.30.1",
      "style-loader":"^0.19.0",
      "url-loader":"^0.6.2",
      "webpack":"^3.10.0",
      "webpack-dev-server":"^2.9.7"
  },
  "dependencies":{
      "react":"^16.2.0",
      "react-dom":"^16.2.0"
  }
}