npm 工具(用来安装和管理nodejs包的一个工具。所有使用nodejs第三方库的项目，都需要在项目初始化的时候 使用 npm init 命令来初始项目)

Posted 2021-01-13 moluhongyan

新建项目
npm init
```
package.json

```
{
"name": "webpackdemo1", 项目名称，包名，不能是grunt或webpack
"version": "1.0.0",//项目的版本
"description": "",//项目描述
"main": "index.js",//项目的入口文件
<!-- 项目脚本
该对象内写的脚本，可以通过npm run 脚本名称 的方式执行脚本
-->
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",//作者
"license": "ISC" //版权类型
}

```

npm的问题： 下载的数据大多是来源外网，来源国外就可能会被防火墙挡住，导致
无法下载，因此可以在使用npm的时候，指定它的来源都在国内。
https://www.npmjs.com/
1.配置的npm的来源为 淘宝源
npm config set registry https://registry.npm.taobao.org/
校验
npm config get registry
2.直接安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果使用第二种方式，以后安装包的时候，都可以使用cnpm

1. 安装webpack

npm install --save-dev webpack

安装完成之后，会在项目中多出一个node_modules目录，该目录下的文件就是你开发过程中
需要使用到的相应的工具的包，

package.json

```
"devDependencies": {
"webpack": "^4.20.2"
}

```
环境：
生产环境： 已经上线的项目
开发环境： 正在处于开发环境下的项目

--save-dev: 表示安装的是开发环境下的依赖
devDependencies: 开发需要的依赖列表

--save: 表示安装的是 生产环境需要的依赖
Dependencies：生产环境的依赖列表

-g ： 表示全局安装
可以在命令行任意目录执行该命令

2. 安装webpack-cli(4.0版本以后都需要安装)
npm install --save-dev webpack-cli

3. 安装lodash
npm install --save lodash

```
// 安装一个第三方的库 lodash (鲁大师)
/**
* import 是 es6导入模块的方式，普通的js目前暂时无法直接使用该方式
* 如果直接使用了，会报错
*/
import _ from ‘lodash‘
var myDiv = document.createElement("div");
myDiv.innerhtml = _.join(["Hello","world"]);
document.body.appendChild(myDiv);
```

4. 打包压缩项目
npx webpack

5. 配置文件 （告诉webpack 要做什么 怎么做 什么时候做）
webpack.config.js

```
//导入nodejs的path模块
const path = require(‘path‘);
module.exports = {
//入口文件
entry: ‘./src/index.js‘,
//打包输出的配置
output: {
filename: ‘bundle.js‘,
//path是nodejs的路径模块，这句话的意思是将路径设置为当前项目根目录下的dist目录
path: path.resolve(__dirname,‘dist‘)
}
}
```

6. 根据配置文件进行打包处理
npx webpack --config webpack.config.js

7. 配置脚本
在package.json文件中的script对象中加入以下属性
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack --config webpack.config.js"
},
运行脚本
npm run build

8. 管理非JS资源，将非js资源转换成模块，让webpack打包到bundle里

加载器：loader 作用将不同的资源转换成js模块

css : css-loader,style-loader

cnpm i css-loader style-loader
配置webpack.config.js
```
const path = require(‘path‘);
module.exports = {
entry: ‘./src/index.js‘,
output: {
filename: ‘bundle.js‘,
path: path.resolve(__dirname,‘dist‘)
},
module: {
rules: [
{
test: /.css$/, //正则，表示处理所有的以css结尾的文件
use: [ ‘style-loader‘, ‘css-loader‘ ]
}
]
}
}
```
创建 src/css/style.css
```
#app {
width: 100px;
height: 100px;
background: cyan;
}
```
修改index.js
```
import "./css/style.css";
var app = document.createElement("div");
app.id = "app";
document.body.appendChild(app);
```
npm run build

9. 管理图片资源 file-loader

npm install file-loader --save-dev

配置webpack.config.js

```
var path = require(‘path‘);
module.exports = {
entry: ‘./src/index.js‘,
output: {
filename: ‘bundle.js‘,
path: path.resolve(__dirname,‘dist‘)
},
module: {
rules: [
{
test: /.(png|jpg|gif)$/,
use: [
‘file-loader‘
]
}
]
}
}

```
index.js
```
import img from ‘./images/bear.jpg‘
var myImage = new Image();
myImage.src = img;
document.body.appendChild(myImage);
```

10. 管理字体
1.字体和图片可以共用一个file-loader,因此无需重复安装file-loader
如果没安装file-loader，则需要先安装file-loader
npm i -s file-loader
2. 配置webpack.config.js
```
module: {
rules: [
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: [
‘file-loader‘
]
}
]
}
```

同时安装多个模块
npm i webpack webpack-cli -d

11. 插件配置
html-webpack-plugin