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
npm 工具(用來安裝和管理nodejs包的一個工具。所有使用nodejs第三方庫的項目，都需要在項目初始化的時候 使用 npm init 命令來初始項目)