共计 4996 个字符，预计需要花费 13 分钟才能阅读完成。
简介
实质上，webpack 是一个古代 JavaScript 应用程序的动态模块打包工具。当 webpack 解决应用程序时，它会在外部构建一个依赖图，此依赖图会映射我的项目所需的每个模块，并生成一个或多个 bundle
官网：https://webpack.docschina.org/
webpack4 的新个性
1. mode 属性：development 或 production（不设置 mode 时，默认为 production）如：webpack --mode development/production
针对 development（开发模式）提供的个性：浏览器调试工具
正文，开发阶段的具体谬误日志和提醒
疾速和优化的增量构建机制
针对 production（生产模式）提供的个性：开启所有的优化代码
更小的 bundle 大小
去除掉只在开发阶段运行的代码
Scope hoisting（把多个 bundle 放进一个大的闭包里，放慢整个代码的运行速度）和 Tree-shaking（没有被应用到的模块给去除掉）2. 插件和优化
删除了 CommonsChunkPlugin 插件
它应用内置 API optimization.splitChunks 和 optimization.runtimeChunk，意味着 webpack 会默认为你生成共享的代码块
其余插件的变动：
3. 开箱即用 WebAssembly
这会带来运行时性能的大幅度晋升
能够间接对本地的 wasm 模块进行 import 或者 export 操作，也能够通过编写 loaders 来间接 import C++，C 或 Rust
4. 反对多种模块类型（5 种）
5. 0CJS
含意是 0 配置，不再强制应用 webpack.config.js 作为打包的入口配置文件
它默认的入口为 './src/' 和默认进口 './dist'，对小我的项目来说是福音
但它依然有着高度可配置性，能够很好满足你的需要
6. 新的插件零碎
提供了针对插件和钩子的新 API
变动如下：
注：当应用 webpack4 时，确保应用 Node.js 的版本要为 8.9.4 以上
装置 webpack
在 cmd 输出命令：npm install webpack-cli -g（倡议不要全局装置）若想要应用 webpack4+ 版本，你还须要装置 webpack-cli：npm install --save-dev webpack-cli
webpack 的根本应用
打包命令：webpack --mode development/production 输出文件.js -o 输入文件.js
webpack— 入口进口配置文件
配置文件 webpack.config.js：const path=require('path');
// 一个文件打包时的配置
module.exports={
entry:'输出文件名字',
output:{path:path.resolve(__dirname,'dist'), // 输入文件的目录门路
filename:'输入文件名字'
},
mode:'production/development'
}
// 多个文件打包时的配置
module.exports={
entry:{ // 多个文件时
xxx:'输出文件 1',
xxxx:'输出文件 2',
...
},
output:{path:path.resolve(__dirname,'dist'), // 输入文件的目录门路
filename:'[name].xxx.js' // 动静的输入文件名
},
mode:'production/development', // 模式
module:{}, // 模块：如解析 CSS，图片如何转换，压缩
plugins:[], // 插件：用于生产模块和各项性能}
关上 cmd 并进入到寄存 webpack.config.js 的目录下，输出命令 webpack 即可进行打包
webpack— 加载器 url-loader
作用：当某个文件大小小于某个指定 size 时，会主动转换成 DataURL 模式（默认为 base64）装置：npm install url-loader --save-dev
webpack.config.js 文件配置：module.exports = {
module: {
rules: [
{test: /.(png|jpg|gif)$/i, // 匹配的图片模式
use: [
{
loader: 'url-loader',
options: {
limit: 8192, // 指定 size，当小于此 size，就会主动转换成 DataURL 模式（若指定 size，可取值 false）encoding：指定的编码模式
},
},
],
},
],
},
};
webpack— 加载器 babel-loader
作用：把 es6，es7... 代码转换成能在浏览器运行的 es5 代码
装置：npm install -D babel-loader @babel/core @babel/preset-env webpack
webpack.config.js 文件配置：module.exports = {
module: {
rules: [
{
test: /.m?js$/, // 匹配的文件扩展名
exclude: /(node_modules|bower_components)/, // 排除掉的文件夹
use: {
loader: 'babel-loader',
options: {presets: ['@babel/preset-env'], // 转换的规定
plugin：[] // 配置相干的插件}
}
}
]
}
}
webpack— 加载器 sass-loader
作用：加载 Sass/SCSS 文件并将他们编译为 CSS
装置：npm install sass-loader sass webpack --save-dev（sass-loader 须要事后装置 Dart Sass 或 Node Sass。这能够管制所有依赖的版本，并自在的抉择应用的 Sass 实现。）webpack.config.js 文件配置：module.exports = {
module: {
rules: [
{test: /.s[ac]ss$/i, // 匹配 sass/scss 文件
use: [ // 顺便装置以下用到的模块
"style-loader", // 将 JS 字符串生成为 style 节点（用来解决 css 文件中的 url() 等，把 url 挂载到 js 中）"css-loader", // 将 CSS 转化成 CommonJS 模块（将 css 插入到页面的 style 标签）"sass-loader", // 将 Sass 编译成 CSS
],
},
],
},
};
webpack— 对于插件 MiniCssExtractPlugin
作用：将 CSS 提取到独自的文件中，为每个蕴含 CSS 的 JS 文件创建一个 CSS 文件，并且反对 CSS 和 SourceMaps 的按需加载
装置：npm install --save-dev mini-css-extract-plugin
webpack.config.js 文件配置：const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {plugins: [new MiniCssExtractPlugin({filename:xxx（决定了输入的每个 CSS 文件的名称），chunkFilename:xxx（决定了非入口的 chunk 文件名称），...})],
module: {
rules: [
{
test: /.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
此插件与 sass-loader 联用时，webpack.config.js 文件的配置：const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
{test: /.s[ac]ss$/i,
use: [
process.env.NODE_ENV !== "production" ? "style-loader": MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
],
},
],
},
plugins: [new MiniCssExtractPlugin({filename: "[name].css", chunkFilename: "[id].css",...})],
};
webpack— 对于插件 DefinePlugin
作用：容许在编译时创立配置的全局常量，防止代码的冗余，减少灵活性
这在须要辨别开发模式与生产模式进行不同的操作时，十分有用
应用：var webpack=require('webpack');
new webpack.DefinePlugin({对应的常量：对应的值});
webpack— 对于插件 HtmlWebpackPlugin
作用：简化了 HTML 文件的创立，以便为你的 webpack 包提供服务（HTML 文件打包）这对于那些文件名中蕴含哈希值，并且哈希值会随着每次编译而扭转的 webpack 包特地有用
你能够让该插件为你生成一个 HTML 文件，应用 lodash 模板提供模板，或者应用你本人的 loader
装置：npm install --save-dev html-webpack-plugin
webpack.config.js 文件配置：const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: '入口文件名',
output: {path: path.resolve(__dirname, './dist'),
filename: '进口文件名',
},
plugins: [new HtmlWebpackPlugin({
title:'xxxx', //
filename:'xxx.html', // 生成（输入）的 html 文件名
template：'xx.html' // 输出的 html 文件（可间接在其文件下编写 <% htmlWebpackPlugin.options.title%> 来援用到 title）})],
};
这将会把 xx.html 生成一个蕴含以下内容的 dist/xxx.html 文件：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>xxxx</title>
</head>
<body>
<script src="进口文件名"></script>
</body>
</html>
在多个 HTML 页面打包的状况下：
webpack— 热替换
须要用到插件：webpack-dev-server
作用：会实时更新服务器显示的内容
装置：npm install webpack-dev-server -D
webpack.config.js 文件配置：module.exports = {
//...
devServer: {contentBase: path.join(__dirname, 'dist'), // 指标文件所在目录
compress: true, // 是否启用 gzip 压缩
port: 9000, // 指标端口
hot：true // 是否热替换（实时更新）（webpack4 能够不必阐明此属性配置）},
};
在 package.json 文件配置中："scripts":{"start"："webpack-dev-server"}
webpack—CSS3 前缀
webpack— 图片在 HTML 和 CSS 中的打包
CSS 中图片打包：
HTML 中图片打包：
webpack— 革除未应用的 CSS
webpack— 打包正文
new webpack.BannerPlugin('xxxx（正文）')
webpack— 入口文件模块化的配置
webpack— 开发环境与生产环境
devDependencies（开发环境）寄存测试代码依赖的包或构建工具的包
dependencies（生产环境）寄存我的项目或组件代码中依赖到的包
装置全副我的项目依赖包：npm install
装置生产环境依赖包：npm install --production
webpack— 资源拷贝
对一些开发技术文档可间接进行拷贝
正文完