babel-plugin-transform-decorators-legacy is installed and
error message is configured in .babelrc
store/countStore.js
import { observable, action, computed, runInAction, autorun, extendObservable } from "mobx";
class CountStore {
@observable num = 0;
constructor(){
}
}
export default CountStore;
components/index.jsx
import React, { Component } from "react";
import { render } from "react-dom";
import Bottom from "./index/bottom";
import Bodys from "./index/bodys";
import Top from "./index/top";
import CountStore from "../store/countStore";
const CountStores = new CountStore();
var arr=[1,2,3,4];
var arrs=[{
a:"d"
},
{
a:"b"
}]
class Index extends Component {
constructor(props){
super(props);
}
render(){
return <div id="index">
<div>123132</div>
<Top id="top" kkk={arr} dataid={arrs}></Top>
<Bodys id="bodys" countstore="{CountStores}">744855</Bodys>
<Bottom id="bottom">213213</Bottom>
</div>
}
}
export default Index;
components/index/bodys.jsx
import React, { Component } from "react";
import { render } from "react-dom";
import { observer } from "mobx-react";
@observer
class Bodys extends Component {
constructor(props){
super(props);
}
render(){
return <div>
<div></div>
<div>{this.props.countstore.num}</div>
</div>
}
}
export default Bodys;
package.json
{
"name": "webpack-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --inline --hot --env.dev",
"build": "rimraf dist && webpack -p --progress --hide-modules"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autodll-webpack-plugin": "^0.3.9",
"autoprefixer": "^6.6.0",
"babel-core": "^6.24.1",
"babel-loader": "^6.4.0",
"babel-plugin-component": "^1.1.1",
"babel-plugin-syntax-async-functions": "^6.13.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-plugin-transform-es2015-modules-amd": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-vue-app": "^1.2.0",
"babel-runtime": "^6.26.0",
"copy-webpack-plugin": "^4.5.2",
"cross-env": "^1.0.8",
"css-loader": "^0.27.0",
"file-loader": "^0.10.1",
"html-webpack-plugin": "^2.24.1",
"imagemin-webpack-plugin": "^2.2.0",
"jsx-loader": "^0.13.2",
"less": "^2.7.2",
"less-loader": "2.2.3",
"postcss-cssnext": "^3.1.0",
"postcss-import": "^11.1.0",
"postcss-loader": "^1.3.3",
"rimraf": "^2.5.4",
"style-loader": "^0.13.2",
"url-loader": "^0.5.8",
"webpack": "^3.1.2",
"webpack-dev-server": "^2.4.2"
},
"dependencies": {
"axios": "^0.15.3",
"base64-url": "^2.2.0",
"clipboard": "^2.0.0",
"echarts": "^4.0.4",
"echarts-wordcloud": "^1.1.3",
"es6-promise": "^4.2.4",
"js-base64": "^2.4.3",
"jsonp": "^0.2.1",
"lodash": "^4.17.10",
"mobx": "^2.6.0",
"mobx-react": "^3.5.8",
"prop-types": "^15.6.1",
"qs": "^6.5.1",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"sortablejs": "^1.6.1",
"wangeditor": "^3.1.1"
}
}
webpack.config.js
const resolve = require("path").resolve
const webpack = require("webpack")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const url = require("url")
const publicPath = "/dist/"
const ImageminPlugin = require("imagemin-webpack-plugin").default;
const CopyWebpackPlugin = require("copy-webpack-plugin").default;
const AutoDllPlugin = require("autodll-webpack-plugin");
module.exports = (options = {}) => ({
entry: {
vendor: ["react","react-dom"],
app: "./src/app.js"
},
output: {
path: resolve(__dirname, "dist"),
filename: options.dev ? "[name].js" : "[name].[chunkhash].js",
chunkFilename: options.dev ? "[id].js" : "[id].[chunkhash].js" ,
publicPath: options.dev ? "/" : publicPath
},
module: {
rules: [
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: "babel-loader?presets[]=env&presets[]=react",
options: {
presets: ["es2015", "stage-0", "react"], //babel presets reactreactesjs
}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
},
{
test: /\.less$/,
use:[
"style-loader",
"css-loader",
"less-loader",
]
},
{
test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
use: [{
loader: "url-loader",
options: {
limit: 10000
}
}]
}
]
},
plugins: [
// new webpack.optimize.CommonsChunkPlugin({
// name:"common",
// minChunks: 3,
// chunks: ["common","app"]
// }),
new webpack.optimize.CommonsChunkPlugin({
name:"vendor",
minChunks: Infinity,
chunks: ["vendor"]
}),
// new AutoDllPlugin({
// filename: "[name].[hash].js",
// path: "/",
// inject:true,
// entry: {
// vendor: ["react","react-dom"]
// },
// plugins: [
// new webpack.optimize.UglifyJsPlugin({
// //
// beautify: false,
// //
// comments: false,
// compress: {
// // UglifyJs
// warnings: false,
// // `console`
// // ie
// drop_console: true,
// //
// collapse_vars: true,
// //
// reduce_vars: true
// }
// })
// ]
// }),
new HtmlWebpackPlugin({
template: "src/index.tpl",
filename: "index.html",
chunks:["vendor","app"]
}),
new webpack.optimize.UglifyJsPlugin({
//
beautify: false,
//
comments: false,
compress: {
// UglifyJs
warnings: false,
// `console`
// ie
drop_console: true,
//
collapse_vars: true,
//
reduce_vars: true
}
}),
new CopyWebpackPlugin([{
from: "*/image/"
}]),
new ImageminPlugin({
disable:options.dev ? true : false,
pngquant: {
quality: "80"
},
jpegtran:{
progressive: true
},
test: /\.(jpe?g|png|gif|svg)$/i
}),
new webpack.DefinePlugin({
ISDEV:options.dev ? true : false
})
],
resolve: {
alias: {
"~": resolve(__dirname, "src")
},
extensions: [".js", ".jsx", ".json", ".css"]
},
devServer: {
host: "127.0.0.1",
port: 1010,
publicPath:"/",
proxy: {
"/api/": {
target: "http://127.0.0.1:8080",
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
}
},
hot: true,
watchOptions: {
aggregateTimeout: 30,
poll: 300
}
},
devtool: options.dev ? "-sharpeval-source-map" : "false"
})
.babelrc
{
"plugins": ["transform-decorators-legacy","transform-class-properties"]
}