专栏首页YuanXin一:打包JS

一:打包JS

webpack 本身就是为了打包js所设计,作为第一节,介绍怎么打包js

1. 检验webpack规范支持

webpack支持es6, CommonJS, AMD

创建vendor文件夹,其中minus.jsmulti.jssum.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. 更多

本节的代码地址:>>> 点我进入

项目的代码仓库:>>> 点我进入

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 三:多页面解决方案--提取公共代码

    按照惯例,我们在src/文件夹下创建pageA.js和pageB.js分别作为两个入口文件。同时,这两个入口文件同时引用subPageA.js和subPageB...

    心谭博客
  • 四:单页面解决方案--代码分割和懒加载

    其中,page.js是入口文件,subPageA.js和subPageB.js共同引用module.js。下面,我们按照代码引用的逻辑,从底向上展示代码:

    心谭博客
  • 八:JS Tree Shaking

    是的,在webpack v4中,不再需要配置UglifyjsWebpackPlugin。(详情请见:文档) 取而代之的是,更加方便的配置方法。

    心谭博客
  • 20140921遇到的问题-----JAVA----JS------jquery-1.11.1.min.js找不到的原因和解决办法

    当我把项目发布到tomcat服务器上面去,运行某个jsp页面的时候,发现功能没有实现 有没有报错,说明代码没有问题,那就找引入的文件是否正常导入了。这里有可能一...

    wust小吴
  • php工程狮感知的前端工作流程

    最近做了一些总结,之前都是迷迷糊糊,搞不清楚前端之前的相关定位。好好梳理了一下。错误之处请各位指正。

    大愚
  • Webpack5.0 新特性尝鲜实战 ?? [每日前端夜话0x37]

    在老袁写这篇文章的时候,v5版本仍然处于早期阶段,可能仍然有问题。而且作为一个major版本,其中有一些breaking changes,可能会导致一些配置和插...

    疯狂的技术宅
  • Easyui datagrid 修改分页组件的分页提示信息为中文

    直接引入中文locale目录下的easyui-lang-zh_CN.js,引入时注意js的引入顺序,避免js直接的相互影响,比如后面引入的js覆盖前面引入的js

    授客
  • 腾讯云独家详解小程序多人视频通话

    在微信小程序中搜索 腾讯视频云 可以加载到我们的演示用小程序,其中 多人音视频 功能可用于体验和测试多人音视频通话功能。出于 UI 美观和画面大小的考虑,Dem...

    腾讯视频云终端团队
  • smartClient 1--框架介绍

    一、是什么(以下简称SC)     smartClient 是一个基于web技术的开发框架,主要包括: 一个无需安装的 Ajax/HTML5 客户端引擎 UI组...

    用户1148399
  • JavaScript常用对象&属性&事件-图标

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛

扫码关注云+社区

领取腾讯云代金券