zoukankan      html  css  js  c++  java
  • webpack入门

    入门第一步安装以及实现一个最简单的案例

      npm包安装有两种方式:全局安装(global) 和 本地安装(local)。

    npm install webpack -g #全局安装
    npm install webpack    #本地安装

      两者的区别是:

      1.本地安装

      1) 将安装包放在 ./node_modules 下

      2) 可以通过 require() 来引入本地安装的包

      2.全局安装

      1)将安装包放在 /usr/local 下

      2)可以直接在命令行里使用

      本文主要介绍项目中常用的本地安装的方式;

      本地安装(博主是在learnWebpack目录下)

      1、右键git bash here

      2、输入npm install webpack

      系统会开始下载webpack,下载完毕后会在learnWebpack文件内生成一个node_modules的文件夹。

      ——>>

       3、通过require()引入本地安装的包

      第一步创建一个entry.js

    document.write("It works");

      第二步创建一个index.html 文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
    </html>

      在git命令行中执行一下语句

    $ webpack ./entry.js bundle.js

      如果正常运行的话,git命令行会出现以下语句

      

      上面的操作会编译你的文件,并创建一个bundle文件。

      现在,文件打包好了,我们运行index.html。我们可以看到:

       _ _ _ ______________________________________________________________

      ||

      第三步再创建一个content.js

    module.exports = "It work as well!!";

      然后在entry.js中添加require("./content.js");

      第四步再次运行index.html,我们可以看到:

       _ _ _ __________________________________________________

      ||

       现在来总结一下:

      1.本地安装不需要在指令中添加-g

      2.webpack使用require()方法时,require的目标文件中,需要有"module.exports = "一个对象/字符/变量(选择暴露的目标)"语句。

       3.本例中,我们在入口文件entry.js内部通过require方法得到了content.js中的一串字符,然后编译到bundle.js,最后index.html引用的是bundle.js的文件;

      在维护代码的时候,我们主要关心的是content.js这类文件,entry.js则作为入口文件的角色,而编译得到的bundle.js是工具打包得到的,真正在页面中引用的。

      参考链接:http://webpack.github.io/docs/tutorials/getting-started/

    行为影响状态,状态影响视图
  • 相关阅读:
    javaScript:制作随机验证码
    XSL简明教程
    javascript判断用户使用的浏览器
    jswindow对象的方法和属性资料
    VBscript操作文件
    终于找到组织了...
    公司网站的物流费用设计
    配置live Writer来发blog
    IIS必备的2个插件
    全国默哀 网站首页都要变成灰色的简单解决办法
  • 原文地址:https://www.cnblogs.com/foxNike/p/5701597.html
Copyright © 2011-2022 走看看