webpack是将一个或多个文件作为入口,将整个项目打包成一个或多个文件输出
webpack开发模式:只能编译js中的es6的语法
webpack生成模式:可以打包es6和压缩js
webpack的使用
1.资源目录
webpack_code #项目根目录
src #项目源码文件
其他文件
main.js #项目主文件
2.创建文件
3.下载依赖
1.初始化
npm init -y
2.下载
npm i webpack webpack-cli -D
4.启动webpack
1.开发模式
npx webpack ./src/main.js --model=development
2.生产模式
npx webpack ./src/main.js --model=production
核心概念--基本配置webpack.config.js
1.entry(入口)
打包文件的入口
2.output(出口)
打包文件的出口
3.loader(加载器)
文件加载器
4.plugins(插件)
下载的插件
5.mode(模式)
所处模式
const path = require('path');
module.exports = {
entry:'./src/main.js',
output:{
// 打包路径 绝对路径
path:path.resolve(__dirname, 'dist'),
// 打包文件名
filename:'main.js'
},
// loader 加载器
module:{
rules:[
// loader 的配置
{// 处理css文件
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.less$/i,
use: [
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',
],
},
],
},
// 插件
plugins:[
],
resolve: {
extensions: ['.js', '*', '.css'] //问题就出在这里
},
// mode模式
mode:"development"
}
配置完的运行指令:npx webpack
处理样式资源
Loaders | webpack 中文文档 | webpack 中文文档 | webpack 中文网
清空打包结果,再次打包
output:{
// 打包路径 绝对路径
path:path.resolve(__dirname, 'dist'),
// 打包文件名
filename:'main.js',
clean:true // 清除原包
},
icon图标
js处理的升级
babel,js兼容性
eslint,代码格式
eslint
.eslint.js eslint.json eslintrc 配置文件
或是 package.json中eslintConfig:
继承已有的规则:eslint:recommended plugin:vue/essential react-app
module.exports ={
// 解析选项
parserOptions:{
ecmaVersion:6, // js语法版本
sourceType:"module" // es module
},
// eslint规则
rules:{
"no-var" : "error" // 禁止使用var
},
env:{
node:true, // 启用node中的全局变量
browser:true // 启用浏览器中的全局变量
},
// 继承规则
extends:["eslint:recommended"],
}
.eslintignore 内容 dist
babel
babel.config.js babel.config.json babelrc.json babelrc.js package.json babel:
@babel/preset-env 允许使用最新的js
@babel/preset-react 编译jsx
@babel/preset-typescript 编译ts
处理html资源--webpack插件
搭建开发服务器
dev-server
// 开发服务器的配置 不会输出的
devServer:{
host: "localhost", // 启动服务器的域名
port: 3000,
open: true, // 是否自动打开浏览器
},
// webpack
npx webpack server
生产模式
"scripts": {
"start": "npm run dev",
"dev": "webpack serve --config ./config/webpack.dev.js",
"build": "webpack --config ./config/webpack.prod.js"
},
杜绝闪屏问题---单独打包css
MiniCssExtractPlugin
Css兼容问题
postcss-loader
压缩css
CssMinimizerWebpackPlugin
webpack高级
1.提升开发体验
SourceMap源代码映射包,用于调试
插件SourceMapDevToolPlugin
2.提升打包构建速度
HotModuleReplacementPlugin
oneOf: [
{
resourceQuery: /inline/, // foo.css?inline
use: 'url-loader',
},
{
resourceQuery: /external/, // foo.css?external
use: 'file-loader',
},
cache : 减少js文件打包速度
Terser :多线程打包thread-loader TerserWebpackPlugin
exclude include
3.减少代码体积
tree shaking:@babel/plugin-transform-runtime
@babel/plugin-transform-runtime:禁止了babel对于每一个文件的runtime注入,而是引入@babel/plugin-transform-runtime并使得所有辅助代码从这里引用
图片压缩
ImageMinimizerWebpackPlugin
3.优化代码运行性能
code split代码分割
entry:{
app: "./"
main:"./"
}
output:{
path: path.resolve(__dirname,"dist")
filename:"[name].js"
}
// 多入口多出口分割文件
// 不重复打包公共文件optimization
// 动态导入
im
空闲加载
preload 当前页面加载
prefetch 下一个页面预加载
pwa
npm install workbox-webpack-plugin --save-dev
vue-cli
react-cli