webpack-starter-basic

授权协议 Readme
开发语言 JavaScript
所属分类 Web应用开发、 常用JavaScript包
软件类型 开源软件
地区 不详
投 递 者 端木渝
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

Webpack Starter Basic Loo

webpack-starter-basic

A simple webpack 4 starter project for your basic web development needs.

Read more on the demo website or continue reading below.

Table of Contents

Motivation

I needed to make a plain ol' "drop your mail to stay updated of ongoing developments" page.

I did not need anything fancy, no frontend framework, no unit testing, simply a starter project that would let me use sass, ES6, load assets, add vendor prefixes, start a dev server, generate sourcemaps and optimize everything for production.

I looked around and all I found were heavily specialized and complicated webpack starter projects (webpack-angular-starter, webpack-react-starter, etc) that are so intertwined with plugins that stripping undesired functionality is almost impossible.

So I did this.

Features

  • Separated development and production webpack settings you can understand
  • Sass
  • ES6
  • Asset loading
  • CSS Vendor prefixing
  • Development server
  • Sourcemaps
  • Favicons generation
  • Production optimizations
  • Mobile browser header color

Requirements

Usage

Substitute PROJECT-NAME for your project name.

Clone the repository

git clone https://github.com/lifenautjoe/webpack-starter-basic PROJECT-NAME
 cd PROJECT-NAME

Install npm dependencies

npm install

Run the kickstart command

npm run kickstart

After the project has been kickstarted

To start the development server

npm start

To build for production

npm run build

To preview the production build

npm run preview

FAQ

When should I use this starter?

You should use this starter if any of the following are true:

  • You want to make a static page. e.g. splash screen, onboarding screen, phaser game, threejs visualization, countdown.
  • You found no good starter kit for whatever you want to do and need a solid place to start from.

Please note: If you are going to use a frontend framework like angular or react, you can of course add the required plugins andconfiguration but it's normally complicated and quirky enough that it's highly recommended to use one of the existingstarter projects such as react-webpack-babel or for angular projects the angular-cli.

Where's the common webpack config?

There is none and that is good thing.

The pattern creates unnecessary confusion over the setup, at the end the config will always be different across environments.People just put booleans everywhere on the common config to switch between these differing configuration options which is just awful to see and confusing for someone who's just starting on webpack.

The only truly shared config between these files are the entry js point and the main html template.

How to load fonts

If you don't support Opera Mini, browsers support the .woff format. Its newer version .woff2, is widely supported by modern browsers and can be a good alternative.

If you decide to use only this format you can load the fonts in a similar manner to images.

In your webpack.dev.js and webpack.prod.js add the following

module.exports = {
    // ..
    module: {
        rules: [
            // ..
            {
                test: /\.woff$/,
                loader: 'url-loader',
                options: {
                    // Limit at 50k. Above that it emits separate files
                    limit: 50000,
                    // url-loader sets mimetype if it's passed.
                    // Without this it derives it from the file extension
                    mimetype: 'application/font-woff',
                    // Output below fonts directory
                    name: './fonts/[name].[ext]',
                },
            }
            // ..
        ]
    }
    // ..
};

And let's say your font is in the folder assets with the name pixel.woff

You can add it and use it in index.scss as

@font-face {
    font-family: "Pixel";
    src: url('./../assets/pixel.woff') format('woff');
}

.body{
    font-family: 'Pixel', sans-serif;
}

If you would like to support all kinds of font types, remove the woff rule we previously added to webpack.dev.js and webpack.prod.js and add the following

module.exports = {
    // ..
    module: {
        rules: [
            // ..
            {
                test: /\.(ttf|eot|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    name: 'fonts/[name].[ext]',
                },
            }
            // ..
        ]
    }
    // ..
};

And assuming you have your fonts in the directory assets with names pixel.woff, pixel.ttf, pixel.eot , etc.

You can add it and use it in index.scss as

@font-face {
    font-family: 'Pixel';
    src: url('./../assets/pixel.woff2') format('woff2'),
    url('./../assets/pixel.woff') format('woff'),
    url('./../assets/pixel.eot') format('embedded-opentype'),
    url('./../assets/pixel.ttf') format('truetype');
    /* Add other formats as you see fit */
}

How to load images

In JavaScript

You can require an image from JavaScript like

const myImage = require('./assets/icon.png');

If the image size in bytes is smaller than 8192you, myImage will be a string with the encoded image path such as

data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJhc3NldHMvaW1hZ2VzL3RpY2stQ3lydkhSdi5zdmciOw==

If the image size is larger than 8192 it will be a string with the url to the image such as

src/assets/icon.png?hash=5b1f36bc41ab31f5b801

This limit is set so images like icons are not loaded through a request but you can force the loader to give you image urls always by doing the following but should not be necessary. The limit works 90% of the time.

const myImage = require('!!url!/assets/icon.png');

In index.html

If you would like to include an image on your index.html file, place the path of the image in a webpack require statement<%= require(imagePath) %>.

<img class="splash-title__img"
                     src="<%= require('./src/assets/logo-on-dark-bg.png') %>"
                     alt="webpack logo"></a>

How to install Bootstrap 4

After the project has been kickstarted

Install bootstrap

npm install bootstrap@4 --save

Install bootstrap dependencies.

npm install popper.js --save
npm install jquery --save

Replace the project index.scss with

@import "~bootstrap/scss/bootstrap";

And replace the project index.js with

require('./styles/index.scss');

import PopperJs from 'popper.js';
import jquery from 'jquery';


jquery(()=>{
    console.log('Hello jQuery + bootstrap 4!');
});

To see it all come together, replace the index.html body tag with

<body>

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                <div class="dropdown-menu" aria-labelledby="dropdown01">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

<main role="main" class="container">

    <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
    </div>

</main><!-- /.container -->
</body>

Start the development server and voilà.

npm start

To build for production

npm run build

To preview the production build

npm run preview

⚠️ Please remember to remove the Google Analytics tag in the index.html file as soon as you make the template yours.

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-101423651-2"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-101423651-2');
</script>

Websites using this starter kit on the wild

Have a website online built with this starter kit and would like to add it to the list? Open an issue!


Author Joel Hernandez

  • 在网上找vue-cli的多页模板 然后在引入各种组件库总是有问题,并且各个配置文件说明都不同,于是参照官方vue-cli来做了同配置的多页面脚手架出来,并且适当简化了一些功能(删除了测试库) 并引入了外部mock和axios两个常用库可以灵活配置,欢迎大家star和使用 提issue vue-multiple-pages-cli A modern Vue.js multiple pages cli

 相关资料
  • Webpack Frontend Starterkit A lightweight foundation for your next webpack based frontend project. Installation npm install Start Dev Server npm start Build Prod Version npm run build Features: ES6 Su

  • create-ts-lib Quick Start You can execute the create-ts-lib CLI using npx or by installing it globally with npm i -g create-ts-lib. # Use NPX or npm install -g create-ts-lib to install it as a global

  • angular1-webpack-starter A starter project using Angular 1.x with Webpack. A Webpack + ES6 re-implementation of the generator-aio-angular project. Still wanna use Gulp + ES5? Check the generator-aio-a

  • angularjs-webpack-starter The goal of this repository is to demonstrate a modern frontend setup for AngularJS projects, in such a way that it gets closer to how things are done with Angular. This proj

  • �� Gulp Webpack Starter Gulp Webpack Starter - fast and simple web development toolkit.It uses Gulp task runner and Webpack bundler.The starter perfectly fits building static HTML templatesor speeding

  • Complete starter seed project for Angular Material Branch with Universal (Server-side rendering) support Featuring Material Design 2, Webpack (and Webpack DLL plugin for faster dev builds), HMR (Hot M