安装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'
