Webpack4 Series Tutorial (a): Packaging JS

Webpack itself is designed to be packaged js , as the first section describes how to js package .

1. Inspection webpackSpecification support

webpackSupport es6 , CommonJS , AMD .

Create vendor folders, which minus.js , multi.js and sum.js respectively, are written in CommonJS, AMD, and ES6 specifications.

>>> Vendor Folder code address

In the portal file app.js , we refer to vendor the JS file in the folder using the 3 specification.

// ES6import sum from "./vendor/sum";console.log("sum(1, 2) = ", sum(1, 2));// CommonJsvar minus = require("./vendor/minus");console.log("minus(1, 2) = ", minus(1, 2));// AMDrequire(["./vendor/multi"], function(multi) {  console.log("multi(1, 2) = ", multi(1, 2));});

2. Writing the configuration file

webpack.config.jsIs the Webpack default profile name,>>> 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引用路径或者CDN地址    path: path.resolve(__dirname, "dist"), // 打包文件的输出目录    filename: "bundle.js"  }};

Note output.publicPath The parameter, which represents: js the path to the file within which other files are referenced .

3. Closure

The packaged js files will be placed in the directory according to our configuration, at which dist point we need to create a html file that references the packaged js files .

Then open it in Chrome ( This lesson is just packaging js , not compiling es6 ) and you can see the results of our code running.

4. More

The Code address of this section:>>> point I entered

Project Code Warehouse:>>> point I entered

Welcome to the technical Exchange, quote please indicate the source.
Personal website: Yuan Xin
Original link: Webpack4 series tutorial (a): Packaging JS

Webpack4 Series Tutorial (a): Packaging JS