目录
webpack是什么?
webpack是一种前端资源构建工具,一个静态模块打包器(module bundler)。在 Webpack看来,前端的所有资源文件ljs/json/css/img/less/....都会作为模块处理。它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。
通俗来说:webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
webpack五个核心概念
1. entry:入口指示webpack以那哪个文件为入口起点开始打包,分析构建依赖图
2. output:输出指示webpack打包后的资源bundles输出到哪里去,以及如何命名
3. loader:loader让webpack能够去处理哪些非js文件
4. plugins:plugins可以用于执行范围更广的任务,插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量等
5. mode:相对应的模式:开发模式“development”和生产模式“production”
npm i -g webpack
npm install webpak --save--dev
npm init (创建一个package.json文件)
运行指令:
开发环境:webpack ./src/index.js -o ./build/build.js --mode=development
webpack 会以 ./src/index.js 为入口文件开始打包 打包后输出到 ./build/build.js
整体打包环境,是开发环境
生产环境:webpack ./src/index.js -o ./build/build.js --mode=production
webpack 会以 ./src/index.js 为入口文件开始打包 打包后输出到 ./build/build.js
整体打包环境,是生产环境
webpack打包样式资源
-D是-save -dev缩写
代码目录:
index.js
//引入样式资源
import './index.css'
import './indexone.less'
webpack.config.js
/*
webpack.config.js webpack的配置文件
作用:指示webpack 干哪些活(当你运行webpack指令时,会加载里面的配置)
所以构建工具都是基于node.js平台运行的 模块化默认采用common.js
*/
//resolve 用来拼接绝对路径的方法
const {resolve} =require('path');
module.exports={
//webpack 配置
//入口起点
entry:'./src/index.js',
//输出
output:{
//输出文件名
filename:'built.js',
//输出路径
//_dirname node.js的变量,代表当前文件的目录绝对路径
path:resolve(__dirname,'build'),
},
//loader的配置
module:{
//详细的loader配置
//不同文件必须配置不同loader处理
rules:[
{
//匹配哪些文件
test:/\.css$/,
//使用哪些loader进行处理
use:[
//use数组中的loader的执行顺序:从有到左,从上到下 依次执行
//创建一个style标签,将js中的样式资源插入进去,添加到header中生效
'style-loader',
//将css文件变成common.js中,里面内容是样式字符串
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
//将less文件编译成css文件
//less-loader和less
'less-loader'
]
}
]
},
//plugins的配置
plugins:[
//详细的plugins的配置
],
//模式
mode:"development",
// mode:"production"
}
webpack打包html资源
代码目录:
index.js
function add(x,y){
return x+y;
}
console.log(add(2,3))
webpack.config.js
/*
loader:1. 下载 2. 使用(配置loader)
plugins: 1.下载 2. 引入 3. 使用
*/
const {resolve} =require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
entry:'./src/index.js',
output:{
filename:'built.js',
path:resolve(__dirname,'built')
},
module:{
rules:[
//loader的配置
]
},
plugins:[
//plugins的配置
// html-webpack-plugin
//功能:默认会创建一个空的html,自动引入打包输出的所有资源js/css
//需求:需要有结构的HTML文件
new HtmlWebpackPlugin(
{
//复制 './src/index.html' 文件,并自动引入打包输出的所有资源js/css
template:'./src/index.html'
}
),
],
mode:'development'
}
在高版本打包时可能会报错:
执行npm uninstall html-webpack-plugin卸载
重新安装最新版本npm i html-webpack-plugin@5.0.0-alpha.9
webpack打包图片资源
代码目录:
index.js
import './index.less'
webpack.config.js
/*
webpack.config.js webpack的配置文件
作用:指示webpack 干哪些活(当你运行webpack指令时,会加载里面的配置)
所以构建工具都是基于node.js平台运行的 模块化默认采用common.js
*/
//resolve 用来拼接绝对路径的方法
// npm uninstall html-webpack-plugin
//npm i html-webpack-plugin@5.0.0-alpha.9
const {resolve} =require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
//webpack 配置
//入口起点
entry:'./src/index.js',
//输出
output:{
//输出文件名
filename:'built.js',
//输出路径
//_dirname node.js的变量,代表当前文件的目录绝对路径
path:resolve(__dirname,'build'),
publicPath: './'
},
//loader的配置
module:{
rules:[
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
},
//问题处理不了html中的img图片
//处理图片资源
{
test:/\.(jpg|png|gif)$/,
//使用一个loader
//下载:url-loader file-loader
loader:'url-loader',
options:{
//图片小于8kb,就会被base64处理
//优点:减少请求数量 减轻服务器压力
//缺点:图片体积会更大 文件请求速度更慢
limit:28*1024,
//问题:因为url-loader 默认使用es6模块化解析,而html-loader引入图片是commonjs
//解析时会出问题 :[Object Module]
// 解决:关闭url-loader 的es6模块化,使用commonjs解析
esModule:false,
//给图片进行重命名
//[hash:10]去图片的hash的前10位
//[ext] 取文件原来的扩展名
name:'[hash:10].[ext]'
}
},
{
test:/\.html$/,
//处理html文件的img图片 负责引入img,从而能被url-loader进行处理
loader:'html-loader'
}
]
},
//plugins的配置
plugins:[
new HtmlWebpackPlugin(
{
//复制 './src/index.html' 文件,并自动引入打包输出的所有资源js/css
template:'./src/index.html'
}
),
],
//模式
mode:"development",
// mode:"production"
}