Below are examples of the package.json
and webpack.config.js
files constructed in the last few lessons. Make sure you have a good understanding of how both files work before you use these as templates.
package.json
{
"name": "shape-tracker",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode=development",
"start": "npm run build & webpack-dev-server --open --mode development",
"lint": "eslint src/*.js",
"test": "jest --colors --coverage",
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.6.4",
"@babel/plugin-transform-modules-commonjs": "^7.6.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"eslint": "^6.3.0",
"eslint-loader": "^3.0.0",
"html-webpack-plugin": "^3.2.0",
"jest": "^24.9.0",
"style-loader": "^1.0.0",
"webpack": "4.39.3",
"webpack-cli": "^3.3.8",
"webpack-dev-server": "^3.8.0"
},
"dependencies": {
"bootstrap": "^4.5.0",
"jquery": "^3.5.1",
"popper.js": "^1.16.1"
}
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'eval-source-map',
devServer: {
contentBase: './dist'
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Shape Tracker',
template: './src/index.html',
inject: 'body'
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader"
}
]
}
};
Lesson 40 of 46
Last updated more than 3 months ago.