webpackの使い方
WebPack
読み込んで使う。エントリーポイント
//spc/index.js import bar from './bar'; bar();
読み込まれる側
//src/bar.js
export default function bar() {
//
}
これを設定するにはwebpack.config.jsを作る。
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
htmlで読み込む
<-- page.html --> <!doctype html> <html> <head> ... </head> <body> ... <script src="dist/main.js"></script> </body> </html>
変換する。
npx webpack
インストール
npm install webpack webpack-cli --save-dev
実行
npx webpack
distフォルダが作成され main.jsが作られる。これをhtmlで読み込む。
実行はnpmのスクリプトに設定しておく
"scripts": {
"build": "webpack"
"watch": "webpack -w"
}
設定
webpack.config.js
module.exports = {
entry: `./src/index.js`,
output: {
path: `${__dirname}/dist`,
filename: 'main.js'
},
module: {
rules: {
{ test: /\.txt$/, use: 'hoge-loader' }
}
}
};
- entry ビルドを開始するエントリーポイントのjs
- output 出力
- module test:に指定された拡張子のものは use:に指定されたローダーで変換をかけること。
