zoukankan      html  css  js  c++  java
  • webpack前端构建工具学习总结(一)之webpack安装、创建项目

    npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题;

    常见的使用场景有以下几种:

    • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
    • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
    • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
    nodejs的官网地址:https://nodejs.org/en/
    nodejs中文网地址:http://nodejs.cn/
    1.从node.js官网下载最新安装包进行安装
    2.windows系统下,windows+R调出命令,输入cmd,打开命令工具,检测npm是否安装:输入命令:npm -v
     
    3.使用npm安装webpack:输入命令:npm install webpack -g
     
    注意:如长时间卡顿不安装,可切换国内镜像

    稍微搜索了一下相关问题,提到可能是网络不稳定的原因,开着VPN重试,还是不行。看到一种思路是更换国内镜像:

    npm config set registry https://registry.npm.taobao.org ,

    成功解决。

     

    将webpack安装到全局环境中

    4.输入命令:webpack -v,查看当前webpack的版本号

    5.进入项目目录,输入命令:npm init,生成package.json文件

    package.json的文件内容:

    6.输入命令:npm install webpack --save-dev为项目添加webpack依赖

    7.创建一个静态文件hello.js,里面包含一个hello函数和通过require引入world.js

     

    运行命令之前,hello.bundle.js不存在

    运行命令:webpack hello.js hello.bundle.js,将hello.js编译并打包到hello.bundle.js

    hello.bundle.js文件内容如下:

    Webpack 会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块

    运行过程中如果出现:webpack:command not found,请检查是否在全局环境下安装webpack,全局环境下安装webpack使用命令:npm install webpack -g

  • 相关阅读:
    hdu 5532 Almost Sorted Array(模拟)
    hdu 2612 Find a way(bfs)
    hdu 2660 Accepted Necklace(dfs)
    reactjs学习一(环境搭配react+es6+webpack热部署)
    途牛banner自动轮播
    web app开发技巧总结
    20个为前端开发者准备的文档和指南
    Github上最受关注的前端大牛 快来膜拜把!
    怎么才能成为优秀的前端开发工程师?
    Web前端知识技能大汇总
  • 原文地址:https://www.cnblogs.com/2019gdiceboy/p/11509645.html
Copyright © 2011-2022 走看看