https://qiita.com/daga_0301/items/a7aa8bed488b13f5db64 の続き
まずはファイル構成から
│ .babelrc
│ .eslintrc.json
│ package-lock.json
│ package.json
│ webpack.config.js
│
├─public
│ index.html
│
└─src
index.css
index.js
##webpack
webpackは今回使うツールの中で最上位のツール
javaScriptのモジュールやらcssやらを一つのファイルにまとめてくれます。
だから、htmlでこのようなことをしなくてよくなる。
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./add.css">
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
webpackはwebpack.config.jsファイルで設定をします。
module.exports = {
entry: { //バンドルする元ファイルの場所を指定
app : "./src/index.js"
},
output: { //バンドルした成果物のファイル名と場所を指定
filename: "bundle.js",
path: __dirname + "/public"
},
devServer : {//サーバーを立ててwebpackを起動するときの設定
historyApiFallback: true,
contentBase : __dirname + '/public',
port:8080,
publicPath:'/'
},
devtool:"#inline-source-map",
module:{ //モジュールの設定
rules:[
{
test:/\.js$/, //.jsと付くファイルを対象にする
enforce:"pre", //最初に実行することを指定
exclude: /node_modules/, //node_modules/にあるファイルは除外
loader:"eslint-loader" //eslint-loderを使う
},
{
test:/\.css$/, //.cssと付くファイルを対象にする
loader:["style-loader","css-loader"]
},{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader'
}]
}
};
##babel
babelはes6,es7で書いたjavascriptをes5に変換してくれます。
現在、javascriptはes6まで策定されていますが、ブラウザによってはes5しか対応していないものもあります。
import,class,letなどがes6になります。
この問題を解決してくれる素晴らしいツール、使わないわけにはいかない。
babelの設定ファイルは.babelrc
「.」から始まるファイルは設定によってはエクスプローラで表示されないので注意してください。
{
"presets": ["env","react"]
}
##eslint
eslintはタイプミスをチェックしたり、コードスタイルのルールを設定してくれます。
vsCodeにも組み込めるみたいなのでそっちで設定してもいいかも、
設定項目が馬鹿みたいに多いので動きさえすればいいのなら使わなくてもよい。
設定ファイルは.eslintrc.json
{
"env":{
"browser":true,
"es6":true
},
"parserOptions":{
"sourceType":"module",
"ecmaFeatures":{
"experimentalObjectResetSpread":true,
"jsx": true
}
},
"extends" : ["eslint:recommended","plugin:react/recommended"],
"plugins" :["react"],
"rules":{
"no-console":"off"
}
}
##css-loader style-loader
css-loaderとstyle-loaderはwebpackでcssファイルをバンドルするときに必要
css-loaderはcssファイルを読み取って、style-loaderがstyleタグを出力するらしい(←よくわかってない
設定ファイルはありません。
##終わり
今回はここまで
次はreactを動かしてみます。