{"id":1800,"date":"2018-03-25T12:51:48","date_gmt":"2018-03-25T03:51:48","guid":{"rendered":"https:\/\/lovelinux.mydns.jp\/?p=1800"},"modified":"2018-04-17T14:24:34","modified_gmt":"2018-04-17T05:24:34","slug":"webpack4-%e3%81%a7-react%e7%92%b0%e5%a2%83%e3%82%92%e6%95%b4%e3%81%88%e3%82%8b","status":"publish","type":"post","link":"https:\/\/lovelinux.mydns.jp\/?p=1800","title":{"rendered":"Webpack4 \u3067 React\u74b0\u5883\u3092\u6574\u3048\u308b(sass\u3082)"},"content":{"rendered":"

Webpack3\u3067\u3001\u958b\u767a\u3059\u308b\u306e\u306b\u6163\u308c\u3066\u3044\u305f\u3093\u3060\u304c\u3001\u77e5\u3089\u306c\u9593\u306bVer4\u306ewebpack\u304c\u51fa\u3066\u3044\u308b\u3002
\nwebpack4\u304b\u3089\u306f\u3001\u30b3\u30f3\u30d5\u30a3\u30b0\u30ec\u30b9\u3092\u76ee\u6307\u3057\u3066\u3044\u308b\u307f\u305f\u3044\u3060\u3051\u3069\u3001\u30b3\u30f3\u30d5\u30a3\u30b0\u3082\u591a\u5c11\u3044\u308b\u3057\u3001Ver3\u3068\u306f\u66f8\u304d\u65b9\u304c\u305a\u3044\u3076\u3093\u66ff\u308f\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u8efd\u304f\u307e\u3068\u3081\u3066\u304a\u304f\u3002<\/p>\n

\"webpack2\"<\/a><\/p>\n

\u958b\u767a\u30d5\u30a9\u30eb\u30c0\u4f5c\u6210<\/h3>\n

[bash]<\/p>\n

cd ~\/
\nmkdir workspace
\nmkdir wp4react
\ncd workspace\/wp4react<\/p>\n

npm init -y<\/p>\n

mkdir dist src
\nmkdir src\/components<\/p>\n

[\/bash]<\/p>\n

\u958b\u767a\u7528\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u5c0e\u5165<\/h3>\n

[bash]<\/p>\n

npm i -D babel-core babel-loader babel-preset-env babel-preset-react
\nnpm i -D webpack webpack-cli webpack-dev-server<\/p>\n

[\/bash]<\/p>\n

\u5fc5\u8981\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u5c0e\u5165<\/h3>\n

[bash]<\/p>\n

npm i -S react react-dom<\/p>\n

[\/bash]<\/p>\n

package.json\u306e\u8abf\u6574<\/h3>\n

test\u3060\u3051\u306b\u306a\u3063\u3066\u3044\u308b\u3068\u3053\u308d\u306b\u3001build\u3068start \u3092\u8ffd\u52a0\u3002<\/p>\n

\u3053\u308c\u3067\u3001 npm run build\/ npm run start \u304c\u4f7f\u3048\u308b\u3088\u3046\u306b\u306a\u308b\u3002<\/p>\n

[bash]<\/p>\n

“scripts”: {
\n “test”: “echo \\”Error: no test specified\\” && exit 1″,
\n “build”: “webpack”,
\n “start”: “webpack-dev-server –history-api-fallback”
\n },<\/p>\n

[\/bash]<\/p>\n

webpack.config.js\u306e\u8abf\u6574<\/h3>\n

\u30eb\u30fc\u30c8\u30d5\u30a9\u30eb\u30c0\u306bwebpack.config.js\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002
\n\u3053\u3053\u3067\u3001react\u304c\u52d5\u4f5c\u3059\u308b\u305f\u3081\u306e\u6700\u4f4e\u9650\u306e\u8a2d\u5b9a\u3092\u66f8\u304d\u307e\u3059\u3002
\n\uff08\u7d50\u5c40\u3001\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u3044\u308b\u3058\u3083\u3093\u3001\u3001\u3001\u3068\u3044\u3046\u306e\u306f\u3055\u3066\u304a\u304d\u3002\uff09<\/p>\n

CSS\u3084SCSS\u3092\u8aad\u307f\u3053\u3093\u3060\u308a\u3001\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080\u3068\u3053\u308d\u306f\u307e\u3060\u3001\u8abf\u3079\u3066\u3044\u306a\u3044\u306e\u3067\u3042\u3057\u304b\u3089\u305a\u3002<\/p>\n

[bash]<\/p>\n

module.exports = {
\n mode: ‘development’,
\n entry: ‘.\/src\/main.js’,
\n output: {
\n path: `${__dirname}\/dist`,
\n filename: ‘main.js’
\n },
\n module: {
\n rules: [
\n {
\n test: \/\\.js$\/,
\n use: [
\n {
\n loader: ‘babel-loader’,
\n options: {
\n presets: [
\n [‘env’, {‘modules’: false}],
\n ‘react’
\n ]
\n }
\n }
\n ],
\n exclude: \/node_modules\/,
\n }
\n ]
\n },<\/p>\n

devServer: {
\n contentBase: “dist”,
\n open: true
\n }
\n};<\/p>\n

[\/bash]<\/p>\n

React\u306e\u6975\u5c0f\u30a2\u30d7\u30ea\u3092\u4f5c\u308b<\/h3>\n

wp4react\/src\/main.js<\/p>\n

[bash]<\/p>\n

import React from “react”
\nimport ReactDOM from “react-dom”
\nimport HelloComp from “.\/components\/HelloComp”<\/p>\n

document.write(“<\/p>\n

<\/div>\n

“)<\/p>\n

ReactDOM.render (
\n ,
\n document.getElementById(“root”)
\n)<\/p>\n

[\/bash]<\/p>\n

wp4react\/src\/components\/HelloComp.js<\/p>\n

[bash]<\/p>\n

import React from “react”<\/p>\n

class HelloComp extends React.Component {
\n render () {
\n return (<\/p>\n

\n

Hello world!!<\/h1>\n<\/p><\/div>\n

)
\n }
\n}<\/p>\n

export default HelloComp<\/p>\n

[\/bash]<\/p>\n

wp4react\/dist\/index.html<\/p>\n

[bash]<\/p>\n


\n
\n
\n
\n react wp4 test<\/title><br \/>\n <script src=\".\/main.js\"><\/script><br \/>\n <\/head><br \/>\n <body><\/p>\n<p> <\/body><br \/>\n<\/html><\/p>\n<p>[\/bash]<\/p>\n<h3>\u52d5\u4f5c\u691c\u8a3c<\/h3>\n<p>http:\/\/localhost:8080\u304c\u30d6\u30e9\u30a6\u30b6\u30fc\u3067\u8d77\u52d5\u3057\u307e\u3059\u3002<\/p>\n<p>[bash]<\/p>\n<p>npm run start<\/p>\n<p>[\/bash]<\/p>\n<h3>Sass\u30d5\u30a1\u30a4\u30eb\u3082\u30a4\u30f3\u30af\u30eb\u30fc\u30c9<\/h3>\n<p>sass\u3082\u4e00\u7dd2\u306b\u958b\u767a\u3059\u308b\u306e\u304c\u666e\u901a\u306a\u306e\u3067\u3001\u305d\u306e\u305f\u3081\u306b\u5fc5\u8981\u306a\u51e6\u7406\u3092\u5217\u8a18\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n<h3>\u958b\u767a\u7528\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u5c0e\u5165<\/h3>\n<p>[bash]<\/p>\n<p>npm i -D sass-loader node-sass style-loader css-loader<\/p>\n<p>[\/bash]<\/p>\n<p>[bash]<\/p>\n<p>cd ~\/workspace\/wp4react\/src<br \/>\nmkdir sass<\/p>\n<p>[\/bash]<\/p>\n<h3>Sass\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u633f\u5165<\/h3>\n<p>wp4react\/src\/sass\/common.scss<\/p>\n<p>[bash]<\/p>\n<p>@import ‘.\/modules\/first.scss’;<\/p>\n<p>[\/bash]<\/p>\n<p>wp4react\/src\/sass\/modules\/first.scss<\/p>\n<p>[bash]<br \/>\n.hello_sass {<br \/>\n font-size: 20px;<br \/>\n color: #8372ff;<br \/>\n}<\/p>\n<p>[\/bash]<\/p>\n<h3>webpack.config.js\u3067 sass\u3092\u8aad\u307f\u8fbc\u3081\u308b\u3088\u3046\u306b<\/h3>\n<p>[bash]<\/p>\n<p>const MODE = ‘development’<br \/>\nconst enableSourceMap = (MODE === ‘development’)<\/p>\n<p>module.exports = {<br \/>\n mode: MODE,<br \/>\n entry: ‘.\/src\/main.js’,<br \/>\n output: {<br \/>\n path: `${__dirname}\/dist`,<br \/>\n filename: ‘main.js’<br \/>\n },<br \/>\n module: {<br \/>\n rules: [<br \/>\n {<br \/>\n test: \/\\.js$\/,<br \/>\n use: [<br \/>\n {<br \/>\n loader: ‘babel-loader’,<br \/>\n options: {<br \/>\n presets: [<br \/>\n [‘env’, {‘modules’: false}],<br \/>\n ‘react’<br \/>\n ]<br \/>\n }<br \/>\n }<br \/>\n ],<br \/>\n exclude: \/node_modules\/,<br \/>\n },<br \/>\n {<br \/>\n test: \/\\.scss\/,<br \/>\n use: [<br \/>\n ‘style-loader’,<br \/>\n {<br \/>\n loader: ‘css-loader’,<br \/>\n options: {<br \/>\n url: false,<br \/>\n sourceMap: enableSourceMap,<br \/>\n importLoaders: 2<br \/>\n }<br \/>\n },<br \/>\n {<br \/>\n loader: ‘sass-loader’,<br \/>\n options: {<br \/>\n sourceMap: enableSourceMap,<br \/>\n }<\/p>\n<p> }<\/p>\n<p> ]<br \/>\n }<br \/>\n ]<br \/>\n },<\/p>\n<p> devServer: {<br \/>\n contentBase: “dist”,<br \/>\n open: true<br \/>\n }<br \/>\n};<\/p>\n<p>[\/bash]<\/p>\n<h3>\u30a2\u30d7\u30ea\u306bsass\u8aad\u307f\u8fbc\u307f\u3092\u8ffd\u8a18<\/h3>\n<p>wp4react\/src\/main.js<\/p>\n<p>[bash]<\/p>\n<p>import React from “react”<br \/>\nimport ReactDOM from “react-dom”<br \/>\nimport HelloComp from “.\/components\/HelloComp”<\/p>\n<p>import “.\/sass\/common.scss” \u203b\u203b\u203b\u203b\u203b \u8ffd\u8a18 \u203b\u203b\u203b\u203b<\/p>\n<p>document.write(“<\/p>\n<div id='root'><\/div>\n<p>“)<\/p>\n<p>ReactDOM.render (<br \/>\n <HelloComp \/>,<br \/>\n document.getElementById(“root”)<br \/>\n)<\/p>\n<p>[\/bash]<br \/>\n\u4ee5\u4e0a\u3002<\/p>\n<p>\u6b21\u306e\u8a18\u4e8b\u3067\u3001Webpack4\u74b0\u5883\u3067Redux\u306eTodo\u30b5\u30f3\u30d7\u30eb\u3092\u52d5\u304b\u3059\u3068\u3044\u3046\u306e\u3092<br \/>\n\u66f8\u3044\u3066\u307f\u3088\u3046\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Webpack3\u3067\u3001\u958b\u767a\u3059\u308b\u306e\u306b\u6163\u308c\u3066\u3044\u305f\u3093\u3060\u304c\u3001\u77e5\u3089\u306c\u9593\u306bVer4\u306ewebpack\u304c\u51fa\u3066\u3044\u308b\u3002 webpack4\u304b\u3089\u306f\u3001\u30b3\u30f3\u30d5\u30a3\u30b0\u30ec\u30b9\u3092\u76ee\u6307\u3057\u3066\u3044\u308b\u307f\u305f\u3044\u3060\u3051\u3069\u3001\u30b3\u30f3\u30d5\u30a3\u30b0\u3082\u591a\u5c11\u3044\u308b\u3057\u3001Ver3\u3068\u306f\u66f8\u304d\u65b9\u304c\u305a\u3044\u3076\u3093\u66ff\u308f\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u8efd\u304f\u307e\u3068\u3081\u3066\u304a\u304f\u3002 \u958b\u767a\u30d5\u30a9\u30eb\u30c0\u4f5c\u6210 [bash] cd ~\/ mkdir workspace mkdir wp4react cd workspace\/wp4react npm init -y mkdir dist src mkdir src\/components [\/bash] \u958b\u767a\u7528\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u5c0e\u5165 [bash] npm i -D babel-core babel-loader babel-preset-env babel-preset-react npm i -D webpack webpack-cli webpack-dev-server [\/bash] \u5fc5\u8981\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u5c0e\u5165 [bash] npm i -S react react-dom [\/bash] package.json\u306e\u8abf\u6574 test\u3060\u3051\u306b\u306a\u3063\u3066\u3044\u308b\u3068\u3053\u308d\u306b\u3001build\u3068start \u3092\u8ffd\u52a0\u3002 \u3053\u308c\u3067\u3001 npm run build\/ npm run start \u304c\u4f7f\u3048\u308b\u3088\u3046\u306b\u306a\u308b\u3002 [bash] “scripts”: { “test”: “echo \\”Error: no test specified\\” && exit 1″, “build”: “webpack”, “start”: “webpack-dev-server –history-api-fallback” }, [\/bash] webpack.config.js\u306e\u8abf\u6574 \u30eb\u30fc\u30c8\u30d5\u30a9\u30eb\u30c0\u306bwebpack.config.js\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002 \u3053\u3053\u3067\u3001react\u304c\u52d5\u4f5c\u3059\u308b\u305f\u3081\u306e\u6700\u4f4e\u9650\u306e\u8a2d\u5b9a\u3092\u66f8\u304d\u307e\u3059\u3002 \uff08\u7d50\u5c40\u3001\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u3044\u308b\u3058\u3083\u3093\u3001\u3001\u3001\u3068\u3044\u3046\u306e\u306f\u3055\u3066\u304a\u304d\u3002\uff09 CSS\u3084SCSS\u3092\u8aad\u307f\u3053\u3093\u3060\u308a\u3001\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080\u3068\u3053\u308d\u306f\u307e\u3060\u3001\u8abf\u3079\u3066\u3044\u306a\u3044\u306e\u3067\u3042\u3057\u304b\u3089\u305a\u3002 [bash] module.exports = { mode: ‘development’, entry: ‘.\/src\/main.js’, output: { path: `${__dirname}\/dist`, filename: ‘main.js’ }, module: { rules: [ { test: \/\\.js$\/, use: [ { loader: ‘babel-loader’, options: { presets: [ [‘env’, {‘modules’: false}], ‘react’ ] } } ], exclude: \/node_modules\/, } ] }, devServer: { contentBase: “dist”, open: true } }; [\/bash] React\u306e\u6975\u5c0f\u30a2\u30d7\u30ea\u3092\u4f5c\u308b wp4react\/src\/main.js [bash] import React from “react” import ReactDOM from “react-dom” import HelloComp from “.\/components\/HelloComp” document.write(“ “) ReactDOM.render ( , document.getElementById(“root”) ) [\/bash] wp4react\/src\/components\/HelloComp.js [bash] import React from “react” class HelloComp extends React.Component { render () { return ( Hello world!! ) } } export default HelloComp [\/bash] wp4react\/dist\/index.html [bash] react wp4 test [\/bash] \u52d5\u4f5c\u691c\u8a3c http:\/\/localhost:8080\u304c\u30d6\u30e9\u30a6\u30b6\u30fc\u3067\u8d77\u52d5\u3057\u307e\u3059\u3002 [bash] npm run start [\/bash] Sass\u30d5\u30a1\u30a4\u30eb\u3082\u30a4\u30f3\u30af\u30eb\u30fc\u30c9 sass\u3082\u4e00\u7dd2\u306b\u958b\u767a\u3059\u308b\u306e\u304c\u666e\u901a\u306a\u306e\u3067\u3001\u305d\u306e\u305f\u3081\u306b\u5fc5\u8981\u306a\u51e6\u7406\u3092\u5217\u8a18\u3057\u3066\u304a\u304d\u307e\u3059\u3002 \u958b\u767a\u7528\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u5c0e\u5165 [bash] npm i -D sass-loader node-sass style-loader css-loader [\/bash] [bash] cd ~\/workspace\/wp4react\/src mkdir sass [\/bash] Sass\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u633f\u5165 wp4react\/src\/sass\/common.scss [bash] @import ‘.\/modules\/first.scss’; [\/bash] wp4react\/src\/sass\/modules\/first.scss [bash] .hello_sass { font-size: 20px; color: #8372ff; } [\/bash] webpack.config.js\u3067 sass\u3092\u8aad\u307f\u8fbc\u3081\u308b\u3088\u3046\u306b [bash] const MODE = ‘development’ const enableSourceMap = (MODE === ‘development’) module.exports = { mode: MODE, entry: ‘.\/src\/main.js’, output: { path: `${__dirname}\/dist`, filename: ‘main.js’ }, module: { rules: [ { test: \/\\.js$\/, use: [ { loader: ‘babel-loader’, options: { presets: [ [‘env’, {‘modules’: false}], ‘react’ ] } } ], exclude: \/node_modules\/, }, { test: \/\\.scss\/, use: [ ‘style-loader’, { loader: ‘css-loader’, options: { url: false, sourceMap: enableSourceMap, importLoaders: 2 }…<\/p>\n","protected":false},"author":1,"featured_media":1801,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[77],"tags":[86,83],"class_list":{"0":"post-1800","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-react","8":"tag-react","9":"tag-webpack"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/1800","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1800"}],"version-history":[{"count":8,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/1800\/revisions"}],"predecessor-version":[{"id":1813,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/posts\/1800\/revisions\/1813"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=\/wp\/v2\/media\/1801"}],"wp:attachment":[{"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1800"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1800"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lovelinux.mydns.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}