Webpack概念
webpack是一个静态模块打包器。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle
使用前提 下载webpack webpack-cli包 (webpack v4以上要装webpack-cli)
Webpack结构
?了解webpack先从理解webpack四个核心概念,认识webpack结构开始
- 入口 (entry)
- 输出 (output)
- 加载器 (loader)
- 插件 (plugins)
以及模式 (development 或 production)
以下是webpack.config.js配置文件
const path = require('path'); //路径模块
const Html = require('html-webpack-plugin'); //使用前先npm安装 一个有功能的插件
module.exports = {
//入口 指定src文件下的index.js为入口文件,以实际情况为准
entry: path.resolve(__dirname,"src/index.js"),
//输出 指定dist文件下输出bundle.js文件,以实际情况为准
output:{
path: path.resolve(__dirname,"dist"),
filename: "bundle.js"
},
//loader 让webpack能够去处理非js文件(webpack只能理解js文件)
/*loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，
然后就可以利用 webpack 的打包能力，对它们进行处理*/
module:{ //加载器
rules:[ //规则
{ test: /\.txt$/, use: 'raw-loader' }
]
},
//插件 webpack最强大的部分
/*插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。
插件接口功能极其强大，可以用来处理各种各样的任务。*/
plugins: [
new Html({template: './src/index.html'}) //实现插件功能
],
//模式
/*包括 :
开发模式(development)
生产模式(production) */
mode: "development"
}
结构配置
入口起点
默认为src目录下的index.js文件
如果不存在index.js文件,打包时采用
webpack --entry "./入口路径/文件名" --output "./输出路径/文件名"
或者在webpack.config.js 中指明入口
module.exports = {
entry: "./src/index.js"
}
输出
默认为dist目录下的bundle.js文件
如果不存在文件夹或文件会自动创建
也可以自定义输出
webpack --entry "./入口路径/文件名" --output "./输出路径/文件名"
或者在webpack.config.js 中指明输出
const path = require('path'); //路径模块
module.exports = {
entry: "./src/index.js",
output:{
//这里一定要是绝对路径
path: path.resolve(__dirname,"dist"),
filename: "bundle.js"
}
}
loader
loader用于对模块的源代码进行转换。
loader 可以使你在import或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。
为什么要使用loader?
因为在开发中,不仅仅有基本的js代码要处理,要需要加载css 图片 字体图标等;
?需要将ES6代码代码降级ES5代码,TypeScript转ES5代码;
?将scss/less转css,将.jsx/.vue文件转成js文件.
webpack本身并不具备这些能力,webpack会将这些文件交给对应的loader处理
loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript;
loader 可以将内联图像转换为 data URL;
loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！
打包css文件
要用到css-loader?webpack处理css文件,css代码转成js代码
??????style-loader?将css插入DOM中
- 先安装上述两个包
npm install css-loader style-loader --save-d
- 在入口文件里引入css文件
//...
@import "./css/index.css"
- 配置webpack.config.js
module.exports = {
//...
module: {
rules = [
{
//匹配css文件
test:/\.css$/i,
//有顺序,先处理css文件,再插入DOM
use:["style-loader","css-loader"]
}
]
}
}
loader支持链式传递,比如css-loader处理后交给style-loader,
在最后一个 loader，返回 webpack 所预期的 JavaScript。
打包less文件
要用到less-loader ????负责加载less文件
???less ??????????负责将less转css
??????css-loader
??????style-loader
- 先安装上述包
npm install css-loader style-loader less less-loader --save-d
- 在入口文件里引入css文件
//...
@import "./css/index.less"
- 配置webpack.config.js
module.exports = {
//...
module: {
rules = [
{
//匹配less文件
test:/\.less$/i,
//有顺序,先处理less文件,然后处理css,最后插入DOM
use:["style-loader","css-loader","less-loader"]
}
]
}
}
资源模块
webpack5之前不支持
?不支持前,使用以下三个loader
- raw-loader?将文件导入为字符串
- url-loader?将文件作为data URL内联到bundle
- file-loader?将文件发送到输出目录
使用loader图片
module.exports.module = {
//...
rules = [
{
test:/\.(png|jpg|gif|jpeg)$/i,
use:[
{
loader:'url-loader',
options:{
limit:8*1024
}
}
]
}
]
}
webpack5之后 依靠资源模块
资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。
资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：
asset/resourceasset/inlineasset/sourceasset
使用资源模块处理图片:
module.exports = {
//...
module: {
rules: [
{
test: /\.(png|jpg|gif|jpeg)$/i,
//如果图片 < 8kb会自动转为base64
type: 'asset'
}
]
},
}
使用资源模块处理字体图标:
module.exports = {
//...
module: {
rules: [
{
test: /\.(eot|svg|ttf|woff|woff2)$/i,
type: 'asset/resource', //所有的字体图标文件都输出到dist文件下
generator: { //生成文件名 - 定义规则
filename: "路径/[name].[hash:6][ext]" //使用hash值文件名避免重名
}
}
]
},
}
使用Babel
将高版本js语法降级成兼容的低版本语法
- 使用前先下包
npm install babel-loader @babel/core @babel/preset-env --save-d
- 配置webpack.config.js
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/, //不去匹配这些文件夹下的文件
use: {
loader: 'babel-loader', //处理js文件
options: { //加载器选项
presets: ['@babel/preset-env'] //降级规则
}
}
}
]
}
插件
HtmlWebpackPlugin
HtmlWebpackPlugin简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。
这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。
该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。 只需添加该插件到你的 webpack 配置中，如下所示：
要使用,先下包 npm install html-webpack-plugin --save-d
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
plugins: [new HtmlWebpackPlugin({
template:'./src/index.html'
})],
};
使用前 文件结构
使用后 文件结构
且dist/index.html中引入了bundle.js文件