webpack学习笔记(一)
webpack
一、开发环境快速入门
参考网址：
中文:https://webpack.docschina.org/
英文:https://webpack.js.org/
参考视频：https://www.bilibili.com/video/BV1e7411j7T5?p=17&spm_id_from=pageDriver
开发环境介绍
能让代码本地调试运行的环境,不需要注意优化，兼容等方面
初步使用：
参考网址：https://webpack.docschina.org/guides/getting-started/
基本安装
首先我们创建一个目录，初始化 npm，然后 在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：
npm init -y npm install webpack webpack-cli -D
目录创建
src/index.js
import bar from './bar.js'; bar();
src/bar.js
export default function bar() {
console.log("hello,webpack!")
}webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
output: { // 输出配置
filename: 'bundle.js', // 输出文件名
path: path.resolve(__dirname, 'dist'), // 输出文件路径配置
},
mode: 'development' //开发环境 // mode: 'production' 生产环境
};index.html
起步
命令：npx webpack
当前webpack版本
"webpack": "^5.36.2", "webpack-cli": "^4.6.0",
打包样式资源
安装包
npm i -D webpack webpack-cli style-loader css-loader less less-loader
#指定版本,命令输入在一行 npm i -D webpack@5.36.2 webpack-cli@4.7.0 style-loader@2.0.0 css-loader@5.2.4 less@4.1.1 less-loader@8.1.1 #或者一个一个安装 npm i -D webpack@5.36.2 npm i -D webpack-cli@4.7.0 npm i -D style-loader@2.0.0 npm i -D css-loader@5.2.4 npm i -D less@4.1.1 npm i -D less-loader@8.1.1
配置
webpack.config.js中添加module
//webpack.config.js中
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
output: { // 输出配置
filename: 'bundle.js', // 输出文件名
path: path.resolve(__dirname, 'dist'), // 输出文件路径配置
},
mode: 'development', //开发环境 // mode: 'production' 生产环境
module: {
rules: [
// 不同文件必须配置不同loader处理
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
// use数组中loader执行顺序：从右到左，从下到上 依次执行
'style-loader', 'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader', 'css-loader', 'less-loader'
]
}
]
}
};说明
功能：
把css打包到js中
打包命令：
npx webpack
npx主要用局部安装的命令执行
打包html资源
安装包
# 接打包样式资源的基础上继续安装 npm i -D html-webpack-plugin # 指定版本 npm i -D html-webpack-plugin@5.3.1
配置
//webpack.config.js
const path = require('path');
//导入包
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader', 'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader', 'css-loader', 'less-loader'
]
}
]
},
plugins: [
// 设置相应插件
new HtmlWebpackPlugin({
// 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
template: './src/index.html'
})
]
};说明
作用：
复制设置模板中的html（没有设置，则会创建一个空的HTML），并自动引入打包输出的所有资源（JS/CSS)，存放到output设置的目录下
打包命令：
npx webpack
打包图片资源
作用：本质上来讲，创建一个HTML，把图片资源打包到导出目录下，并自动配置好引用
安装包
npm i html-loader url-loader file-loader -D #指定版本,命令输入在一行 npm i -D html-loader@2.1.2 file-loader@6.2.0 url-loader@4.1.1 #或者一个一个安装 npm i -D html-loader@2.1.2 npm i -D file-loader@6.2.0 npm i -D url-loader@4.1.1
配置
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
// 处理图片资源
test: /\.(jpg|png|gif)$/,
// 使用一个loader
loader: 'url-loader',
options: {
// 图片大小小于limit，就会被base64处理
limit: 8 * 1024,
// 解析时会出问题：[object Module]
esModule: false,
// 给图片进行重命名
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
// 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
loader: 'html-loader',
options: {
// webpack5需要html-loader也配置 esModule:false
esModule: false,
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
};打包字体图标和其他资源
安装包
#打包图片资源的时候已经安装
配置
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 打包其他资源(除了html/js/css资源以外的资源)
{
// 排除css/js/html资源
exclude: /\.(css|js|html|less)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
};devServer
安装包
npm i -D webpack-dev-server@3.11.2
配置
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'build.js',
path: resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 打包其他资源(除了html/js/css资源以外的资源)
{
// 排除css/js/html资源
exclude: /\.(css|js|html|less)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
devServer: {
// 项目构建后路径
contentBase: resolve(__dirname, 'dist'),
// 启动gzip压缩
compress: true,
// 端口号
port: 3000,
// 自动打开浏览器
open: true
}
};说明
作用：
用来自动化（自动编译，自动打开浏览器，自动刷新浏览器...）
特点：
只会在内存中编译打包，不会有任何输出
启动devServer命令：
npx webpack serve
二、开发环境基本配置（综合配置）
初始化
最新版本安装（可能出现兼容性问题）
npm init -y npm i webpack webpack-cli css-loader style-loader less-loader less html-webpack-plugin html-loader url-loader file-loader webpack-dev-server -D
指定版本安装
#指定版本,命令输入在一行 npm i -D webpack@5.36.2 webpack-cli@4.6.0 css-loader@5.2.4 style-loader@2.0.0 less-loader@8.1.1 less@4.1.1 html-webpack-plugin@5.3.1 html-loader@2.1.2 url-loader@4.1.1 file-loader@6.2.0 webpack-dev-server@3.11.2 #或者一个一个安装 npm i -D webpack@5.36.2 npm i -D webpack-cli@4.7.0 npm i -D style-loader@2.0.0 npm i -D css-loader@5.2.4 npm i -D less@4.1.1 npm i -D less-loader@8.1.1 npm i -D html-webpack-plugin@5.3.1 npm i -D html-loader@2.1.2 npm i -D file-loader@6.2.0 npm i -D url-loader@4.1.1 npm i -D webpack-dev-server@3.11.2
当前版本(防止版本不同造成的错误)
"devDependencies": {
"css-loader": "^5.2.4",
"file-loader": "^6.2.0",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.3.1",
"less": "^4.1.1",
"less-loader": "^8.1.1",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"webpack": "^5.36.2",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2"
},配置
/*
开发环境配置：能让代码运行
运行项目指令：
npx webpack 会将打包结果输出出去
npx webpack serve 只会在内存中编译打包，没有输出
*/
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/bundle.js',
path: resolve(__dirname, 'dist')
},
module: {
rules: [
// loader的配置
{
// 处理less资源
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
// 处理css资源
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
// 处理图片资源
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
// 关闭es6模块化
esModule: false,
outputPath: 'imgs' //图片输出目录设置
}
},
{
// 处理html中img资源
test: /\.html$/,
loader: 'html-loader',
options: {
// webpack5需要html-loader也配置 esModule:false
esModule: false,
}
},
{
// 处理其他资源
exclude: /\.(html|js|css|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media' //其他资源输出目录
}
}
]
},
plugins: [
// plugins的配置
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
devServer: {
contentBase: resolve(__dirname, 'dist'),
compress: true,
port: 3000,
open: true
}
};说明
入口路径: './src/js/index.js'
js输出路径: './dist/js/bundle.js'
输出目录: path: resolve(__dirname, 'dist')
index.html模板入口路径： './src/index.html'
index.html模板输出路径：'./dist/index.html'
处理图片资源配置中出现的outputPath: 'imgs'为设置图片输出目录，在'./dist/imgs/'目录里
处理其他资源配置中出现的outputPath: 'media'为设置其他资源输出目录，在'./dist/media/'目录里
样式都打包在'./dist/js/bundle.js'中，不需要另外设置目录
目录划分
- ./scr/js 存放js文件
- ./src/imgs 存放图片
- ./src/css 存放css
- ./src/media 存放其他资源，比如字体
执行命令：npx webpack serve
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
