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);