より良いエンジニアを目指して

1日1つ。良くなる!上手くなる!

読書感想「速習webpack」

速習webpack 速習シリーズ

Webpackとは

js同士の依存関係をよしなに解決して、jsにパッキングしてくれるツールです。

大規模開発には欠かせなくなってきそうなツールですね。

基本

インストールは以下

npm install --save-dev webpack webpack-cli

main.jsの生成

npx webpack

webpack.config.js

module.exports = {
    mode:'development',
    entry:'./src/index.js',
    output: {
        path:`${__dirname}/dist`,
        filename:'main.js'
    },
    devServer: {
        contentBase:'./dist'
    },
}

トラブルシューティング

ERROR in ./src/index.js Module not found: Error: Can't resolve 'sample.json' in '/Users/rim/quick-master-webpack/part4-json/src' @ ./src/index.js 1:0-31 2:12-16

直下でも./とパスをしていないとwebpackコマンド時に失敗します。

NGの場合

import data from 'sample.json';
console.log(data[0].title);

OKの場合

import data from './sample.json';
console.log(data[0].title);