新建项目
npm init
```
package.json
```
{
"name": "webpackdemo1", 项目名称，包名，不能是grunt或webpack
"version": "1.0.0",//项目的版本
"description": "",//项目描述
"main": "index.js",//项目的入口文件
"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