Webpack Starter Template/Boilerplate to generate Single File Bootstrap js/css

Webpack is quite a powerful beast (capable of doing a lot), but trying to configure it requires a lot of learning and time.

Instead of learning to configure Webpack from scratch, I prefer to use existing template/boilerplate configuration which already configured most of the useful things

• Babel - use modern JavaScript in any browser
• Optimization/minification
• SASS
• ESLint
• Merging or spliting of JavaScript/CSS
• Livereload/hot reload server for fast testing, etc.

I am going to use Vue.js Webpack Template (without actually using Vue.js). Why? Because it's really easy and have all the cool features mentioned above configured. Since this template is quite popular, it is easy to find answers if you bump into problems.

Vue.js Webpack Template

Install Node.js.

Install vue-cli.

sudo npm install -g vue-cli

Create a project with webpack template

vue init webpack PROJECT_NAME

Answer the following questions.

? Project name PROJECT_NAME
? Project description A Vue.js project
? Author luaz <[email protected]>
? Vue build runtime
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

NOTE: For beginner, I would advice not to use ESLint because it's very naggy (use semicolon or not, spacing, double arrow, etc.)

Run this command to spin up a development server which support hot-reloading.

cd PROJECT_NAMEnpm run dev

See the output at http://localhost:8080.

Development Server

You can use http://localhost:8080 for development preview.

If you are already running a nginx server or like me running hugo dev server, you can include the development javascript (with embeded css) into your html by including the following script.

<div id="app" /><script type="text/javascript" src="http://localhost:8080/app.js"></script>

NOTE: refer to Vue.js 2.x Development Build With Hot Reloading For External Server.

Remove Vue.js

Edit src/main.js and remove all the code.

/*import Vue from 'vue';import App from './App';Vue.config.productionTip = false;*//* eslint-disable no-new *//*new Vue({  el: '#app',  render: h => h(App),}); */

Include Bootstrap

Install Bootstrap.

cd PROJECT_NAMEnpm install jquery --savenpm install popper.js --savenpm install bootstrap --save

Edit src/main.js to include Bootstrap.

import 'bootstrap';import 'bootstrap/dist/css/bootstrap.css';

Edit build/webpack.base.conf.js. Observe changes marked with // EDIT.

...// EDITconst webpack = require('webpack')...module.exports = {  ...  resolve: {    extensions: ['.js', '.vue', '.json'],    alias: {      '@': resolve('src'),      // EDIT      'jquery': 'jquery/dist/jquery.slim.js',    }  },  ...  // EDIT  plugins: [    new webpack.ProvidePlugin({      '$': 'jquery',      jQuery: 'jquery',      Popper: ['popper.js', 'default'],      'Util': "exports-loader?Util!bootstrap/js/dist/util"    }),  ]}

NOTE: I am using jquery.slim.js for slightly reduced size.

NOTE: Refer to Setup Bootstrap 4 (Beta 3) With Npm And Webpack.

You can write javacript in src/main.js, or add js/css file in src directory and import them (e.g. import './assets/css/app.css';).

NOTE: Refer to Enable Sass On Vue.js Webpack Template.

Build/Compile

You can now start building the javascript and css files.

npm run build

You will notice the following files are generated.

• manifest.*.js
• app.*.js
• vendor.*.js
• app.*.css
• vendor.*.css
• *.map

NOTE: output are minified (production build) with source map file.

I wanted to combine all manifest.*.js, app.*.js and vendor.*.js into a single javascript file, and single css file.

Edit build/webpack.prod.conf.js. Observe // COMMENT for commented code.

...const webpackConfig = merge(baseWebpackConfig, {  ...  plugins: [    ...    // split vendor js into its own file    // COMMENT    /*    new webpack.optimize.CommonsChunkPlugin({      name: 'vendor',      minChunks (module) {        // any required modules inside node_modules are extracted to vendor        return (          module.resource &&          /\.js$/.test(module.resource) &&          module.resource.indexOf(            path.join(__dirname, '../node_modules')          ) === 0        )      }    }),     */    // extract webpack runtime and module manifest to its own file in order to    // prevent vendor hash from being updated whenever app bundle is updated    // COMMENT    /*    new webpack.optimize.CommonsChunkPlugin({      name: 'manifest',      minChunks: Infinity    }),     */    ...  ]})...

Now, only app.*.js and vendor.*.css is generated with source map files.

Run the following command to check for packages included in your build (make sure you didn't accidentally include unnecessary packages).

npm run build --report

You can now copy the generated .js and .css in dist directory to your production server/directory.