安装node和webpack

新版的node配置貌似有些变化，参考这篇文章：node环境变量配置，npm环境变量配置

一、安装node

1.首先安装node

先从nodejs官网下载安装包，官网提供了.msi安装包和.zip压缩包。

如果下载的安装包，则在安装时，选项全部勾选(含Add to PATH添加到环境变量)，会自动添加环境变量。

如果下载的绿色压缩包，则直接解压，然后手动配置环境变量

NODE_HOME=D:\Tools\node-v10.13.0
NODE_PATH=%NODE_HOME%\node_modules
path中增加%NODE_HOME%

验证安装：

node -v
npm -v (node自带了npm软件包管理器)

2.修改npm配置

在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中

C:\Users\用户名\AppData\Roaming\npm
C:\Users\用户名\AppData\Roaming\npm-cache

我们可以删除它们，然后修改到自定义的目录。

npm config set prefix "D:\Tools\npm-global"
npm config set cache "D:\Tools\npm-cache"

产生的配置文件目录位于C:\Users\用户名\.npmrc。

3.使用淘宝镜像

默认镜像源https://registry.npmjs.org较慢，改为使用淘宝提供的镜像源

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

到C:\Users\用户名\.npmrc配置文件中，可以看到已经写入了配置

registry=https://registry.npm.taobao.org/

除此之外，也可以直接使用淘宝提供的cnpm来代替npm，只需要安装以下cnpm模块。

npm install -g cnpm --registry=https://registry.npm.taobao.org

全局安装和本地安装的区别

npm install -g：全局安装，类似于安装到了maven下的repository仓库。

npm install：本地安装，在当前目录下安装产生node_mouldels目录。通常是在项目根目录下执行该命令，产生node_mouldels目录。

二、安装webpack

官方教程：Installation

参考教程：webpack教程

注意，在安装webpack前必须先安装好node。另外，官方教程不建议全局安装webpack，会进行版本加锁。(我的理解)大致意思是一旦进行全局安装，所有项目就只能用这个版本而不能指定特定版本。

并建议大部分项目都使用本地安装，这使得单独升级更加容易。通常，Webpack是通过一个或多个npm脚本运行的，这些脚本将在您本地的node_modules目录中查找webpack的安装

"scripts": {
  "build": "webpack --config webpack.config.js"
}

本地安装webpack

本地安装就是为项目安装webpack，只需要在项目目录下执行下面命令

#本地安装webpack(webpack4.x需要单独安装webpack-cli)
npm install webpack webpack-cli --save-dev

三、演示webpack

1.创建一个目录webpack-demo，进入目录执行以下命令

#初始化
npm init -y

#本地安装webpack(webpack4.x需要单独安装webpack-cli)
npm install webpack webpack-cli --save-dev

2.创建项目，项目结构如下

webpack-demo
|- package.json
|- dist
    |- index.html
|- /src
    |- index.js

src/index.js

//导入lodash
import _ from 'lodash';

 function component() {
   const element = document.createElement('div');

  //原： Lodash, currently included via a script, is required for this line to work
  //现： Lodash, now imported by this script
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

   return element;
 }

 document.body.appendChild(component());

dist/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- <script src="https://unpkg.com/lodash@4.17.20"></script> -->
    <title>Getting Started</title>
  </head>
  <body>
    <!-- <script src="./src/index.js"></script> -->
    <script src="main.js"></script>
  </body>
</html>

package.json

 {
   "name": "webpack-demo",
   "version": "1.0.0",
   "description": "",
  "main": "index.js",  //删除该行
  "private": true,       //添加该行
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "webpack": "^5.4.0",
     "webpack-cli": "^4.2.0"
   }
 }

3.创建绑定

将lodash依赖项与index.js

#生产
npm install --save lodash

#开发
npm install --save-dev lodash

4.打包

npx webpack

将会接收src/index.js作为入口点，并产生dist/main.js作为输出。

5.浏览器打开dist/index.html，页面输出'Hello webpack'

posted @ 2018-08-12 14:59 静水楼台/Java部落阁阅读(592) 评论(0) 编辑收藏举报

刷新页面返回顶部