Node.js是基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快， 易于扩展
的网络应用。
node js是一个用于 开发web服务器的开发工具。
node.js是一个基于V8 JavaScript引擎运行的平台。
V8 javascript是Google公司开发的一种高性能JavaScript引擎， 该引擎并不局限于在浏览器中运行，
node.js将其转用在了服务器中，并且提供了许多附加的具有不同用途的api.
.Nodejs是由c语言开发的基于chrome的V8引擎的javascript运行环境
待写。。。
node.js安装，全是图形化界面安装，傻瓜式操作，直接下一步即可。
验证安装是否成功：
在命令行输入node -v,如果只能装成功，则会返回版本号。
默认安装在c盘的programfiles中，这样可以在去全局调用，如果改为其他盘，例如D盘，将其安装在D盘的programfile文件中，用该也能全局调用，安装在其他地方，可能全局会找不到，可能需要手动配置环境变量，具体方法，请自行百度。
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。
伴随着移动互联的大潮，当今越来越多的网站已经从网页模式进化到了 Webapp 模式。它们运行在现代的高级浏览器里，使用 HTML5、 CSS3、 ES6 等更新的技术来开发丰富的功能，网页已经不仅仅是完成浏览的基本需求，并且webapp通常是一个单页面应用，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的 JavaScript 代码，这给前端开发的流程和资源组织带来了巨大的挑战。
前端开发和其他开发工作的主要区别，首先是前端是基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统
简单来说：webpack是将各个js模块合并成最终的js。
由于npm的源在国外 ，访问速度可能较慢，因此可以替换成国内的镜像。
1.淘宝镜像npm资源地址 npm install -g cnpm --registry=https://registry.npm.taobao.org
全局安装
首先要安装 Node.js， Node.js 自带了软件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持，建议使用最新版 Node.js。
用 npm 安装 Webpack :npm install webpack –g （-g 是global的简写）
全局安装webpack-cli： npm install -g webpack-cli
此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -v 试试。
如果输出webpack和webpack-cli版本号，说明安装成功。
建立webpack项目过程：
（注意名字不要叫webpack）
作用：保存项目的版本、依赖关系等
npm init
输入命令后，一路回车，会自动创建一个package.json文件,用于声明一些姓名，版权，版本号等基本信息。
里面初始内容如下：
{
"name": "wind-zhou", //默认为文件夹名
"version": "1.0.0",
"description": "",
"main": "index.js", //入口文件，合并时就合并到此文件夹
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1" //错误声明
},
"author": "",
"license": "ISC"
}
npm install webpack --sava-dev
虽然已经安装了webpack，但在项目中，仍然需要再次下载。
--save-dev 将模块安装在当前开发目录（也可以使用-D替代），使用该命令会自动把模块和版本号添加到package.json中的devdependencies部分，是使用该命令，需要手动进行添加
完成之后，项目文件夹中会出现两个内容 package.json文件和node_modules文件夹
作用：存放所有的模块
注：文件夹名必须叫src，index.其实不一定必须交index.js,这和上面package.json文件里的
‘main‘属性的值有关
webpack --mode development 或者 webpack --mode production
会生成一个dist文件夹，里面有个main.js
这样便会默认进行打包，入口文件是‘./src/index.js‘，输出路径是‘./dist/main.js‘，
其中src目录即index.js文件需要手动创建，而dist目录及main.js会自动生成。
（1）在src下创建hello.js文件
（2）在index.js引入hello.js的模块
（3）使用webpack --mode development 打包，会在dist文件夹下生成main.js文件
（5）在dist文件夹下，创建index.html,并引入main.js文件。
（6）浏览器中运行inde.html
项目结构：
hello.js文件：
let name = ‘wind-zhou‘;
export default name;
index.js文件：
import name from "./hello"
function sayName(name) {
alert("你好 :" + name)
}
sayName(name)
index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>index</title>
</head>
<body>
</body>
<script src="./main.js"></script>
</html>
运行输出：
mode有两个可选值：development和production，production不支持监听，production侧重于打包后的文件大小，development侧重于构建的速度
- Development 开发环境
在开发环境下，我们首先考虑的是方便开发，方便代码调试，不需要考虑代码合并和css样式分离这些。
- Production 生产环境
相比开发环境，生产环境打包是要最后发布到服务器部署的代码，我们需要尽量保持代码简洁，加载性能最优，不需要调试辅助工具。
我们从这几个方面优化 ：1.公共模块拆分，单独打包；2. css文件分离，单独打包输出；3.代码压缩；
webpack.config.js文件需要建立在项目的根目录下。
写完该文件后，再打包的时候。便只需输入
webpack命令即可。
在命令行通过webpack打包命令时，可以控制配置参数（例如 --mode development），但能操作的参数有限，当有大
量的参数需要配置时，便用到了配置文件：webpack.config.js
webpack.config.js 文件内容如下：
//webpack.config.js文件的内容：
const path=require(‘path‘);
module.exports={
mode:"development", //配置打包模式
entry:‘./src/index.js‘, //入口配置
output:{ //出口配置
path:path.resolve(__dirname,‘dist‘), //path必须是绝对路径
filename:‘main.js‘
}
}
使用webpack.config.js配置文件进行自动化打包，默认是一对一的打包（一个入口，一个出口）。
即只有一个入口js文件，最终使用webpack打包后，也合成一个js文件。
适用于单页面网站。
上面的例子中，所有的文件都通过依赖关系合并到index.js文件，打包后生成main.js文件。
逻辑关系如下图：
多对一是指入口js文件有多个，但最终通过webpack打包，只生成一个man.js文件（不一定非要叫是main.js）
逻辑关系如下图：
此时package.json文件内容如下：
// webpack.config.js
const path = require(‘path‘); //引入路径处理模块
module.exports = {
mode: "development", //配置打包模式
entry: [‘./src/banner.js‘, ‘./src/nav.js‘], //入口配置
output: { //出口配置
path: path.resolve(__dirname, ‘dist‘), //path必须是绝对路径
filename: ‘bundle.js‘
}
}
多对一只有多个入口js，打包后最终生成多个js文件。
逻辑关系如下图：
此时package.json文件内容如下：
// webpack.config.js
const path = require(‘path‘); //引入路径处理模块
module.exports = {
mode: "development", //配置打包模式
entry: {
one: ‘./src/banner.js‘,
two: ‘./src/nav.js‘
},
output: { //出口配置
path: path.resolve(__dirname, ‘dist‘), //path必须是绝对路径
filename: ‘main-[name].js‘ //合并后的js文件
}
}
注：filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面。
打出来是
main-one.js和main-two.js
-g 全局安装
--save-dev 本地安装
一言以蔽之：loader就是自动的把其他的文件也转成js（例如，css文件，图片等）
loader通过npm来管理，可以在npm官网找到详细的教程和使用方法。
下面介绍几个常用的loader以及配置方法
（1）下载css-loader
cnpm install css-loader style-loader -D
（2）配置
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
};
(3)在nav.js文件中引入
import ‘./style.css‘
（1）下载
cnpm i url-loader file-loader -D
（2）配置
module.exports = {
module: {
rules: [
{
test: /\.(gif|jpeg|png|woff|svg|eot|ttf)$/,
use: [
{
loader: ‘url-loader‘,
options: {
limit: 8192,
name: "images/[hash:8][name].[ext]"
},
},
],
},
],
},
};
(3)nav.js中引入
document.getElementById("one").style.background = `url( ${require("./image/wind-zhou.jpeg").default})`;
这里使用require引入。
注：图片存放在在src文件下的image文件夹中
（1）下载
cnpm install babel-loader @babel/core @babel/preset-env -D
（2）配置
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: ‘babel-loader‘,
options: {
presets: [
[‘@babel/preset-env‘, { targets: "defaults" }]
]
}
}
}
]
}
babel-loader是为了将es6代码转换成es5，仅写配置文件即可，不用在其他配置文件中引入
// 多对多
const path = require(‘path‘);
module.exports = {
mode: ‘development‘, //配置打包模式
entry: { //入口文件路径
one: ‘./src/index.js‘,
two: ‘./src/index1.js‘
},
output: { //出口文件
path: path.resolve(__dirname, "dist"), //打包文件存放位置 有的也是public
filename: ‘main-[name].js‘ //合并后的js文件
},
module: {
rules: [{
test: /\.css$/, //配置该 loader给那些文件使用，这里是后缀名为 css的文件都这样转换
use: [‘style-loader‘, ‘css-loader‘]
}, {
test: /\.(gif|jpeg|png|woff|svg|eot|ttf)$/,
use: [{
loader: ‘url-loader‘,
options: {
limit: 8192,
name: "images/[hash:8][name].[ext]"
}
}]
}, {
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: ‘babel-loader‘,
options: {
presets: [‘@babel/preset-env‘]
}
}
}]
}
}
原文：https://www.cnblogs.com/wind-zhou/p/14843043.html