$ npm i webpack webpack-cli
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
mode: 'development'
}
$ webpack
// index.js
import { someLog } from './some';
console.log('Run index.js');
someLog();
// some.js
export function someLog() {
console.log('log from some.js');
}
$ npm i css-loader style-loader ts-loader
// inside config
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
}
]
}
...
$ npm i html-webpack-plugin
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// inside config
...
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
new webpack.DefinePlugin({
SOME_VALUE: JSON.stringify("some value from plugin"),
BOOL_VALUE: true
})
]
...
$ npm i webpack-dev-server
// inside config
...
devServer: {
hot: true
}
...
$ webpack-dev-server