Webpack简单资源配置
安装Webpack
1、进行全局安装:npm install webpack@4.41.6(版本号) webpack-cli@3.3.11 -g
2、进行局部安装:npm install webpack@4.41.6 webpack-cli@3.3.11
Webpack项目的初始化
1、进行开发依赖:npm install webpack@4.41.6 webpack-cli@3.3.11 -D
2、初始化:npm init
3、在文件项目下新建src(项目源代码目录)、build(webpack打包处理之后输出的目录)文件夹
4、在src下新建一个index.js入口文件
Webpack运行指令
运行指令:
开发环境:webpack ./src/index.js -o ./build/built.js --mode=development
webpack会以 ./src/index.js 为入口文件开始打包,打包后输出到 ./build/built.js
整体打包环境,是开发环境
生产环境:webpack ./src/index.js -o ./build/built.js --mode=production
webpack会以 ./src/index.js 为入口文件开始打包,打包后输出到 ./build/built.js
整体打包环境,是生产环境
Webpack打包样式资源(loader)
配置webpack.config.js:所有的构建工具都是基于nodejs平台运行的,所以模块化默认采用commonjs
基本配置
const {resolve} = require('path')
/*
loader: 1. 下载 2. 使用(配置loader)
plugins: 1. 下载 2. 引入 3. 使用
*/
module.exports = {
// 入口起点
entry: './src/index.js',
// 输出
output:{
// 输出文件名
filename: 'built.js',
// 输出路径
// __dirname nodejs的变量,代表当前文件的目录绝对路径; build为目录名
path: resolve(__dirname, 'bulid')
},
// loader样式资源配置
module:{
rules:[
// loader详细配置
// 不同的文件必须配置不同的loader进行处理,并且不能进行复用
{
// 匹配哪些文件
test: /\.css$/,
// use数组中loader执行顺序:从右到左,从下到上 依次执行
use:[
//npm i css-loader@3.4.2 style-loader@1.1.3 -D
// 创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader'
]
},
{
test: /\.less$/,
use:[
// 创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader',
// 将less文件编译成css文件
// 需要下载 less-loader和less,指令为:npm i less@2.3.1 less-loader@5.0.0 -D
'less-loader'
]
}
]
},
// 插件配置
plugins:[],
// 模式
mode: 'development' //开发模式
// mode: 'pruduction' //生产模式
}
安装style-loader、css-loader指令为:npm i css-loader@3.4.2 style-loader@1.1.3 -D 其他指令也类似
然后可以执行webpack指令进行打包
Webpack打包HTML资源
核心代码
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 插件配置
plugins:[
// html-webpack-plugin
// 安装指令:npm i html-webpack-plugin@3.2.0 -D
// 功能:默认会创建一个空的HTML文件,自动引入打包输出的所有资源(js/css)
// 需要有结构的HTML文件
new HtmlWebpackPlugin({
// 复制 './src/index.html' 文件,并自动引入打包输出的所有资源(JS/CSS)
template: './src/index.html'
})
],
Webpack打包图片资源
核心代码
module:{
rules:[
{
//样式里使用了img图片
test:/\.less$/,
// 要使用多个loader处理用use
use:[
'style-loader',
'css-loader',
'less-loader'
]
},
{
// 以下的配置默认是处理不了htlm中的img图片的
// 处理图片资源
test: /\.(jpg|png|gig)$/,
// 使用一个就用loader
// 下载 url-loader file-loader,指令为:npm i url-loader@3.0.0 file-loader@5.0.2 -D
loader: 'url-loader',
options:{
// 图片大小小于8kb,就会被base64处理
// 优点: 减少请求数量(减轻服务器压力)
// 缺点:图片体积会更大(文件请求速度更慢)
limit: 8 * 1024,
// 给图片重命名
// [hash:10]取图片的hash的前10位
// [ext]取文件原来扩展名
name:'[hash:10].[ext]'
}
},
{
test: /\.html$/,
// 处理html文件中的Img图片(负责引入img,从而能被url-loader进行处理)
// 指令:npm i html-loader -D
loader:'html-loader'
}
]
},
打包其他资源
module:{
rules:[
{
test: /\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
{
exclude:/\.(css|js|html|less)$/,
loader: 'file-loader'
}
]
},