lydiali9 / webpack

How it functions, the features it has, and how to set up a realistic build specific to your environment.

Webpack

Step 1

npm install webpack -g

Step 2

webpack ./app.js bundle.js

Step 3

Open index.html in the browser

Step 4

add the file of webpack.config.js as following

module.exports = {
    entry: "./app.js",
    output: {
        filename: "bundle.js"
    }
}

Step 5

webpack --watch

To show the resule as above command, we can write code as following

module.exports = {
    entry: "./app.js",
    output: {
        filename: "bundle.js"
    },
    watch: true
}

Step 6

npm install webpack-dev-server -g
webpack-dev-server

• Open URL http://localhost:8080/webpack-dev-server/], http://localhost:8080/ or http://localhost:8080/index.html or http://localhost:8080/webpack-dev-server/index.html in the browser.

Step 7

npm install babel-core babel-loader babel-preset-es2015 jshint jshint-loader node-libs-browser --save-dev

Step 8

npm install strip-loader --save-dev | npm install http-server -g

webpack-dev-server -d

As above command, You can use the key of debugger to debug.