webpack v1 from Kent
Intro to the Production Webpack Course
There are several lessons that will build on top of this project. It is a fairly standard, small webpack bundled project. In this lesson we’ll explore the project a bit so you’re familiar with how things are set up for future lessons.
[00:00] In this course, we're going to be dealing with Todo's MVC application. It's based off of the Vanilla JS implementation and has been ported to ES6 and Webpack. In this lesson I'm just going to take you through a brief overview of how this application is put together, because lots of the lessons in this course will be dependent on some of these things that are already pre-set up.
[00:20] Here's our Webpack configuration file. We are using Webpack 2. This is actually a function that accepts an environment object and it returns our Webpack configuration object. We have our entry here, which resolves to our app.js file, which is in our source directory right there.
[00:42] Our output will just simply go to our dist directory with the filename of Bundle. The context for our application is the source directory and we have two types of files that we're loading -- first the JS files and the CSS files. The JS files are being loaded with ESLint and then in Babble. The CSS files are loaded with the CSS loader and then the style loader.
[01:05] We have a couple of scripts that we're using. First we have Build, which will build the development version of our application, and then Build Prod, which builds the production version. Here we're specifying the EMV as dev or our development build, and the EMV is prod for our production build. We're also passing this -p flag to tell Webpack to operate in production mode.
[01:31] We'll often use the Start script, which uses the Webpack Dev Server, specifying the environment as Dev, and the content base as the dist directory. We have a pre-start, which we'll run clean and copy script, which deletes our dist directory, with this Clean Dist script. It will copy the necessary files to our dist directory.
[01:54] We have a source Index HTML and a source favicon that will go into that dist directory. We also have tests in this project, so we have a test script with Karma Start. We also have watch test, which will run that in Watch mode.
[02:11] That's the overview of the project. I hope you enjoy the course.