nodejs安装：

1.下载：https://nodejs.org/en/download/

2.安装node-v6.11.3-x64.msi文件，直接默认安装（next……）；

3.验证是否完成安装：cmd 进入后输入命令 node -v  回车能得到nodejs版本号；

输入node 回车再输入console.log('aaaaa') 回车能正常显示输出。

这表示nodejs安装成功。

webpack安装：

1.npm安装：在f盘新建文件夹webpack，在webpack文件夹建文件夹demo01；

shilt+右键打开命令窗口，在命令窗口输入npm install -g webpack，等待安装完毕；

在命令窗口输入webpack -h 查看安装的版本，恭喜你安装成功。

2.接下来就是写一个webpack配置文件

在demo01文件夹新建webpack.config.js文件

 module.exports = {

     entry: "./main.js",//入口文件，类似APP根文件

     output: {//出口文件

         filename: 'bundle.js'

     }

 }

webpack.config.js

实例：在demo01文件夹新建index.html，main.js文件

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <title></title>

         <meta charset="utf-8">

         <script type="text/javascript" src="bundle.js"></script>

     </head>

     <body>

     </body>

 </html>

index.html

 document.write("Hello world")

main.js

在命令窗口输入webpack，会自动生成bundle.js文件

3.安装服务器

在命令窗口输入npm install live-server -g

安装好后启动服务器：在命令窗口输入live-server

/*或者安装webpack-dev-server
a. npm install webpack-dev-server --save-dev
可在项目根目录下安装（不加-g，在项目根目录出现node_modules文件夹，内含webpack-dev-server及其依赖包），也可全局安装（加-g 必须sudo）

b. 在webpack.config.js中添加配置

var webpack=require('webpack');

module.exports = {

……

devServer: {

    historyApiFallback: true,

    inline: true,//注意：不写hot: true，否则浏览器无法自动更新；也不要写colors:true，progress:true等，webpack2.x已不支持这些

},

plugins:[

    ……

    new webpack.HotModuleReplacementPlugin()

 ]

    ……

};

c.在package.json里配置运行的命令（npm支持自定义一些命令）

"scripts":

{

　　"start": "webpack-dev-server --inline"//注意：不写--hot，否则浏览器无法自动更新

},

d. 运行server

  • npm start

    • Error: .........（此处省略一堆错误）
    • 解决：在本项目中安装webpack：（不加-g，在项目根目录出现node_modules文件夹，内含webpack及其依赖包）
      npm install webpack
  • 浏览器打开http://localhost:8080/
    成功运行，且修改app中的js代码，浏览器会自动刷新！成功！*/

启动后会自动打开浏览器

webpack初步运用算是完成了。

nodejs，webpack安装以及初步运用的更多相关文章

  1. 【JavaScript】 Webpack安装及文件打包

    背景 最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已. ...

  2. 前端自动化构建工具webpack （一）之webpack安装 和 设置webpack.confi.js

    目的:  模块化开发,组件化开发,让代码符合开发规范,更高效 webpack作用:从pack,就知道这是包的意思,比较专业点叫做前端自动化打包构建工具,代码错误检查,预处理,文件合并(打包),代码压缩 ...

  3. webpack前端构建工具学习总结（一）之webpack安装、创建项目

    npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...

  4. 使用vue-cli创建项目（包含npm和cnpm的安装nodejs的安装）

    转:http://www.cnblogs.com/wisewrong/p/6255817.html vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue ...

  5. webpack安装，常见问题和基本插件使用

    一:webpack认识 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关 ...

  6. 【原】nodejs全局安装和本地安装的区别

    来微信支付有2年多了,从2年前的互联网模式转变为O2O模式,主要的场景是跟线下的商户去打交道,不像以往的互联网模式,有产品经理提需求,我们帮忙去解决问题. 转型后是这样的,团队成员更多需要去寻找业务的 ...

  7. webpack安装配置使用教程详解

    webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...

  8. webpack安装配置

    webpack安装 1.安装之前你必须要安装node.js,如果你没安装可以在node.js网去下载node.js 2.全局安装webpack,打开cmd输入npm install webpack - ...

  9. Nodejs的安装配置及如何在sublimetext2中运行js

    Nodejs的安装配置及如何在sublimetext2中运行js听语音 | 浏览:4554 | 更新:2015-06-16 11:29 Nodejs的安装配置及如何在sublimetext2中运行js ...

随机推荐

  1. idea如何提取变量(拆分变量赋值和声明)

    需求描述: 我们时常遇到某个在某个局部作用域声明的变量,想要用在另一个地方,此时就需要在作用域外部声明变量,在作用域中给变量赋值. 在eclipse中这个功能和提取变量在一起,我们可以方便的拆分变量的 ...

  2. JAVA（1）之关于对象数组作形参名的方法的使用

    public class Test{ int tour; public static void cs(Test a[]) { for (int i = 0; i < a.length; i++) ...

  3. HTTP接口调用方式

    1.get方式,设置调用方式为get,参数直接在url中包含,直接调用获取返回值即可 2.post方式,content为application/x-www-form-urlencoded  ,参数格式 ...

  4. 解决前端项目启动时报错：Use // eslint-disable-next-line to ignore the next line.

    首先说一下这个问题产生的原因: 项目创建时设置了使用 eslint 进行代码规范检查. 解决办法: 找到webpack.base.conf.js文件,并且将下满这行代码注释掉. ...(config. ...

  5. Codeforces Round #619 (Div. 2) B. Motarack's Birthday

    Dark is going to attend Motarack's birthday. Dark decided that the gift he is going to give to Motar ...

  6. ANSYS单元应用简介1

    目录 1. LINK单元 2. BEAM单元 3. PLANE单元 4. SHELL单元 5. SOLIDE单元 6. COMBIN单元 ANSYS中的单元针对不同的应用对象,有着不同的选择方法,下面 ...

  7. window照片查看器无法查看照片的问题

    查看其他照片都可以,只有特殊的两张无法查看.百度|| 修改了环境变量中的tmp变量,路径改为e:\tmp(注:要选择磁盘空间足够的磁盘). 刷新过后,重新打开同一张图片,如下: 用系统自带画图软件尝试 ...

  8. SpringBoot学习笔记（二）——Springboot项目目录介绍

    官网生成SpringBoot项目 使用官网(https://start.spring.io/)生成一个Maven构建的的SpringBoot项目,下载下来的文件是这个样子的. 导入到IDEA中 为了查 ...

  9. STM32F4/F7运算性能

    参考http://bbs.21ic.com/icview-1622796-1-1.html

  10. Mac 系统添加右键功能菜单--新建 office，文档等

    Mac 系统自带右键功能键比较少,可以添加服务来拓展功能项.例如 Windows 系统右键可以新建 Word 文档,Excel 工作表等,Mac 默认没有,需要进行设置添加. 首先 F4 键进入 La ...