一，webpack基础
学习网站：https://www.webpackjs.com/
简介：
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
1，两种安装方式
webpack 的安装依赖 nodejs 的npm，安装完node.js，可以使用npm，但是npm安装速度表较慢，所以可以安装淘宝的国内npm源 cnpm：
npm i -g cnpm --registry=https://registry.npm.taobao.org
1）全局安装
命令：cnpm i -g webpack
i:install -g:--global
可以在全局状态下（任何文件夹）使用webpack
注意：不推荐全局安装，全局安装会锁定版本，如果在使用不同webpack 版本的项目中，可能会导致构建失败
2)本地安装
当前最新版本应该是 4.20.2
本地安装 就是讲webpack 安装到特定的文件夹内，那么我们就只能在当前文件夹使用，其他文件夹不能使用
本地安装命令：
安装最新稳定版本：cnpm i --save-dev webpack
安装特定版本：cnpm i --save-dev webpack@<version>
eg:cnpm i --save-dev webpack@4.16.1
如果你安装的是 webpack4.0 + 的版本，还需要安装webpack-cli
cnpm i --save-dev webpack-cli
对于大多数项目，推荐本地安装，当体验如依赖时，更容易分别升级项目
当我们进行了本地安装，我们可以在 node_module/.bin/webpack 文件夹中访问
3)package.json
当前项目（当前文件夹下）安装的所有依赖配置文件，另外可以设置脚本执行依赖（vue），当node_modules 所有依赖被删除，可以使用该文件重新下载所有依赖：cnpm i
下载依赖时使用：--save-dev 即可将当前下载的依赖写进package.json
package.json 可以使用npm生成：npm init
一路回车即可
二，webpack 打包教程
1，创建项目
创建项目目录，初始化项目 npm init 生成文件package.json，安装webpack webpack-cli 命令如下：
mkdir webpack-demo1
cd webpack-demo1
npm init -y
cnpm i --save-dev webpack webpack-cli jquery@1.12.3
当前项目目录：
webpack-demo1
|-package.json
|-/node_modules
+ |-index.html
+ |-/src
+ |-index.js
解构说明：
index.html 是项目主入口文件，index.js 是主入口打包文件，所有与index.js 相关的依赖都会被打包
2,引入依赖（打一个包）
项目目录：
webpack-demo1
|-package.json
|-/node_modules
+ |-/dist
+ |-index.html
- |-index.html
+ |-/src
+ |-index.js
dist:项目真正文件夹，放置打包后的所有内容
使用npm 安装的内容都放在node_modules 文件夹中，在js中使用时 使用require 引入
打包使用webpack-cli：npx webpack
npx webpack 命令打包时，默认以src文件夹中index.js 为入口，打包后默认以dist文件夹中的main.js 为打包结果
3，打包配置文件
webpack4 以后的版本，不需要配置文件可以默认打包，但是很多项目比较复杂，需要在配置文件中设置很多内容，相比终端输入大量命令更加高效，所以我们可以创建一个能够取代cli打包的配置文件
项目目录：
webpack-demo1
|-package.json
|-/node_modules
+ |-/dist
+ |-index.html
+ |-/src
+ |-index.js
+ |-webpack.config.js
配置文件基本内容：
const path = require('path'); //系统自带path模块
module.exports = {
// 配置打包的入口js文件
entry: './src/index.js',
// 配置打包后的文件及文件位置
output: {
filename: "bundle.min.js",
// __dirname 当前文件夹路径
path: path.resolve(__dirname, 'dist')
},
watch: true//打包监听状态，一旦index.js 文件中内容变化，保存，立即重新打包
}
使用打包配置文件打包：
npx webpack --config webpack.config.js
4,npm 脚本 （npm script）
目前没有脚本的情况下，打包使用：npx webpack --config webpack.config.js
我们觉得很麻烦，所以我们可以使用npm 脚本进行打包：
在package.json中，找到scripts ，添加脚本：
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build_w": "webpack",
"build":"webpack --config webpack.config.js"
}
5，打包css文件
创建css文件，myStyle.css
想要打包css，首先需要webpack对css的样式表支持：
命令：
cnpm i --save-dev css-loader style-loader
mac：加sudo cnpm ...
css-loader:遍历样式表，如果发现有import导入css的文件，就将css文件引入进来
style-loader:将样式通过style 标签 直接插入到文档的头部
1）第一种方式
在index.js中引入语法：
require('!style-loader!css-loader!../css/myStyle.css');
重新打包
2）第二种方式
手动配置打包依赖，在webpack.config.js 中添加：
const path = require('path'); //系统自带path模块
module.exports = {
// 配置打包的入口js文件
entry: './src/index.js',
// 配置打包后的文件及文件位置
output: {
filename: "bundle.min.js",
// __dirname 当前文件夹路径
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
// 配置css-loader和style-loader
test: /.css$/,
use: ['style-loader', 'css-loader']
}]
},
watch: true //打包监听状态，一旦index.js 文件中内容变化，保存，立即重新打包
}
然后在index.js 文件中：
import './style.css';
重新打包
6，打包图片
使用file-loader 可以轻松的将图片打包加入到js和css 中
命令：
cnpm i --save-dev file-loader
进入webpack.config.js 中，在rules中添加：
{
// 配置图片加载
test: /.(png|svg|jpg|jpeg|gif)$/,
use: ['file-loader']
}
在相关的css中就可以引入图片
进入index.js 中也可以引入图片：
import fan from './开饭了.jpeg';
img.src = fan;
注：css或js 一旦被打包，其中引入的图片也会被打包到dist文件夹，文件没有压缩，但是文件名改了
7,打包字体图标
使用 file-loader
进入webpack.config.js 中，在rules中添加：
{
// 字体图标文件打包配置
test: /.(eot|woff|woff2|ttf|svg)$/,
use: ['file-loader']
}
8，加载数据文件（json）
json,xml,csv,tsc...
json 文件默认是支持的，不需要插件
import data from './json.json';
安装xml-loader 和 csv-loader
cnpm i --save-dev xml-loader csv-loader
进入webpack.config.js 中，在rules中添加：
{
// xml打包设置
test: /.xml$/,
use: ['xml-loader']
},
{
// csv,tsv打包设置
test: /.(csv|tsv)$/,
use: ['csv-loader']
}
xml使用：
import xml from './xml.xml';
9,模块依赖打包
打包文件载入依赖文件（如果打包的文件引入了其他模块，则会将其他模块一并打包）：
require()
eg：var $ = require('jquery');
require('!style-loader!css-loader!../css/myStyle.css');
创建依赖模块：
1）创建一个js文件 data.js
这个js文件就是一个模块
var json = {
str:"我是data模块中的数据"
}
module.exports = json;
2）在index.js 中引入模块
var d = require('./data.js');
创建一个函数块，在index.js中引入该模块，调用模块中的函数，传入自己的名字，输出 xxx你好,欢迎进入
三，打包处理
1，打包输出管理
index.html 根据项目的需求可能需要引入多个功能模块，那么主程序引入多个bundle包，所以我们需要对多个功能模块进行打包，并引入
2，多个功能模块同时打包
创建功能模块 print.js
同时打包index.js 和 print.js
entry: {
index: './src/index.js',
print: './src/print.js',
alert: './src/alert.js'
},
index: './src/index.js',
// 配置打包后的文件及文件位置
output: {
filename: "[name].bundle.min.js",
// __dirname 当前文件夹路径
path: path.resolve(__dirname, 'dist')
},
npm run build
3,自动更新打包
watch:true 可以监听打包
自动打包插件可以做到自动打包，还可以做到自动修改inde.html 中引入的bundle包，不能监听
安装插件：
cnpm i --save-dev html-webpack-plugin
进入webpack.config.js 中配置：
0 const HtmlWebpackPlugin = require('html-webpack-plugin');
...
module:{},
plugins: [
new HtmlWebpackPlugin({
title: '输出管理'
})
]
npm run build 即可生效
作用：
将打包的内容自动引入进index.html，并且根据打包名称的改动改变index.html 的内容，会影响我们自己写的内容，所以不建议使用
4，自动清理dist文件夹
将没有用的bundle包清理掉
下载插件：
cnpm i --save-dev clean-webpack-plugin
进入webpack.config.js 文件修改：
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
...
module:{},
plugins: [
new CleanWebpackPlugin(), //自动清理dist文件夹
]
此插件会将非打包内容全部删除，包括html文件，不建议使用
npm run build 启动
5，打包内容错误定位 source map
bundle 包会主动将文件以及依赖的文件打包在一起，并且对代码进行压缩（变成一行）和混淆（变量和内容更换），如果代码中有错误，那么浏览器报错之后能找到的就只有一行代码，无法定位错误位置
js自带功能：inline-source-map
注意：此功能仅仅用于开发环境的解释说明，不可用于生产环境
进入webpack.config.js 添加：
module.exports = {
...,
devtool:"inline-source-map"
}
npm run build
6,观察者模式自动构建打包
watch
使用npm run build 打包，每次当内容变化都要重新打包，可以使用watch 进行打包监听，有两种方案：
1）在webpack.config.js 中设置
module.exports={
...,
watch:true
}
打包监听状态，一旦index.js 文件中内容变化，保存，立即重新打包
2)在package.json 中添加脚本
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build_w": "webpack",
"build": "webpack --config webpack.config.js",
+ "watch": "webpack --watch"
},
npm run watch
研究题：浏览跟随代码变化自动刷新
7，webpack 自带的简单本地服务器 webpack-dev-server
作用：实现实时重载，实时打包，自动打开浏览器，浏览内容自动更新
下载插件：
cnpm i --save-dev webpack-dev-server
进入webpack.config.js 中配置：
module.exports = {
...,
devServer: {
contentBase: './dist', //根目录
port: 8888 //端口号
}
}
进入package.json 添加脚本：
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build_w": "webpack",
"build": "webpack --config webpack.config.js",
"watch": "webpack --watch",
+ "server": "webpack-dev-server --open"
},
npm run server 启动本地服务器