Webpack itself is designed to be packaged js
, as the first section describes how to js
package .
1. Inspection
webpack
Specification support
webpack
Support 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.js
Is 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