概念
- webpack是一个静态化前端打包器
- 可以把复杂的依赖关系打包一个或多个文件
- 最终生成浏览器可以识别的资源html,css,图片,js
webpack.config.js
- 配置webpack
const path = require('path')
module.exports = {
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
mode:"development"
}
运行
- npx webpack
- package.json
"scripts":{ "serve":"webpack" }
插件
- 处理文件,比如压缩,清理等
- html-webpack-plugin
把public里面的index.html
拷贝的dist目录,并插入打包好的.js
- const {CleanWebpackPlugin} from 'clean-webpack-plugin'
清理dist目录
loader 处理器
- 处理文件(转换文件默认只支持json与js
- css-loader处理css tyle-loader把css加载到style标签
- file-loader处理文件地址 url-loader处理文件地址 把小图片转为base64 省一次网络请求
命名
- [hash:7]哈希值
哈希命令有效控制缓存与更新
hash
contenHash 和内容有关
chunkHash 和入口有关
- [name]当前文件名
- [ext]后缀名
本地服务器 webpack-dev-server
- proxy代理
- hot热更新
- host域名
- port端口号
- open自动打开浏览器
-
package.json scripts:{"serve":"webpack serve"}
按需下载
import("jquery").then(({default:$})=>{
})
webpack魔法注释
/*webpackChunName:"jquery",webpackPrefetch:true */
加载的文件名,预加载(有网络空闲提前加载)
devtool 开发工具
- 当前码出错如何报错 eval
别名
resolve:{
alias:{
"@":path.resolve(__dirname,"src")
}
}
把css抽出单独文件
mini-css-extract-plugin
单vue文件的加载,以及babel的使用
npm install --save vue
npm install --save-dev vue-loader
npm install --save-dev vue-style-loader
npm install --save-dev vue-template-compiler
npm install --save-dev vue-hot-reload-api
npm install --save-dev @babel
npm install --save-dev @babel/preset-env
npm install --save-dev babel-loader
npm install --save-dev babel/core
npm i vue -S
npm i vue-loader vue-style-loader vue-template-compiler vue-hot-reload-api -D
因为我们安装的 babel 是 6.x 版本,而它所对应的 babel-loaderl 版本必须是 7.x,所以在命令行中,我们明确指定了版本号。如果版本不对应,就会抛出 Cannot find module '@babel/core' 错误。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './src/main.js',
output: {
filename: 'js/[name]-[hash].js',//打包出的脚本文件全部放进dist下的js目录
path: path.resolve(__dirname, 'dist'),
publicPath: '/',//使用绝对路径
},
module: {
rules: [{ //vue 解析
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: { //开发环境使用style-loader打包
css: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader'],
scss: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader, 'sass-loader']
}
}
}, { //js 解析
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
}, {
test: /\.css$/,
//开发环境使用style-loader打包
use: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader']
}, {
test: /\.scss$/,
//开发环境使用style-loader打包
use: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'sass-loader']
}, {
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'file-loader',
options: {
name: 'images/[name]-[hash].[ext]',//所有图片放进images目录
}
}]
}]
},
plugins: [
new HtmlWebpackPlugin({
title: 'myWebpack',
filename: 'index.html',
template: './public/index.html'
}),
new MiniCssExtractPlugin({
filename: "[name]-[hash].css",//所有抽离出的样式文件,放进css目录
chunkFilename: "vue-[name]-[hash].css"
}),
new VueLoaderPlugin()
],
};
优化参考
// 导入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 导入css抽出压缩插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 导入css压缩插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// 导入js压缩插件
const TerserWebpackPlugin = require("terser-webpack-plugin");
// 导入path
const path = require('path');
// 导入拷贝插件
const CopyWebpackPlugin = require('copy-webpack-plugin');
// 导入清空插件
const {
CleanWebpackPlugin
} = require('clean-webpack-plugin');
// 导入vue插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
// 入口
entry: {
vue: './src/main.js',
base: './src/index.js'
},
// 出口
output: {
// 文件名
filename: "main[contenthash:7].js",
// 文件夹__dirname 当前目录
path: __dirname + '/dist'
},
plugins: [
// 实例化vue插件
new VueLoaderPlugin(),
// 清空
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
// 指定模板文件
filename: 'index.html',
template: './public/index.html',
chunks: ['vue'], //指定vue入口打包进来
}),
new HtmlWebpackPlugin({
filename: 'base.html',
template: './public/base.html',
chunks:['base'], //指定base入口打包
}),
new MiniCssExtractPlugin({
filename: "style-[contenthash:7].css"
}),
new CopyWebpackPlugin( // 设置静态目录(拷贝文件到另外一个文件夹)
{
patterns: [
// { from: __dirname+'/public', to: __dirname+'/dist' },
//from 从, to 到 __dirname 当前目录
{
from: __dirname + '/src/static',
to: __dirname + '/dist/static'
},
],
}
),
],
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]'
}
}]
}
]
},
optimization: {
// realContentHash: true
minimizer: [
new CssMinimizerPlugin(),
new TerserWebpackPlugin(),
]
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src'), //设置@为src目录的别名
}
},
// devtool:"source-map",
mode: process.env.NODE_ENV, //产品模式| development
devServer: {
open: true, //打开浏览器
host: "localhost", //本地域名
port: 8080, //端口号
hot: true //热更新
}
}