webpack
文章目录
-
- 如何让浏览器支持模块:
-
- 自定义模块
- 自动引入资源
-
- 如何使用 HtmlWebpackPlugin
- 如何使用 webpack-dev-server
- 资源模块
-
- Resouce 资源
- inline 资源
- source 资源
- 通用资源类型
- loader
- babel-loader
- 代码分离
-
- 多入口
- 防止重复
- 动态导入
-
- 懒加载
- 缓存
- 公共路径
- npm脚本配置
- devServer
- 模块热替换与热加载
- Eslint
Webpack
作用域问题:
立即执行函数 : var result = (function(){})()
如何实现代码的拆分 :
// 第一个文件夹
//写入方法
module.exports = {} //暴露..
// 第二个文件夹
require()//引入第一个文件夹的自定义模块
如何让浏览器支持模块:
//方法模块
define([依赖的模块],function() {
//暴露的接口
})
// 要引入的文件 main.js
require([引入上面的方法模块],function(参数是上面方法模块的方法名) {
})
//在HTML文件中,引入第三方文件require.js data-main属性提供了一个入口,写入第二个文件的地址]()
==============================================
//安装(本地 webpack)
npm install webpack webpack-cli
function helloword() {
}
export default helloworld //模块导出
import helloword form "./url" //模块导入
//pwd 绝对路径
//最后在终端上 npx webpack 会出现一个main.js 文件
webpack --stats detailed 查看打包详情
自定义模块
通过配置文件自定义模块
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WFcs254i-1647736768399)(C:\Users\Lenovo\Desktop\typora\img\config.png)]
//通过配置文件自定义模块
//1. 创建 webpack.config.js 文件
//2. 引入 path 模块
const path = require('path')
//3.
module.exports = {
//配置入口
entry: './src/index.js' ,
output: {
//指定输出文件的文件名
filename : 'bundle.js' ,
//指定文件的输出路径
path: path.resolve(__dirname, './dist')
} ,
mode: 'none'
}
//4. html文件里 引入bundle.js文件
//5. 终端:
// npx webpack dist文件都是通过 config文件配置而成的
自动引入资源
如何使用 HtmlWebpackPlugin
实现自动生成 HTML 入口文件和引入功能
//1. 安装
npm install html-webpack-plugin
//2. 自定义一个模块
//在 config 文件里添加如下代码
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
//第一个插件
new HtmlWebpackPlugin({
//模板
Template: './index.html',
//输出的文件的文件名
filename: 'app.html',
//标签的位置
inject: 'body'
})
]
//3. npx webpack
//4. dist 文件里会出现一个app.html
//清理 dist
//output 中添加
clean: true
如何使用 webpack-dev-server
//创建文件夹
//2. config 文件
mode: 'development'
//3. 使用 source-map
//4. 终端 npx webpack --watch 实现自动编译
//5. 安装 webpack-dev-server 插件 实现自动更新无需是手动刷新
devServer: {
static: './dist'
}
6. npx webpack-dev-server 点Loopback后的网址
资源模块
Resouce 资源
发送一个单独的文件,并导出 URL
//在config文件中
module: {
//规则
rules: [
{
// 加载的文件类型
test: /\.png$/, // $ 表示以png作为扩展名的文件
//资源类型
type: 'asset/resource',
//自定义图片的名称与存放路径
generator: {
// 文件夹 根据文件内容生成哈希字符串 扩展名
filename: 'images/[contenthash][ext]'
}
}
]
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PZDzR4ai-1647736768401)(C:\Users\Lenovo\Desktop\typora\img\resource.png)]
inline 资源
source 资源
用于导出资源的源代码
通用资源类型
在导出一个 data URL 和发送一个单独的文件之间自动选择
默认情况下,当文件大小小于8k时,只会生成一个链接
loader
loader
style-loader 加载css
less
less-loader 引入css预处理工具
mini-css-extract-plugin -D 抽离 压缩 C
SS
csv-loader,xml-loader 加载数据
data.xml 会转化为一个对象
data.csv 会转换为一个数组
babel-loader
npm install babel-loader @babel/core @babel/preset-env -D
@babel/runtime
@babel/plugin-transform-runtime
代码分离
多入口
防止重复
动态导入
懒加载
缓存
配置输出文件的文件名
改变filename值
缓存第三方库
将js 文件放到一个文件夹中
公共路径
开发环境
npx webpack --env production
npx webpack --env production --env goal=local env.goal
terser-webpack-plugin 压缩插件
npm脚本配置
"scripts": {
"start": "webpack serve -c ./config/webpack.config.dev.js",
"build": "webpack -c ./config/webpack.config.prod.js"
}
合并配置文件
npm install webpack-merge -D
公共路径 环境变量 拆分环境变量 npm脚本 提取公共配置 合并配置文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DXrGXbs6-1647736768401)(C:\Users\Lenovo\Desktop\typora\img\source-map.png)]
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D
devServer
没学好
模块热替换与热加载
module.hot在config文件的devserver 中 设置的值为 true
if(module.hot) {
//当 ./input.js 发生变化时,accept() 函数执行
module.hot.accept('./input.js', () => {
})
Eslint
安装插件,帮助查找问题
npx eslint ./src
//手工关闭覆盖层
client: {
overlay: false,
}
//检查错误的配置
{
test: /\.js$/,
use: ['babel-loader', 'exlint-loader'],
}
2.1.5