Webpack3简单入门1

头像
RichardXG
    33714
    发布于
     

    使用 yarn 测试 webpack 的使用教程。

    本工程代码

    创建工程

    $ mkdir test-webpack-app-yarn
$ cd test-webpack-app-yarn
$ yarn init
# ...

    安装 webpack

    $ yarn add webpack

# 新建一个 webpack 配置文件
$ touch webpack.config.js

# 内容：
module.exports = {
  entry: [
    './index.js'
  ],
  output: {
    path: __dirname,
    filename: 'bundle.js'
  }
}

    添加工程内容

    # index.js
$ touch index.js

# 内容：
document.write("Hello world, Webpack!")
    # index.html
$ touch index.html

# 内容：
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello, Webpack</title>
  </head>
  <body>
    <div id="app" />
    <script src="bundle.js" type="text/javascript"></script>
  </body>
</html>

    编译运行

    $ yarn run webpack
$ open index.html -a Google\ Chrome

    说明

    如果过程中发生错误，yarn会在工程根目录下自动生成yarn-error.log文件。

    关于 yarn

    javascriptwebpack3yarn
    本作品系原创，采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
    代码游戏
    记录各类编程技术
    avatar
    337 声望
    19 粉丝
    0 条评论
    得票最新
    推荐阅读
    正则表达式实例
    收集在业务中经常使用的正则表达式实例，方便以后进行查找，减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合，不能使用特殊...

    寒青赞 57阅读 8.6k评论 11

    JavaScript有用的代码片段和trick
    平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意：前三种方法只适用于32个位整数，对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

    jenemy赞 49阅读 7.3k评论 12

    再也不学AJAX了！（二）使用AJAX ① XMLHttpRequest
    「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章，希望读者通过阅读本系列文章，能够对 AJAX 技术有更加深入的认识和理解，从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇，最近更新于 2023 年 1...

    libinfs赞 42阅读 7k评论 12

    封面图
    「多图预警」完美实现一个@功能
    一天产品大大向 boss 汇报完研发成果和产品业绩产出，若有所思的走出来，劲直向我走过来，嘴角微微上扬。产品大大：boss 对我们的研发成果挺满意的，balabala...（内心 OS：不听，讲重点）产品大大：咱们的客服 I...

    wuwhs赞 32阅读 3.5k评论 5

    封面图
    安全地在前后端之间传输数据 - 「3」真的安全吗？
    在「2」注册和登录示例中，我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好，但是危险就在哪里，有些人发现了，有些人嗅到了，更多人却浑然不知。就像是给门上了把好锁，还...

    边城赞 29阅读 6.4k评论 5

    封面图
    2022大前端总结和2023就业分析
    我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点，算是系统性的梳理了一下我自己对前端一整年的总结。年后，在知乎上看到《前端的就业行情怎么样？》，下面都是各种唱衰前端的论调，什么裁员，外包化...

    i5ting赞 27阅读 2.3k评论 4

    封面图
    深入理解React Diff算法
    fiber上的updateQueue经过React的一番计算之后，这个fiber已经有了新的状态，也就是state，对于类组件来说，state是在render函数里被使用的，既然已经得到了新的state，那么当务之急是执行一次render，得到持有新...

    nero赞 31阅读 11.8k评论 3

    avatar
    337 声望
    19 粉丝
    宣传栏
    11