{"id":2682,"date":"2017-06-16T21:54:25","date_gmt":"2017-06-16T13:54:25","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=2682"},"modified":"2017-06-16T21:54:25","modified_gmt":"2017-06-16T13:54:25","slug":"webpackreact%e4%bd%bf%e7%94%a8%e5%b7%a5%e5%85%b7%e9%85%8d%e7%bd%ae","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=2682","title":{"rendered":"webpack+react\u4f7f\u7528\u5de5\u5177\u914d\u7f6e"},"content":{"rendered":"

1\u3001\u4e0b\u8f7dwebpack \u5de5\u5177<\/p>\n

npm install -g webpack\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0#webpack\u7684cil\u73af\u5883
\nnpm install -g webpack-dev-server\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0\u00a0#webpack\u81ea\u5e26\u7684\u670d\u52a1\u5668<\/p>\n

2\u3001\u5404\u79cd\u4f9d\u8d56\u5e93\u2014\u2014\u2014\u2014\u9879\u76ee\u672c\u5730\u4e0b\u8f7d<\/p>\n

# webpack \u672c\u8eab<\/p>\n

npm install webpack -D\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0#webpack\u672c\u5730\u4f9d\u8d56\u5e93
\nnpm install webpack-dev-server -D\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0#webpack\u670d\u52a1\u5668\u7684\u672c\u5730\u4f9d\u8d56<\/p>\n

#babel\u76f8\u5173\u5e93<\/p>\n

npm install\u00a0\u00a0babel-core -D\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0\u00a0#\u540e\u53f0\u7f16\u8bd1babel\u5de5\u5177
\nnpm install babel-preset-es2015 -D\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0#babel\u5bf9ES2015\u7684\u9884\u8bbe
\nnpm install babel-loader -D\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 #babel\u52a0\u8f7d\u5668
\nnpm install babel-preset-react -D\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 #babel\u5bf9react\u7684\u9884\u8bbe<\/p>\n

#react\u76f8\u5173<\/p>\n

npm install react -D\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0\u00a0#react \u672c\u8eab
\nnpm install react-dom -D\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0#react-dom \u672c\u8eab
\nnpm instakk react-hot-loader -D\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0 #react \u70ed\u66f4\u65b0<\/p>\n

#\u4f18\u5316\u76f8\u5173<\/p>\n

npm install style-loader -D
\nnpm install css-loader<\/p>\n

3\u3001\u7f16\u5199webpack\u914d\u7f6e\u76f8\u5173\u6587\u4ef6<\/p>\n

\/**\r\n * Created by Administrator on 2017\/6\/16.\r\n * webpack\u914d\u7f6e\u6587\u4ef6\r\n *\/\r\nmodule.exports = {\r\n    entry: '.\/index.js',\/\/\u5165\u53e3\u70b9\r\n    output: { \/\/\u8f93\u51fa\u5230\u54ea\r\n        path: __dirname, \/\/\u7f16\u8bd1\u540e\u7684\u5730\u5740 \u63a8\u8350\u7528\u53d8\u91cf\r\n        filename: 'bundle.js'\/\/\u7f16\u8bd1\u540e\u6587\u4ef6\u7684\u540d\u79f0\r\n    },\r\n    devtool: 'source-map', \/\/\u5f00\u53d1\u5de5\u5177\r\n    module: { \/\/\u7528\u5230\u54ea\u4e9b\u6a21\u5757\r\n        loaders: [\/\/\u6307\u5b9aloader\r\n            {\r\n                test: \/\\.css$\/,\r\n                loader: 'style-loader!css-loader'\r\n            },\/\/\u5982\u679c\u6587\u4ef6\u7ed3\u5c3e\u662f.css\uff0c\u5219\u4f7f\u7528style-loader\u4f5c\u4e3acss\u6253\u5305\u5668\r\n            {\r\n                test: \/\\.js$\/,\r\n                loader: 'react-hot-loader!babel-loader',\r\n                exclude:\/node_modules\/\r\n            }\/\/\u5982\u679c\u6587\u4ef6\u7ed3\u5c3e\u662f.js\uff0c\u5219\u4f7f\u7528react-hot-loader\u4f5c\u4e3ajs\u6253\u5305\u5668\uff0c\u4f46\u662f\uff0cnode_modules\u95ee\u4ef7\u5939\u91cc\u7684js\u4e0d\u9700\u8981\u52a8\u3002\r\n        ]\r\n    }\r\n};<\/pre>\n
4\u3001\u914d\u7f6ebabel\u9884\u8bbe\u6587\u4ef6\u2014\u2014\u00a0\u00a0.baberc\u6587\u4ef6\uff0c<\/p>\n
\/\/ babel\u6240\u9700\u6587\u4ef6 ,\u914d\u7f6ebabel\u91cc\u7684preset\r\n{\r\n    presets: [\r\n        ['es2015'],\r\n        ['react']\r\n    ]\r\n}<\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » webpack+react\u4f7f\u7528\u5de5\u5177\u914d\u7f6e<\/a><\/p>","protected":false},"excerpt":{"rendered":"
1\u3001\u4e0b\u8f7dwebpack \u5de5\u5177 npm install -g webpack\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0\u00a0 \u00a0#webpack\u7684cil\u73af\u5883 npm insta […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[186],"tags":[39,238],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2682"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2682"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2682\/revisions"}],"predecessor-version":[{"id":2683,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2682\/revisions\/2683"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2682"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}