一、初试牛刀
1．简介
1) 为什么要是用webpack
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
◆ 模块化，让我们可以把复杂的程序细化为小的文件;
◆ 类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；
◆ Scss，less等CSS预处理器
◆ ES6 babel
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。
2) 什么是webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。将多个文件打包成一个文件或者对项目进行优化（打包，转化和优化）。
2．起步
1) 安装
前提条件
在开始之前，请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。
要安装最新版本或特定版本，请运行以下命令之一：
npm install --save-dev webpack
npm install --save-dev webpack@
如果你使用 webpack 4+ 版本，你还需要安装 CLI。
npm install --save-dev webpack-cli
对于大多数项目，我们建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。通常，webpack 通过运行一个或多个 [npm scripts](https://docs.npmjs.com/misc/scripts)，会在本地 node_modules 目录中查找安装的 webpack：
"scripts": {
"start": "webpack --config webpack.config.js"
}
当你在本地安装 webpack 后，你能够从 node_modules/.bin/webpack 访问它的 bin 版本。
2) 简单使用
const path = require('path')
module.exports = {
mode: 'production',
entry:'./src/js/index.js',
output:{
path:path.join(__dirname,'dist'),
filename:"bundle.js"
},
}
3．初识webpack
1) webpack打包一个文件
webpack ./src/index.js --output dist/bundle.js
2) webpack配置文件
module.exports= {
//入口
entry:{},
//出口
output:{},
//loader加载器
module:{
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
//插件
plugins:{},
//开发服务器
devServer:{}
}
3) webpack的配置文件名
默认的是webpack.config.js。但是不一定必须是这个
webpack --config config_file_name
4) 配置npm 命令
在package.json文件中具有一个scripts的设置项中可以设置npm的命令
例如：npm start
“scripts”：{
“build”：“webpack --config config_file_name”
}
5) 模式
webpack --mode develepment
webpack --mode production
4．配置文件基本组成结构
1) 入口
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src。
2) 出口
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：
3) 模式
通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化
4) loader
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
在更高层面，在 webpack 的配置中 loader 有两个目标：
test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性，表示进行转换时，应该使用哪个 loader。
5) 插件plugins
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
二、 webpack深入
1．入口
1) 多入口单出口
entry:[‘i.js’,’2.js’]
2) 多入口多出口
entry:{
name1: ‘1.js’,
name2: ’2.js’
},
output:{
filename: ‘[name]bundle.js’
}
2．出口
注意：
1、出口的默认路径
2、出口是绝对路径
3、出口的默认文件名与main的关系
3．html-webpack-plugin插件
1) 安装
npm i html-webpack-plugin -D
2) 引入
const hwpl = require(‘html-webpack-plugin’);
3) 使用
plugins:[
new HtmlWebpackPlugin({
title:’’,//页面标题
template:’./src/index.html’ //模板文件
});
]
title的使用
<%=htmlWebpackPlugin.options.title%>
注意：依赖 webpack 与webpack-cli
### 4) 消除缓存
plugins:[
new HtmlWebpackPlugin({
hash：true，
title:’’,//页面标题
template:’./src/index.html’ //模板文件
});
]
5) 压缩输出
plugins:[
new htmlWebpackPlugin({
hash:true,
minify:{
collapseWhitespace:true, //去除空格
removeComments //去除注释
minifyCSS
minifyJS
},
template:'./src/index.html',
})
]
minify 的配置：https://blog.csdn.net/lqlqlq007/article/details/84103859
6) 生成多个页面
plugins:[
new htmlWebpackPlugin({
hash:true,
minfy:{
collapaseWhitespace:true,
},
template:'./src/index.html',
filename: file1
}),
new htmlWebpackPlugin({
hash:true,
minfy:{
collapaseWhitespace:true,
},
template:'./src/nav.html',
filename: file2
})
]
7) 多页面分离引入
入口文件
entry:{
index:'./src/index.js',
index2:'./src/index2.js'
},
插件配置
new htmlWebpackPlugin({
hash:true,
chunks:[“name1”,”name2”]
minfy:{
collapaseWhitespace:true,
},
template:'./src/index.html',
filename: file1
}),
new htmlWebpackPlugin({
hash:true,
chunks:[name2]
minfy:{
collapaseWhitespace:true,
},
template:'./src/index.html',
filename: file2
})
4．clean-webpack-plugin
默认情况下，此插件将在每次成功重建后删除webpack的output.path目录中的所有文件以及所有未使用的webpack资源。
1) 下载
npm i clean-webpack-plugin -D
2) 引入
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
3) 使用
在html-webpack-plugin插件使用之前去除已经产生的垃圾文件
plugins:[
new CleanWebpackPlugin(),
new htmlWebpackPlugin({})
]
5．webpack-devserver
1) 下载
npm i webpack-devserver webpack-dev-server -D
2) 配置
devServer：{
host：localhost，
port：8090，
contentBase:path.jpin(__dirname,’dist’)
}
3) 配置启动
npm run dev
scripts：{
“dev”:”webpack-dev-server --mode develepment”
}
4) 自动打开
devServer：{
host：localhost，
port：8090，
contentBase:path.join(__dirname,'dist/html/')，
open：true
}
5) 热更新
const webpack = require(“webpack”);
devServer：{
host：localhost，
port：8090，
contentBase:path.jpin(__dirname,’dist’)，
open：true，
hot：true
}，
plugins：[
new webpack.HotModuleReplacementPlugin()
]
三、 loader
加载器，转化器。
1．打包css
1) 安装
css-loader
style-loader
npm i css-loader style-loader -D
2) 配置
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
}
关于使用loader的三种写法：
use:['style-loader','css-loader']
loader:['style-loader','css-loader']
use:[
{loader:style-loader },
{loader:css-loader }
]
2．压缩代码（之前）uglifyjs
1) 下载
npm i uglifyjs-webpack-plugin -D
2) 引入
const uglify = require(‘uglifyjs-webpack-plugin’)
3) 使用
new uglify()
3．图片
1) 下载
npm i file-loader url-loader -D
2) 使用
{
test:/\.(png|jpg|gif|jpeg)/,
use:['url-loader']
}
3) base64转码
use:[
{
loader:’url-loader’,
options:{
limit:50000
outputPath: 图片放置目录
publicPath: 解决图片路径
}
}
]
4．分离css代码
1) 安装
npm i extract-text-webpack-plugin -D
2) 引入
const extract = require('extract-text-webpack-plugin');
3) 使用
在plugins中添加：
new extract('css/index.css'),
在use中修改
use:extract.extract({
use:'css-loader',
fallback:'style-loader'
})
4) 注意：
npm run build
npm i extract-text-webpack-plugin@next -D 为4.X
npm i extract-text-webpack-plugin -D 为3.x
5．分离css 2
1) 下载
mini-css-extract-plugin
2) 引入：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
3) 使用
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[id].css',
}),
use:[
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: '/',
},
},'css-loader']
6．打包less
npm i less less-loader -D
7．打包sass
npm i node-sass sass-loader -D
8．postcss添加css前缀
1) 下载
npm i postcss-loader autoprefixer -D
2) 配置单独的配置文件 postcss.config.js
module.exports={
plugins:[
require(‘autoprefixer’)
]
}
3) 配置loader
use:[‘css-loader'，‘postcss-loader’]
9．消除冗余
1) 下载
npm i purifycss-webpack purify-css -D
2) 引入
const purify = require(‘purifycss-webpack’)
3) 使用
需要使用到一个扫描路径的包 glob
npm i glob -D 需要引入
new purify({
paths:glob.sync(path.join(__dirname,’./src/*.html’))
})
10．调试
4.x
--mode production
3.x
devtool:’source-map’
11．babel
1) 安装
npm i babel-core babel-loader babel-preset-env -D
2) 使用
{
test:/\.(js|jsx)/,
use:[{
loader:‘babel-loader’,
options:{
preset:’env’
}
}],
exclude:’./node-modules’
}
12．react (jsx)
npm i babel-preset-react -D
npm i react react-dom -D
四、 杂项
1．模块化的使用
遵循node模块的引入与导出
2．在webpack中使用json
之前需要json-loader。但是4.x默认可以引入json。
const name = require(‘xxx.json’)
3．静态资源拷贝
1) 下载
npm i copy-webpack-plugin -D
2) 引入
3) 使用
new CopyWebpackPlugin([{
from: path.join(__dirname,’src/image’),
to:path.join(__dirname,’dist/image’)
}])
4．使用第三方库
1) 下载
2) 引入
3) 使用
4) 第二种方式 (推介)
只有在内部使用到模块的时候才会打包
new webpack.providePlugin{{
$:’jquery’,
lodash: ‘lodash’
}}
5) 提取第三方库
plugina:[
],
optimization:{
splitchunks:{
cacheGroups:{
vendor:{
chunks:'initial',
name:'jquery',
enforce:true
}
}
}
}