```
1.下载nodeJs
2.切换到当前目录,命令node -v 和npm -v
3.npm 使用
4.npm init(cd..)
5.npm init -y(生成package.json)
6.npm install 包的名字 npm install webpack --save-dev
7.慢？淘宝镜像(https://npm.taobao.org)cnpm
8.npm install webpack-cli --save-dev
9.进入(webpack) ./node_modules/.bin/webpack(报错)
10.入口文件夹(src)与文件(index.js)
11.将index.js打包main.js
12.每次进入./node_modules/.bin/webpack，配置[test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。]
13.npm run webpack(删除dist)再用
14.发现一个警告mode?none?直接敲打webpack报错
15.在package.json找scripts配置"dev":"npm run webpack"--"webpack": "webpack",
16."dev":"npm run webpack -- --mode development"
17."prod":"npm run webpack -- --mode production"(3)
18.npm run dev(配置完记得保存) 生态与开发
19.在src下创建header.js
20.在header.js下使用Es6语法export const header = "一生所爱用一生下载你";导出
21.在index.js下 import
22.npm run prod
1.node文件夹index.js输出
2.进入node文件夹 cd node/
3.node index.js
22.node dist/main.js(反复更改反复打包)麻烦
23.配置监听"prod":"npm run webpack -- --mode production --watch"
24.npm run prod (不再输入而是监听)
25.试一下，改变header.js 监听不用重复打包
----------------------------------------------------
1.footer.js exprot index.js import 保存 在main.js输出(去除dead code)
--------------------------------------------------------------------
1.npm run dev main.js
----------------------------
配置文件(webpack.config.js)
1.module.exports = {} node debag
webpack 四个核心
2.Entry index:"index.js"
3.Output path: path.resolve(__dirname, 'dist'), filename: 'main.js' //npm run dev
4.Loders 转换
01.npm install css-loader style-loader --save-dev
02.在src文件夹下创建index.css(写样式)
03.引入到index.js
04.npm run dev
05.服务器没找到 npm install webpack-dev-server --save-dev?出乎意料
06.npm run dev 报错 ./src/index.cc想要的结果
07识别不了css，配置Loders
08.在webpack.config.js下配置Loders
09.module:{rules:[{test:/\.css$/,use:["style-loader","css-loader"]}]}保存
10.npm run dev
11.在index.js中用es6写法引入css import css from "./index.css"
12.报错？再下载npm install css-loader style-loader --save-dev
13.localhost问题
14.去掉style-loader 这个没有 将字符串转换JS属性
15.npm run dev 有数组
16.+图片test:/\.jpe?g$/, use:["url-loader"]
17.npm install url-loader file-loader --save-dev
18.npm run dev
19.在index.js下improt引入图片import image from "./0.png";
20.npm run dev
----------------------------------------------
服务器(file不符合)
01.npm install webpack-dev-server --save-dev
02.在package.json下 "webpack-dev-server":"webpack-dev-server"
03."dev": "npm run webpack -- --mode development"改"dev": "npm run webpack-dev-server -- --mode development"不要--watch
04.npm run dev
05.保存()localhost:8080
06.删除dist
07.npm run dev (文件上传到服务器)
08.修改header.js中变量,自动打包(服务器好处)
09.在package中"dev": "npm run webpack-dev-server -- --mode development --hot"(快)
5.Plugins插件
一：html-webpack-plugin
01.npm install html-webpack-plugin --save-dev
02.在wbepack.config.js引入包 var xxx = require
03.plugins:[new xxx()]
04.npm run dev 在dist下 生成一个index.html 自动引入bundle.js
05.好处可以改bunndle.js成main.js
06.在src下创建index.html [{template:"./src/index.html"}]
07.删除dist再npm run dev
二：webpack
01.new webpack.ProgressPlugin()进程
```
