webpack4 系列教程(一): 打包JS

chanthuang 发布于2019-08-23 10:31 / 1061人阅读

摘要：本身就是为了打包所设计，作为第一节，介绍怎么打包。检验规范支持支持。创建文件夹，其中和分别用和规范编写。收尾打包后的文件会按照我们的配置放在目录下，这时，需要创建一个文件，引用打包好的文件。个人网站原文链接系列教程一打包

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

云服务器 GPU云服务器 webpack4教程系列一 linux系列教程云服务器建站教程系列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96426.html

webpack-demos：全网最贴心webpack系列教程和配套代码

摘要：全网最贴心系列教程和配套代码欢迎关注个人技术博客。所以我花费了个多月整理了这份教程，一共分成节，每节都有讲解，并且准备了配套代码。奈何深感水平不够，只有一腔热情，所以直接开放了教程和源码。 webpack-demos：全网最贴心 webpack 系列教程和配套代码欢迎关注个人技术博客：godbmw.com。每周 1 篇原创技术分享！开源教程(webpack、设计模式）、面试刷题（偏前...

LMou 2019-08-23 12:25 评论0 收藏0
webpack4系列教程（二）：创建项目，打包第一个JS文件

摘要：对于大多数项目，建议本地安装。打包第一个文件首先，我们在根目录下创建一个文件和一个文件夹。而中的属性，表示入口的名称，此处就是。接下来打开文件，来编写一条命令执行的打包。 1. 创建项目 1.1 初始化一个项目首先安装nodejs，打开 nodeJs官网直接下载安装即可，安装完毕后打开命令行工具，进入你的项目文件夹，执行 npm init 进行项目的初始化： showImg(htt...

waterc 2019-08-23 14:40 评论0 收藏0
webpack4 系列教程(十四)：Clean Plugin and Watch Mode

摘要：作者按因为教程所示图片使用的是仓库图片，网速过慢的朋友请移步系列教程十四原文地址。需要注意的是应该把放在配置项的最后一个，因为配置是倒序的最后配置的最先执行。以保证每次正式打包前，先清空原来遗留的打包文件。作者按：因为教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步《webpack4 系列教程(十四)：Clean Plugin and Watch Mode》原文地址...

TalkingData 2019-08-23 12:27 评论0 收藏0
webpack4系列教程（十）：总结

摘要：传送门系列教程一初识系列教程二创建项目，打包第一个文件系列教程三自动生成项目中的文件系列教程四处理项目中的资源文件一系列教程五处理项目中的资源文件二系列教程六使用分割代码系列教程七使用系列教程八使用审查代码系列教程九开发环境和生产环境在前端开发日益复杂的今天，我们需要一个工具来帮助我们管理项目资源，打包、编译、预处理、后处理等等。webpack的出现无疑是前端开发者的福音，我的博文只...

hqman 2019-08-26 13:29 评论0 收藏0
webpack4 系列教程(三): 多页面解决方案--提取公共代码

摘要：文件配置如下多页面应用注意属性其次打包业务中公共代码首先打包中的文件着重来看配置。个人网站原文链接系列教程三多页面解决方案提取公共代码这节课讲解webpack4打包多页面应用过程中的提取公共代码部分。相比于webpack3，4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPlugin插件。在使用和配置上，更加方便和清晰。 >>...

CarterLi 2019-08-23 10:49 评论0 收藏0