【Webpack】入門1 - 急いでイソイテク

// 現時点のindex.html
<!DOCTYPE html>
<html lang="ja">
    <head>
       <meta charset="utf-8">
       <title>Hi, Webpaaaaacckkkkkk!!!</title>
       <script src="https://unpkg.com/lodash@4.17.11/lodash.min.js"></script>
   </head>
    <body>
        <b>Hi!!!! Webpaaaaaaaackkkkk!!!</b>
        <script src="src/index.js"></script>
    </body>
</html>

.現時点のindex.js

function component(){
    const element = document.createElement('div');
    const array = ['Helloooooo', 'WebPAAAAACKKKKK'];
    element.innerHTML = _.join(array, ' ')
    return element;
}

document.body.appendChild(component());

#########################
# webpack.config.js
#########################
const path = require('path')

const outputPath = path.resolve(__dirname, 'build/static')
console.log("outputPath: " + {outputPath})

module.exports = {
    // webpackのエントリポイント
    entry: './src/index.js',

    // 出力方式（場所・内容）を決める
    output: {
        // どこに出すのか
        path: outputPath,
        // 名前を何にするのか
        filename: 'out.js'
    }
}

#########################
# webpack.config.js
#########################
:
const outputPath = path.resolve(__dirname, 'dist')

module.exports = {
    :
    devServer: {
        contentBase: outputPath
    }
}

{
  "name": "dive-into-react-with-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "npx webpack-dev-server --open"  ★この行★
    // "start": "npx webpack-dev-server --open --mode development"  ★WARNING抑止するならこっち★
  },
  ：

#########################
# webpack.config.js
#########################

module.exports = {
    ：
    module: {
        rules: [
            {
                // どういったルールで登録するのか。正規表現で書く
                test: /\.css$/,
                // 何を登録し適用させるのか
                // 下記に書くものは順序に注意が必要である。
                // 並び順とは★逆順に★評価・実行される。
                // つまり下記は、css-loader、style-loaderの順序で実行される。
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    ：
}

#########################
# webpack.config.js
#########################

module.exports = {
    ：
    module: {
        rules: [
            ：
            {
                // BASE64URLエンコードする条件と対象
                test: /\.(jpe?g|png|gif|svg|ico)$/i, // 'i'は大文字小文字無視
                loader: 'url-loader',
                options: {
                    // 2KBを超えるサイズの画像がname.extで置き換えられる。
                    // 分離された${name.ext}は、並行してDLされるようになり、早くなる。
                    limit: 2048, // 単位=Bytes
                    name: './images/[name].[ext]'
                }
            }
        ]
    },
    ：
}

#########################
# webpack.config.js
#########################

module.exports = {
    ：
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            ：
        ]
    },
    ：
}

#########################
# style.scss
#########################
$primary-color: #FF5733;

div {
    color: $primary-color;
}