文章目录
1. webpack默认配置(webpack版本4.44.1)
今天边看视频边做的 关于webpack4的 笔记,做下笔记希望自己能记住,也希望能给向我一样的初学者带来一些帮助。
1. npm init -y
2. npm install webpack webpack-cli -D
3. 创建src / index.js 文件
运行webpack打包,使用npx 会在 node_module里面查找webpack模块
3. npx webpack
打包完成后 会生成 dist/main.js 文件
在根目录
创建webpack.config.js文件
默认配置 :
// webpack 是基于 nodejs的
// 要使用CommonJS规范导出一个对象
const path = require('path')
module.exports = {
// webpack 执行入口
entry: './src/index.js',
// 输出
output: {
// 输出到哪里,必须是绝对路径
path: path.resolve(__dirname, './dist'),
filename: 'main.js'
},
// 开发模式
mode: 'development'
}
如果不在根目录
创建webpack.config.js文件,默认是如下配置
-
默认入口模块
- ./src/index.js
-
默认输出
- 名称是main.js
- 路径是’./dist’
-
webpack默认支持多种模块类型:commonjs esmodule AMD
- esmodule 和 commonjs
- import { } from ‘./’
- const xxx = require(‘xxx’)
- webpack默认支持js模块和json模块
- esmodule 和 commonjs
2. webpack核心配置概念
注意:
loader存在执行顺序:自右往左,自下往上
3. 图片 / 字体处理
npm install file-loader -D
./dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="main.js"></script>
</body>
</html>
index.js
import pic from './asset/hz.jpg'
// 处理完成后 pic 即为 输出到路径的图片
// a4d6987a21c45234dc8a7e43044f33eb.jpg
console.log(pic)
var img = new Image()
img.src = pic
var root = document.querySelector('#root')
root.append(img)
webpack.config.js
module: {
rules: [
// 处理图片
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
//! 定义输出名字 具体查看官方文档 placeholders
name: '[name]_[hash:8].[ext]',
outputPath: 'images/',
}
}
]
},
// 处理字体
{
test: /\.(woff2|woff|ttf|eot|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name]_[hash:8].[ext]',
outputPath: 'font/',
}
}
]
},
]
}
此时页面就能显示出图片
4.css / less / …处理
npm install css-loader style-loader less less-loader -D
index.js
import("./asset/css/index.css")
import("./asset/css/a.css")
import("./asset/css/b.less")
webpack.config.js
// 处理css
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
//! 将多个样式文件打包到一个 style 标签里面
options: { injectType: 'singletonStyleTag' },
},
{
loader: 'css-loader'
}
]
},
// 处理less
{
test: /\.less$/,
use: [
{
loader: 'style-loader',
//! 将多个样式文件打包到一个 style 标签里面
options: { injectType: 'singletonStyleTag' },
},
{
loader: 'css-loader'
},
{
loader: 'less-loader'
}
]
},
5.postcss的使用
npm install postcss-loader autoprefixer -D
webpack.config.js,在css处理 / less处理中 加入post-loader
{
loader: 'postcss-loader'
}
新建postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')({
// 配置兼容市场份额大于1%的浏览器最近两个版本
overrideBrowserslist: ['last 2 versions', '>1%']
})
]
}
6.plugins
plugin可以在webpack运行到某个阶段的时候,帮你做一些事情,类似于生命周期的概念
html-webpack-plugin
npm install --save-dev html-webpack-plugin
扩展插件,在webpack构建流程中的特定时期注入逻辑来改变构建结果或做你想要做的事情,作用于整个构建过程
HtmlWebpackPlugin
简化了HTML文件的创建,以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个HTML文件,使用lodash模板提供你自己的模板,或使用你自己的loader。
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
title: 'my app',
template: './src/index.html',
filename: 'template.html'
})
]
需要创建html文件作为模板 ./src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%=htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>
clean-webpack-plugin
npm install --save-dev clean-webpack-plugin
作用: 在每次进行构建的时候 将dist删除重新构建新的dist文件
webpack.config.js
const {CleanWebpackPugin} = require('clean-webpack-plugin')
plugins:[
new CleanWebpackPugin()
]
mini-css-extract-pugin
npm install --save-dev mini-css-extract-plugin
作用:将多个css样式文件提取成一个独立文件
webpack.config.js
const miniCssExtractPlugin = require('mini-css-extract-plugin')
module: {
rules: [
{
test: /\.less$/,
use: [
//! 将多个样式文件打包到一个 style 标签里面
// {
// loader: 'style-loader',
// options: { injectType: 'singletonStyleTag' },
// },
//! 将样式文件提取成一个独立文件
{
loader: miniCssExtractPlugin.loader,
options: {
}
},
'css-loader',
'postcss-loader',
'less-loader'
]
},
]
},
plugins:[
new miniCssExtractPlugin({
filename: '[name]_[chunkhash:8].css',
})
]