Webpack itself is for packaging
jsThe design, as the first section, introduces how to pack
js.

1. The inspectionwebpackSpecification support

Webpack supports ES6, CommonJS, AMD.

Create vendor folder where mines. js, multi-. js and sum.js are written in CommonJS, AMD and ES6 specifications respectively.

>>> Vendor folder code address

In the entry file app.js, we use the specifications in 3 respectively, referring to the JS file in the vendor folder.

// ES6
import sum from "./vendor/sum";
console.log("sum(1, 2) = ", sum(1, 2));

// CommonJs
var minus = require("./vendor/minus");
console.log("minus(1, 2) = ", minus(1, 2));

// AMD
require(["./vendor/multi"], function(multi) {
  console.log("multi(1, 2) = ", multi(1, 2));
});
Copy the code

2. Write a configuration file

Webpack.config. js is the default configuration file name for webpack, >>> webpack.config.js code address, which is configured as follows:

const path = require("path"); Module. exports = {entry: {app: "./app.js"}, output: {publicPath: __dirname + "/dist/", // js reference path or CDN address path: Path.resolve (__dirname, "dist"), filename: "bundle.js"}};Copy the code

Pay attention to the output.publicPath parameter, which indicates the path of the js file referencing other files.

3. The ending

The packed JS file will be placed in the dist directory according to our configuration. In this case, we need to create an HTML file that references the packed JS file.

Then open it in Chrome (this lesson is just packaging JS, not compiling ES6) and you can see the result of our code running.

4. More

The code address for this section: >>> click me to enter

>>> click me in