webpack模块总结
webpack定义
本质上,webpack是一个现代 JavaScript 应用程序的 静态模块打包器(module bundler) 。
当 webpack 处理应用程序时,它会递归地构建一个 依 赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle 。
安装
md webpack
//新建webpack文件夹
npm init -y
//初始化项目 -y全为true
npm i webpack webpack-cli -D
//安装
核心概念
webpack.config.js文件
entry 入口
entry: {
vue:'./src/main.js',
base:'./src/index.js'
},
output 出口
output: {
// 文件名
filename: "main-[contenthash:7].js",
// 文件夹__dirname 当前目录
path: __dirname + "/dist"
},
plugins 插件
//处理html
# npm install html-webpack-plugin --save-dev
const HtmlWebpackPlugin = require("html-webpack-plugin");
new HtmlWebpackPlugin({
// 指定模板文件
filename:'index.html',
template: './public/index.html',
chunks:['vue'],//指定vue入口打包进来
}),
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'base.html',
template: './public/base.html',
chunks:['base'],//指定base入口打包进来
}),
// 处理css
css-loader 分析css关系-合并一个css(import)
style-loader 把css挂载到head里面
mini-css-extract-plugin 把css抽取到单独文件
css-minimizer-webpack-plugin 用于压缩css文件,它将在webpack构建期间搜索css资源,并将优化/最小化css
less less-loader 处理less文件
# npm install css-loader style-loader mini-css-extract-plugin css-minimizer-webpack-plugin -D
// 导入css压缩插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
new MiniCssExtractPlugin({
filename: "style-[contenthash:7].css"
}),
optimization: {
minimizer: [
new CssMinimizerPlugin(),
]
},
// 导入vue插件loader
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// 实例化vueloader
new VueLoaderPlugin(),
# npm install --save-dev copy-webpack-plugin
// 导入copy(拷贝文件到另外一个文件夹)
const CopyWebpackPlugin = require('copy-webpack-plugin');
new CopyWebpackPlugin( // 设置静态目录
{
patterns: [
// { from: __dirname+'/public', to: __dirname+'/dist' },
//from 从, to 到 __dirname 当前目录
{ from: __dirname + '/src/static', to: __dirname + '/dist/static' },
],
}
),
# npm install clean-webpack-plugin webpack-dev-server -D
// 导入清空插件(清空压缩过的文件,重新压缩)
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
new CleanWebpackPlugin(),
loader 加载器
module
处理图片与文件
file-loader可以解析项目中的url引入(不仅限于css)使之指向正确的文件
url-loader 会将小图片生成base64编码格式(url-loader封装了file-loader)
image-webpack-loader 插件可将大的图片进行压缩从而缩小打包体积
html-loader html 代码里处理 img 标签的 loader。
module: {
rules: [
{ //vue 解析
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: { //开发环境使用style-loader打包
css: ['style-loader', 'css-loader'],
less: ['style-loader', 'css-loader', 'less-loader']
}
}
},
// loader有顺序,从右到左
{ test: /\.css$/, use: [/*'style-loader'*/MiniCssExtractPlugin.loader, "css-loader"] },
{ test: /\.less$/, use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"] },
{
test: /\.(jpg|jpeg|png|gif|webp|ico)$/, use:
[{ loader: 'url-loader', options: { limit: 10000, name: 'images/[name].[ext]' } }]
},
]
},
mode 配置模式
package.json文件
"scripts": {
"build": "cross-env NODE_ENV=production webpack",
"serve": "cross-env NODE_ENV=development webpack serve",
},
webpack.config.js文件
mode: process.env.NODE_ENV,//production(产品模式) |development(开发模式)
devServer 本地服务器
devServer: {
open: true,//打开浏览器
host: 'localhost',//本地域名
port: 8080,//端口号
hot: true,//热更新
}
optimization
// 导入css压缩插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// 导入js压缩插件
const TerserWebpackPlugin = require("terser-webpack-plugin");
optimization: {
minimizer: [
new CssMinimizerPlugin(),
new TerserWebpackPlugin()
]
},
resolve
设置@为src目录的别名
// 导入path
const path = require('path');
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
devtool
devtool: "source-map",//映射打包前错误行数
优化
- css优化压缩
const CssMinimizerPlugin = require(“css-minimizer-webpack-plugin”); - js优化压缩
const TerserWebpackPlugin = require(“terser-webpack-plugin”);
optimization: {
minimizer: [
new CssMinimizerPlugin(),
new TerserWebpackPlugin()
]
}, - devtool与sourceMap
- 异步加载
import(xxx)
.then() - 预加载
import(/* webpackPrefetch:true */“jquery”) - hash命令
hash
chunkhash
如果入口发生变化就会变化
contenthash
如果内容发生变化名称发生变化 - tree shaking(摇树)
- 按需导入js
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。 - splitChunks(代码分包)
optimization: {
splitChunks: {
chunks: “all”,
// 所有的 chunks 代码公共的部分分离出来成为一个单独的文件},
}, - 图片优化
image-webpack - 压缩图片
file-loader
base64格式