【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
-
安装nodejs,去官网,一路next安装
-
确定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
- 创建项目(即新建文件夹,用idea打开)
- 编写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']
}
]
}
}
- 打包
输入webpack
,你会发现在项目中会多一个文件夹dist
- 在html中引入包