概念：
webpack是模块加载器兼打包工具
可以把各种资源（如：JS（含JSX）、样式（含less/sass）、图片等）都作为模块来使用和处理。
作用和优势：
- webpack 是以 commonJS 的形式来书写脚本，对 AMD/CMD 的支持也很全面
- 能被模块化的不仅仅是 JS 。
- 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
- 扩展性强，插件机制完善，
- Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
使用步骤
全局安装：
npm install webpack -g
查看版本
- npm info webpack
- webpack -v 如果没有出现
npm install --global webpack-cli，
注意:webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装webpack-cli；
之后再webpack -v
初始化项目：
npm init -y
局部安装：
npm install webpack --save-dev
01.png
配置：
每个项目根目录下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。
打包：
其他主要的参数有：
- webpack --watch //监听变动并自动打包
- webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包
webpack.config.js格式
var webpack = require('webpack');
module.exports = {
entry: { }, //页面入口文件配置
output: { }, //文件输出配置
module: { //加载器配置
rules: []
},
resolve: { } //其它解决方案配置
plugins:{ } 插件
}
webpack.config.js的每项详细解释
entry
entry是页面入口文件配置，可以赋值为字符串，数组，对象。（默认打包依赖）
- 字符串：这个字符串作为主模块的启动点，输出的默认路径是dist，文件名默认是main.js
entry: "./js/demo01.js", //入口文件，需要打包的入口文件 - 数组:数组中所有模块会进行合并，输出的默认路径是dist，文件名默认是main.js
entry: ["./src/js/a.js","./src/js/b.js"], - 对象：会创建多个入口包。key就是 块（chunk）名字。value就是一个字符串或者一个数组。
输入的默认路径是dist，输出的文件名就是key，即：分别是 index和homeentry:{ index:"./src/js/a.js", home:["./src/js/a.js","./src/js/b.js"], }
注：终端无法运行webpack时候用cmd试试
output
output ：是输出项配置，表示入口文件最终要生成什么名字的文件、存放到哪里，其语法为：
output: {
path: 输出文件所在的路径（绝对路径）,
filename: 输出文件的名字
}
示例：
entry:{
index:"./src/js/a.js",
home:["./src/js/a.js","./src/js/b.js"],
}
output:{
path: __dirname+"/dist/",
filename: "js/[name].bundle.js"
}
最终会生成一个 index.bundle.js 和 home.bundle.js，并存放到 ./dist/js/下
module.rules ：
配置模块加载的规则：告知 webpack 每一种类型的文件都需要使用什么加载器来处理：
示例：
module: {
rules: [//加载器配置
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader?sourceMap']
},
{
test: /\.(png|jpg)$/,
use: {
loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
}
}
]
}
webpack的常见加载器（预处理）：
css的处理
style-loader：转换成style标签<style>，动态把样式写入css
css-loader：识别css样式， 处理css中路径引用等问题
1、安装style-loader和css-loader
npm i save-dev style-loader css-loader
2、css文件(./src/css/index.css)
html,body{
height: 100%;
}
body{
background-color: red;
}
3、js文件里以模块的思路引入css文件(./src/js/index.js)
require("../css/index.css");
或者
import "../css/index.css";
4、html文件中引入index.js打包的文件（这一步最后会使用html-webpack-plugin插件简化）
sass文件的处理
1、安装sass-loader、style-loader和css-loader
npm i save-dev sass-loader style-loader css-loader
如果提示还需要安装sass模块，或者node-sass模块，那就装呗
2、scss文件(./src/css/index.scss)
$baseSize:12px;
body{
font-size:$baseSize+20
}
3、js文件里以模块的思路引入scss文件(./src/js/index.js)
require("../css/index.scss");
或者：
import "../scss/index.scss";
4、html文件中引入index.js打包的文件（这一步最后会使用html-webpack-plugin插件简化）
图片文件的处理
url-loader：处理url
file-loader：转换
1、安装 url-loader 和 file-loader
npm i save-dev url-loader file-loader css-loader
2、找到两张图片（一张小于8KB，一张大于8KB）,放在 ./src/img/下
如：cdn.png ,logo.png
3、js文件里以模块的思路引入图片文件
// let img1 = require("../img/cdn.png");
// let img2 = require("../img/logo.png");
或者
import img1 from "../img/cdn.png";
import img2 from "../img/logo.png";
window.onload = function(){
console.log(img1);
let oImg1 = document.createElement("img");
oImg1.src=img1; //require 的方式用 img1.default
document.body.appendChild(oImg1);
let oImg2 = document.createElement("img");
oImg2.src=img2; //require 的方式用 img2.default
document.body.appendChild(oImg2);
}
4、html文件中引入index.js打包的文件（这一步最后会使用html-webpack-plugin插件简化）
解释webpack的配置：
{
test: /\.(png|jpg)$/,
loader:'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
// 配置信息的参数:
// “limit=8192”表示将所有小于8kb的图片都转为base64形式，超过8kb的才使用 url-loader
// name=images/[hash:8].[name].[ext] 表示打包后的文件存储在images文件夹下，文件名由八位的哈希值、原始文件名和原始扩展名组成
}
ES6+的代码转成ES5
babel-loader：ES6中的babel
babel-present系列：
1、安装：
babel-core：把ES6+的代码转换成Es5的代码，
babel-loader：是给webpack用的。
babel-preset-env或者babel-preset-latest：预设，使用最新版本的babel。
因为ES6语法每年都在更新，因此，我们需要一定的规则去转换。
npm i save-dev babel-core babel-loader babel-preset-env
2、module.rules的配置
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/, //排除掉node_modules下的js文件，即不解析这个文件夹下的js文件
query: {
presets: ['latest'] //按照最新的ES6语法规则去转换，可以把这个写在预设(.babelrc)文件里
}
}
]
}
如果使用.babelrc文件
1、需要在项目目录下，创建‘ .babelrc’ 文件。
2、写上如下代码：
{ "presets": ["env"] } 或者 { "presets": ["latest"] }
webpack-dev-server：
搭建服务器
1、安装（？？此处需要考虑到版本的兼容性）：
1）、全局安装
npm install webpack-dev-server -g
2）、本地安装
npm install webpack-dev-server --save-dev
2、webpack.config.js增加配置项：
devServer:{
host:'localhost',
port:'706',
contentBase:__dirname+'/dist' //把当前目录下的dist目录作为服务器的目录
}
3、启动服务：
webpack-dev-server
4、简化启动服务
由于每次都需要先执行webpack进行打包，然后启动服务，非常麻烦，我们可以在package.json文件中加上npm scripts脚本，如下：
"scripts": {
"dev":"webpack && webpack-dev-server"
或者：
"dev": "webpack-dev-server --inline --progress --config webpack.config.js"
}
注意：有时候可能会出现webpack版本和webpack-dev-server的版本不兼容时，就需要分别执行webpack和webpack-dev-server
如下模块依赖的版本是和谐的：
"devDependencies": {
"sass": "^1.27.0",
"sass-loader": "^10.0.3",
"css-loader": "^3.2.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^1.0.0",
"url-loader": "^2.2.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
}
html文件的处理：
请看：
https://blog.csdn.net/jiang7701037/article/details/98231776
resolve
Resolve 配置 Webpack 如何寻找模块所依赖的文件,如：扩展名，别名。
resolve: {
extensions: ['.js', '.json', '.scss'],//引入模块时，可以省略的后缀名
alias: {//模块别名定义，方便后续直接引用别名，
'@':__dirname+'/src'
}
}
上面的配置，在引入模块时，就可以如下写法：
./src/js/index.js
import "../scss/index"; //省略了 .scss 扩展名
import img2 from "@/img/logo.png";
gulp和webpack的异同(面试题)
相同： 比如合并，压缩。但各有各的优势
不同：（定义和用法上来说 都不是一种东西，无可比性 ，更不冲突！）
gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译 替代手工实现自动化工作
1.构建工具 2.自动化 3.提高效率用
webpack是模块加载兼打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案 1.打包工具 2.模块化识别 3.编译模块代码方案用
模块化：gulp不能，webpack不仅仅能针对js进行模块化，针对所有的静态资源（CSS，图片等都能进行模块化） 打包：经过webpack把所有的模块打包成一个大的文件，可以减少HTTP请求次数。并且针对图片文件，如果小于某个字节大小的文件，使用base64编码，也能够减少HTTP请求次数。
网友评论