webpack 自身就是为了打包
js所设想，作为第一节，引见
怎样打包js。

1. 磨练webpack范例支撑

webpack支撑es6, CommonJS, AMD。

建立vendor文件夹，个中minus.js、multi.js和sum.js分别用 CommonJS、AMD 和 ES6 范例编写。

>>> vendor 文件夹 代码地点

在进口文件app.js中，我们分别用 3 中范例，援用vendor文件夹中的 js 文件。

// 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));
});

2. 编写设置文件

webpack.config.js是 webpack 默许的设置文件名，>>> webpack.config.js 代码地点，个中设置以下：

const path = require("path");

module.exports = {
  entry: {
    app: "./app.js"
  },
  output: {
    publicPath: __dirname + "/dist/", // js援用途径或许CDN地点
    path: path.resolve(__dirname, "dist"), // 打包文件的输出目次
    filename: "bundle.js"
  }
};

注重output.publicPath参数，代表：js文件内部援用其他文件的途径。

3. 扫尾

打包后的js文件会根据我们的设置放在dist目次下，这时候，须要建立一个html文件，援用打包好的js文件。

然后在 Chrome 翻开(这节课只是打包js,不包括编译es6)，就能够看到我们代码的运转效果了。

4. 更多

本节的代码地点：>>> 点我进入

项目的代码堆栈：>>> 点我进入

迎接技术交流，援用请说明出处。

个人网站：
Yuan Xin

原文链接：
webpack4 系列教程(一): 打包JS