VueJS CRUD - Install Webpack

#What Is Webpack?

The image above sums up Webpack perfectly, it takes your project modules like Javascript, CSS, images and bundles them up into static files for the browser to use. This allows you to config the build process in multiple different ways, it will take your sass files and build them into CSS files. This will take your Javascript files and combine them together and even minify them into a single file for the browser. First we need to require webpack and path into the file, path will allow us to define a filepath which is relative to the position of the file. Then you can start the configuration by using the module.exports object.

module.exports = {
    // configuration
};

Then you need an entry file and an output file. The input file is what we're going to tell webpack to load, in here we can require any files we need to be loaded into the main output file, in this project it's going to be things like our single file VueJS components. The output file is going to be the location we want the output of webpack to be stored in.

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
}

If you want to define how each of the modules is handled by webpack then you can apply rules to the different modules by using loaders. ### What Are Loaders?

Loaders are a way of changing the resource file into the output, they are a list of functions used by Node.js to perform the actions.

{
    module: {
        loaders: [
            { test: /\.jade$/, loader: "jade" },
            // => "jade" loader is used for ".jade" files

            { test: /\.css$/, loader: "style!css" },
            // => "style" and "css" loader is used for ".css" files
            // Alternative syntax:
            { test: /\.css$/, loaders: ["style", "css"] },
        ]
    }
}

This will load in jade files and css files into the webpack builder. Webpack Loaders Below is the code you can use in our project to build your VueJS components into a /dist/build.js file.

var path = require('path')
var webpack = require('webpack')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue',
                options: {
                    // vue-loader options go here
                }
            },
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue'
        }
    },
    devServer: {
        historyApiFallback: true,
        noInfo: true
    },
    devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ])
}