【vue-06】webpack npm

什么是Webpack

Webpack是一款模块加载器兼打包工具，他能把各种资源，比如js,css,less转化成一个静态文件，减少页面的请求，提高效率。

安装Webpack

在安装webpack之前，我们需要先了解一下nodejs，并且安装nodejs

Nodejs

什么是Node.js

（1）之前学过java，运行java需要安装的jdk环境

学习的这个Node.js，是JavaScript的运行环境，用于执行Javascript代码环境

不需要浏览器，直接使用node.js运行Jasvascript代码

（2）模拟服务器效果，比如tomcat

安装Node.js

1. 安装nodejs，去官网，一路next安装

2. 确定nodejs是否安装成功

cmd输入node -v，查看是否正确打印出版本号

E:\>node -v
v12.18.2

使用例子

使用nodejs执行javascript代码

服务器端应用开发

const http = require('http');
http.createServer(function (request, response) {
    // 发送 HTTP 头部
    // HTTP 状态值: 200 : OK
    // 内容类型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});
    // 发送响应数据 "Hello World"
    response.end('Hello Server');
}).listen(8888);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

NPM

什么是NPM

（1）在后端开发中，使用过maven,maven构建项目，管理下载jar依赖

npm类似于maven，用在前端中，管理前端js依赖。联网下载js依赖，比如JQuery

安装NPM

在安装nodejs的时候，会随便把npm一起安装

#查看版本
E:\>npm -v
6.14.5

npm具体操作

npm项目初始化操作

npm init

npm -init -y 使用的都是默认值，就不需要去输入回车确定

#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml

npm下载js依赖

修改npm镜像

//切换镜像安装一下nrm
npm config set registry http://registry.npm.taobao.org
//安装nrm
npm install -g nrm
//查看镜像列表
nrm ls
//切换镜像
nrm use taobao

如果在执行nrm ls报错，参考链接：https://blog.csdn.net/S_aitama/article/details/113706339

当我们修改好镜像之后，就可以进行下载了，比如JQuery

进入到项目的目录中，然后install

也可以根据package.json文件下载依赖

npm install

分析和安装完nodejs和npm，我们继续回到webpack

注意：webpack-cli的横线之间不要有空格,不然在测试的时候输入：webpack -v会显示如下

(base) D:\Project\vue\vue-second\myvue>webpack -v
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no):

npm install webpack -g
npm install webpack-cli -g
#测试安装成功：
webpack -v
webpack-cli -v

使用webpack

1. 创建项目（即新建文件夹，用idea打开）
2. 编写js
   
   如果是js的话，可以省略 .js ，如果是css不可以省略 .css,而且也要安装css加载器

npm install --save-dev style-loader css-loader

3.添加配置文件（和src目录同级） webpack.config.js(文件名不能变)

const path = require("path"); //Node.js内置模块
module.exports = {
      //配置js
    entry: './src/index.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路,径
        filename: 'bundle.js' //输出文件
    },
      //配置css
    output:{},
    module: {
        rules: [
            {
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

1. 打包

输入webpack,你会发现在项目中会多一个文件夹dist

1. 在html中引入包