开发环境搭建（使用node.js和webpack）

2022-04-24 06:13:41

开发环境搭建（使用node.js和webpack）

noe.js

node.js

node.js简介

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 is的首要目标是提供种简单的、用于创建高性能服务器及可在该服务器中运行的各种程序的
开发工具。
在使用php Java等这些后台语言的服务器中，每个用户访问访问服务器就需要占用服务器定的内
存空间，一个8g内存的服务器理论上可以同时连接的最大用户数为4000个左右，如果要支持更多的
用户，就需要更多的服务器，增加更多的硬件成成本。node js修改了客户端到服务器端的链接方
法，为每个客户端的链接触发一个在node js内部进行处理的时间，因此，如果使用node js可以同时
处理多大几万个用户的链接。(高并发)

node.js的特点

运行JavaScript
依赖于Chrome V8殷勤进行代码解释
事件驱动
单线程，单进程（V8殷勤的特性）
非阻塞I/O
轻量、可伸缩、适用于实时数据交互应用

node.js运行机制

待写。。。

node.js用途

当应用程序需要处理大量并发的输入/输出，而在向客户端发出响应之前应用程序内部并不需要进行
非常复杂的处理的时候，可以使用node js来进行应用程序的开发。总的来说NodeJS适合运用在高并
发、I/O密集、少量业务逻辑的场景。
例如:聊天服务器，综合服务类网站，电子商务网站的服务器等等。

ndoe.js安装

1、下载地址

下载地址：https://nodejs.org/en/download/

2、安装

node.js安装，全是图形化界面安装，傻瓜式操作，直接下一步即可。

验证安装是否成功：

在命令行输入node -v,如果只能装成功，则会返回版本号。

默认安装在c盘的programfiles中，这样可以在去全局调用，如果改为其他盘，例如D盘，将其安装在D盘的programfile文件中，用该也能全局调用，安装在其他地方，可能全局会找不到，可能需要手动配置环境变量，具体方法，请自行百度。

webpack

webpack简介

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。

伴随着移动互联的大潮，当今越来越多的网站已经从网页模式进化到了 Webapp 模式。它们运行在现代的高级浏览器里，使用 HTML5、 CSS3、 ES6 等更新的技术来开发丰富的功能，网页已经不仅仅是完成浏览的基本需求，并且webapp通常是一个单页面应用，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的 JavaScript 代码，这给前端开发的流程和资源组织带来了巨大的挑战。

前端开发和其他开发工作的主要区别，首先是前端是基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统

简单来说：webpack是将各个js模块合并成最终的js。

webpack特点

代码拆分
Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。
Loader
Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。
智能解析
Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require("./templates/" + name + ".jade")。
插件系统
Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。
快速运行
Webpack 使用异步 I/O 和多级缓存提高运行效率，这使得 Webpack 能够以令人难以置信的速度快速增量编译。

webpack安装

由于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项目过程：

1、建立文件夹

（注意名字不要叫webpack）

2、创建一个json文件

作用：保存项目的版本、依赖关系等

 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"
}

3、在当前目录安装webpack

npm install webpack --sava-dev

虽然已经安装了webpack，但在项目中，仍然需要再次下载。

--save-dev 将模块安装在当前开发目录（也可以使用-D替代），使用该命令会自动把模块和版本号添加到package.json中的devdependencies部分，是使用该命令，需要手动进行添加

完成之后，项目文件夹中会出现两个内容 package.json文件和node_modules文件夹

4、创建src文件&新建入口文件index.js

作用：存放所有的模块

注：文件夹名必须叫src，index.其实不一定必须交index.js,这和上面package.json文件里的‘main‘属性的值有关

5、打包src下的js文件。

 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>

运行输出：

development 与production

mode有两个可选值：development和production，production不支持监听，production侧重于打包后的文件大小，development侧重于构建的速度

Development 开发环境

在开发环境下，我们首先考虑的是方便开发，方便代码调试，不需要考虑代码合并和css样式分离这些。

Production 生产环境

相比开发环境，生产环境打包是要最后发布到服务器部署的代码，我们需要尽量保持代码简洁，加载性能最优，不需要调试辅助工具。
我们从这几个方面优化：1.公共模块拆分，单独打包；2. css文件分离，单独打包输出；3.代码压缩；

webpack配置文件

webpack.config.js文件需要建立在项目的根目录下。

写完该文件后，再打包的时候。便只需输入webpack命令即可。

在命令行通过webpack打包命令时，可以控制配置参数（例如 --mode development），但能操作的参数有限，当有大

量的参数需要配置时，便用到了配置文件：webpack.config.js

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

一言以蔽之：loader就是自动的把其他的文件也转成js（例如，css文件，图片等）

loader通过npm来管理，可以在npm官网找到详细的教程和使用方法。

官网链接：https://www.npmjs.com/

简介

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
Loader 本身也是运行在 node.js 环境中的 JavaScript 模块，它通常会返回一个函数。大多数情况下，我们通过 npm 来管理 loader，但是你也可以在项目中自己写 loader 模块。
按照惯例，而非必须，loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 css-loader。
在引用 loader 的时候可以使用全名 css-loader，或者使用短名 css
Loader 可以在 require() 引用模块的时候添加，也可以在 webpack 全局配置中进行绑定，还可以通过命令行的方式使用

下面介绍几个常用的loader以及配置方法

css-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‘

url-loader

（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文件夹中

babel-loader

（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，仅写配置文件即可，不用在其他配置文件中引入

最终的webpack.config.js

// 多对多
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‘]
                }
            }
        }]

    }
}

开发环境搭建（使用node.js和webpack）

码农公寓

开发环境搭建（使用node.js和webpack）

noe.js

node.js

node.js简介

node.js的作用

node.js的特点

node.js运行机制

node.js用途

ndoe.js安装

1、下载地址

2、 安装

webpack

webpack简介

webpack特点

webpack安装

创建webpack工程项目

1、建立文件夹

2、创建一个json文件

3、在当前目录安装webpack

4、创建src文件&新建入口文件index.js

5、打包src下的js文件。

举个栗子

development 与production

webpack配置文件

webpack.config.js 初体验

一对一

多对一

多对多

loader

简介

css-loader

url-loader

babel-loader

最终的webpack.config.js

相关文章

2、安装