mariabrock
commented
4 years ago npm init -y
"scripts": { "start": "webpack-dev-server --mode development --open", "build": "webpack --mode production --module-bind js=babel-loader" },
npm install @babel/core @babel/preset-env babel-loader css-loader eslint eslint-config-airbnb-base eslint-loader eslint-plugin-import file-loader html-loader html-webpack-plugin mini-css-extract-plugin node-sass sass-loader webpack webpack-cli webpack-dev-server --save-dev
.gitignore .vscode/ .DS_Store package-lock.json node_modules/ dist/ build/
.babelrc { "presets": [ "@babel/preset-env" ] }
.eslintignore webpack.config.js node_modules
.eslintrc { "parserOptions": { "ecmaVersion": 6, "sourceType": "module" }, "extends": "airbnb-base", "globals": { "document": true, "window": true, "$": true, "XMLHttpRequest": true, "allowTemplateLiterals": true }, "rules": { "no-console": [1, { "allow": ["error"] }], "no-debugger": 1, "class-methods-use-this": 0, "linebreak-style": 0, "max-len": [1,200,2] } }
webpack.config.js const HtmlWebPackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { entry: './src/javascripts/main.js', devtool: "eval-source-map", module: { rules: [ { enforce: "pre", test: /.js$/, exclude: /node_modules/, loader: "eslint-loader", options: { formatter: require('eslint/lib/cli-engine/formatters/stylish') } }, { test: /.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, { test: /.html$/, use: [ { loader: "html-loader", options: { minimize: true } } ] }, { test: /.scss$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { sourceMap: true, importLoaders: 1 } }, { loader: 'sass-loader', options: { sourceMap: true } }, ], }, { test: /.(png|svg|jpg|gif)$/, use: ['file-loader'] }, { test: /.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] } ] }, plugins: [ new HtmlWebPackPlugin({ template: "./src/index.html", filename: "./index.html" }), new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" }) ], output: { path: __dirname + "/build", filename: "bundle.js" } };
npm install axios bootstrap jquery popper.js --save
SCSS: @import "~bootstrap/scss/bootstrap";
JS: import 'bootstrap';
index.html <!DOCTYPE html>
SCSS body { background-color: darkorchid; }
JS import '../styles/main.scss';
console.error('hi');
RUN THE DANG THING
npm start
User Story
As a user, when I load the page, I will see a background of dark orchid, a working bootstrap button, and a console error.
AC
WHEN the page loads THEN I will see a background AND a button AND a console error.
Dev Notes