npm 工具(用來安裝和管理nodejs包的一個工具。全部使用nodejs第三方庫的項目，都須要在項目初始化的時候 使用 npm init 命令來初始項目)

新建項目
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