webpack
安装
安装之前进行项目初始化生成 package.json
文件
npm init -y
npm init
接下来安装 webpack
和 webpack-cli
npm i webpack webpack-cli --save
配置命令行
在package.json文件的scripts字段中配置启动命令
"scripts":{
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack --mode development",
"build":"webpack --mode production",
}
创建入口文件
webpack 默认的入口文件是 src
目录下的 index.js
;
需要在项目的根目录下创建src文件夹,在里边创建 index.js 文件作为入口文件
执行命令
命令执行成功后。会自动在项目的根目录下生成一个dist 文件,该文件就是打包后的产物; dist 文件不是必须的,可以随时删除的
- 开发环境
npm run dev
- 生产环境
npm run build
webpack 支持的模块化
webpack 支持 CommonJs 模块化 和 es6的模块化
- CommonJs
// 模块导出
module.exports = {}
// 模块导入
const res = requrie('模块url')
- es6
// 模块导出
export default 模块名
export 模块对象
// 模块导入
import ... from '模块url'
webpack的配置文件
如果要对webpack 进行配置,需要在项目根目录下创建配置文件 webpack.config.js
; 该文件是一个模块
module.exports = {
...
}
webpack的入口和出口
webpack的入口 entry 和 出口 output :
- 单一入口和出口
// 单一入口和出口
const path = require('path')
module.exports = {
entry:'index.js',
output:{
// 设值出口文件存放的目录
path:path.resolve(__dirname, "dist"),
// 配置输出文件名 可以指定文件名,也可以使用自动映射 [name]
filename:'[name].js'
}
}
- 多入口文件和单一出口
// 多入口文件和单一出口
const path = require('path')
module.exports = {
entry:['index.js', 'main.js',...],
output:{
// 设值出口文件存放的目录
path:path.resolve(__dirname, "dist"),
// 配置输出文件名 可以指定文件名,也可以使用自动映射 [name]
filename:'[name].js'
}
}
- 多入口配置
const path = require('path')
module.exports = {
entry:{
index:'index.js',
main:'main.js'
}
output:{
// 设值出口文件存放的目录
path:path.resolve(__dirname, "dist"),
// 配置输出文件名 也可以使用自动映射 [name], name 对应的是entry中的key
filename:'[name].js'
}
}
webpack的loader 和 plugin
webpack 处理 模板文件
webpack 处理html 文件: 需要借助于 html-webpack-plugin
插件, 该插件会自动帮我们管理引入js文件
- 安装插件
npm i html-webpack-plugin --save
- 配置插件
// 1 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:'index.js',
output:{
path:path.resolve(__dirname, 'dist'),
filename:'index.js'
},
plugins:[
new HtmlWebpackPlugin({
// 定义模板
template:'index.html',
// 输入文件名
filename:'index.html'
})
]
}
管理输出文件夹dist
需要管理输出的文件dist, 可以通过配置项或者是插件实现自动管理dist文件夹
- 配置项
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:'index.js',
output:{
path:path.resolve(__dirname, 'dist'),
filename:'index.js',
// 管理dist文件夹
clean:true
},
plugins:[
new HtmlWebpackPlugin({
// 定义模板
template:'index.html',
// 输入文件名
filename:'index.html'
})
]
}
- 通过插件
需要安装clean-webpack-plugin
插件
npm i clean-webpack-plugin --save
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleabWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry:'index.js',
output:{
path:path.resolve(__dirname, 'dist'),
filename:'index.js',
},
plugins:[
new HtmlWebpackPlugin({
// 定义模板
template:'index.html',
// 输入文件名
filename:'index.html'
}),
new CleabWebpackPlugin()
]
}
webpack 处理 css 文件
webpack 处理css / sass 文件,需要依赖loader; 需要安装 css-loader
和 style-loader
, sass-loader
和 sass
loader 的作用:
- css-loader : 处理解析css文件
- style-loader : 把处理解析后的css文件 从js文件中提取出来,以内部样式的方式(style标签)插入到html页面中,
- sass :解析处理 sass文件
- sass-loader : 编译转码为css文件
生成内部的css样式
- 安装loader
npm i css-loader style-loader sass-loader sass --save
- 配置loader
// 1 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:'index.js',
output:{
path:path.resolve(__dirname, 'dist'),
filename:'index.js'
},
module:{
// 配置规则。规则有两个必须的属性:test (检测匹配要处理的文件) 和 use (对检测到的目标文件使用相应的loader进行处理)
rules:[
// 每个对象都是一个loader的配置项
{
test:/\.css$/i,
use:['style-loader', 'css-loader']
},
{
test:/\.(scss|sass)$/i,
use:['style-loader', 'css-loader', 'sass-loader']
}
]
},
plugins:[
new HtmlWebpackPlugin({
// 定义模板
template:'index.html',
// 输入文件名
filename:'index.html'
})
]
}
打包生成独立的css文件
打包生成独立的css文件,需要借助于 mini-css-extract-plugin
插件,
- 安装
npm install --save-dev mini-css-extract-plugin
- 配置插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry:'index.js',
output:{
path:path.resolve(__dirname, 'dist'),
filename:'index.js'
},
module:{
// 配置规则。规则有两个必须的属性:test (检测匹配要处理的文件) 和 use (对检测到的目标文件使用相应的loader进行处理)
rules:[
// 每个对象都是一个loader的配置项
{
test:/\.css$/i,
// 使用插件内部的loader 生成单独的css文件
use:[MiniCssExtractPlugin.loader 'css-loader']
},
{
test:/\.(scss|sass)$/i,
use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
},
plugins:[
new HtmlWebpackPlugin({
// 定义模板
template:'index.html',
// 输入文件名
filename:'index.html'
}),
new MiniCssExtractPlugin()
]
}
webpack处理图片资源
webpack 处理图片资源,需要使用 file-loader
和 url-loader
- 安装
npm i file-loader url-loader --save
- 配置loader
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry:'index.js',
output:{
path:path.resolve(__dirname, 'dist'),
filename:'index.js'
},
module:{
// 配置规则。规则有两个必须的属性:test (检测匹配要处理的文件) 和 use (对检测到的目标文件使用相应的loader进行处理)
rules:[
// 每个对象都是一个loader的配置项
{
test:/\.css$/i,
// 使用插件内部的loader 生成单独的css文件
use:[MiniCssExtractPlugin.loader 'css-loader']
},
{
test:/\.(scss|sass)/i,
use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
// 配置处理图片的loader
{
test:/\.(jpg|jpeg|png|gif|webp)$/i,
use:[
{
loader:'url-loader',
options:{
// limit 限定图片的大小, 如果小于指定的值,则转换为base64的编码格式
limit:8192,
// name 属性配置输入的图片名和路径
name:'image/[name].[ext]'
}
}
]
}
]
},
plugins:[
new HtmlWebpackPlugin({
// 定义模板
template:'index.html',
// 输入文件名
filename:'index.html'
}),
new MiniCssExtractPlugin()
]
}
webpack的热更新
webpack的 webpack-dev-server
插件可以实现热更新并开启服务
- 安装
npm i webpack-dev-server --save
- 配置 devServer
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry:'index.js',
output:{
path:path.resolve(__dirname, 'dist'),
filename:'index.js'
},
devServer:{
// 开启服务的端口号
port:9001
},
module:{
// 配置规则。规则有两个必须的属性:test (检测匹配要处理的文件) 和 use (对检测到的目标文件使用相应的loader进行处理)
rules:[
// 每个对象都是一个loader的配置项
{
test:/\.css$/i,
// 使用插件内部的loader 生成单独的css文件
use:[MiniCssExtractPlugin.loader 'css-loader']
},
{
test:/\.(scss|sass)/i,
use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
// 配置处理图片的loader
{
test:/\.(jpg|jpeg|png|gif|webp)$/i,
use:[
{
loader:'url-loader',
options:{
// limit 限定图片的大小, 如果小于指定的值,则转换为base64的编码格式
limit:8192,
// name 属性配置输入的图片名和路径
name:'image/[name].[ext]'
}
}
]
}
]
},
plugins:[
new HtmlWebpackPlugin({
// 定义模板
template:'index.html',
// 输入文件名
filename:'index.html'
}),
new MiniCssExtractPlugin()
]
}
- 配置启动命令
在 package.json 文件中配置启动命令 , 执行命令npm run server
"scripts":{
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack --mode development",
"build":"webpack --mode production",
"server":"webpack serve --open"
}
webpack的环境配置
环境分为开发环境,生产环境, 测试环境等, 因此需要配置环境
需要借助于插件 webpack-merge
帮我们合并处理配置文件:
npm i webpack-merge --save
创建三个webpack的配置文件: webpack.basic.js webpack.dev.js webpack.pro.js
-
webpack.basic.js
-
webpack.dev.js
const { merge } = require('webpack-merge');
const basic = require('webpack.basic.js');
module.exports = merge(basic, {...})
- webpack.pro.js
const { merge } = require('webpack-merge');
const basic = require('webpack.basic.js');
module.exports = merge(basic, {...})
webpack
安装
安装之前进行项目初始化生成 package.json
文件
npm init -y
npm init
接下来安装 webpack
和 webpack-cli
npm i webpack webpack-cli --save
配置命令行
在package.json文件的scripts字段中配置启动命令
"scripts":{
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack --mode development",
"build":"webpack --mode production",
}
创建入口文件
webpack 默认的入口文件是 src
目录下的 index.js
;
需要在项目的根目录下创建src文件夹,在里边创建 index.js 文件作为入口文件
执行命令
命令执行成功后。会自动在项目的根目录下生成一个dist 文件,该文件就是打包后的产物; dist 文件不是必须的,可以随时删除的
- 开发环境
npm run dev
- 生产环境
npm run build
webpack 支持的模块化
webpack 支持 CommonJs 模块化 和 es6的模块化
- CommonJs
// 模块导出
module.exports = {}
// 模块导入
const res = requrie('模块url')
- es6
// 模块导出
export default 模块名
export 模块对象
// 模块导入
import ... from '模块url'
webpack的配置文件
如果要对webpack 进行配置,需要在项目根目录下创建配置文件 webpack.config.js
; 该文件是一个模块
module.exports = {
...
}
webpack的入口和出口
webpack的入口 entry 和 出口 output :
- 单一入口和出口
// 单一入口和出口
const path = require('path')
module.exports = {
entry:'index.js',
output:{
// 设值出口文件存放的目录
path:path.resolve(__dirname, "dist"),
// 配置输出文件名 可以指定文件名,也可以使用自动映射 [name]
filename:'[name].js'
}
}
- 多入口文件和单一出口
// 多入口文件和单一出口
const path = require('path')
module.exports = {
entry:['index.js', 'main.js',...],
output:{
// 设值出口文件存放的目录
path:path.resolve(__dirname, "dist"),
// 配置输出文件名 可以指定文件名,也可以使用自动映射 [name]
filename:'[name].js'
}
}
- 多入口配置
const path = require('path')
module.exports = {
entry:{
index:'index.js',
main:'main.js'
}
output:{
// 设值出口文件存放的目录
path:path.resolve(__dirname, "dist"),
// 配置输出文件名 也可以使用自动映射 [name], name 对应的是entry中的key
filename:'[name].js'
}
}
webpack的loader 和 plugin
webpack 处理 模板文件
webpack 处理html 文件: 需要借助于 html-webpack-plugin
插件, 该插件会自动帮我们管理引入js文件
- 安装插件
npm i html-webpack-plugin --save
- 配置插件
// 1 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:'index.js',
output:{
path:path.resolve(__dirname, 'dist'),
filename:'index.js'
},
plugins:[
new HtmlWebpackPlugin({
// 定义模板
template:'index.html',
// 输入文件名
filename:'index.html'
})
]
}
管理输出文件夹dist
需要管理输出的文件dist, 可以通过配置项或者是插件实现自动管理dist文件夹
- 配置项
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:'index.js',
output:{
path:path.resolve(__dirname, 'dist'),
filename:'index.js',
// 管理dist文件夹
clean:true
},
plugins:[
new HtmlWebpackPlugin({
// 定义模板
template:'index.html',
// 输入文件名
filename:'index.html'
})
]
}
- 通过插件
需要安装clean-webpack-plugin
插件
npm i clean-webpack-plugin --save
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleabWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry:'index.js',
output:{
path:path.resolve(__dirname, 'dist'),
filename:'index.js',
},
plugins:[
new HtmlWebpackPlugin({
// 定义模板
template:'index.html',
// 输入文件名
filename:'index.html'
}),
new CleabWebpackPlugin()
]
}
webpack 处理 css 文件
webpack 处理css / sass 文件,需要依赖loader; 需要安装 css-loader
和 style-loader
, sass-loader
和 sass
loader 的作用:
- css-loader : 处理解析css文件
- style-loader : 把处理解析后的css文件 从js文件中提取出来,以内部样式的方式(style标签)插入到html页面中,
- sass :解析处理 sass文件
- sass-loader : 编译转码为css文件
———————————————————————————————————————————————————————————————————
生成内部的css样式
- 安装loader
npm i css-loader style-loader sass-loader sass --save
- 配置loader
// 1 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:'index.js',
output:{
path:path.resolve(__dirname, 'dist'),
filename:'index.js'
},
module:{
// 配置规则。规则有两个必须的属性:test (检测匹配要处理的文件) 和 use (对检测到的目标文件使用相应的loader进行处理)
rules:[
// 每个对象都是一个loader的配置项
{
test:/\.css$/i,
use:['style-loader', 'css-loader']
},
{
test:/\.(scss|sass)$/i,
use:['style-loader', 'css-loader', 'sass-loader']
}
]
},
plugins:[
new HtmlWebpackPlugin({
// 定义模板
template:'index.html',
// 输入文件名
filename:'index.html'
})
]
}
打包生成独立的css文件
打包生成独立的css文件,需要借助于 mini-css-extract-plugin
插件,
- 安装
npm install --save-dev mini-css-extract-plugin
- 配置插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry:'index.js',
output:{
path:path.resolve(__dirname, 'dist'),
filename:'index.js'
},
module:{
// 配置规则。规则有两个必须的属性:test (检测匹配要处理的文件) 和 use (对检测到的目标文件使用相应的loader进行处理)
rules:[
// 每个对象都是一个loader的配置项
{
test:/\.css$/i,
// 使用插件内部的loader 生成单独的css文件
use:[MiniCssExtractPlugin.loader 'css-loader']
},
{
test:/\.(scss|sass)$/i,
use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
},
plugins:[
new HtmlWebpackPlugin({
// 定义模板
template:'index.html',
// 输入文件名
filename:'index.html'
}),
new MiniCssExtractPlugin()
]
}
webpack处理图片资源
webpack 处理图片资源,需要使用 file-loader
和 url-loader
- 安装
npm i file-loader url-loader --save
- 配置loader
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry:'index.js',
output:{
path:path.resolve(__dirname, 'dist'),
filename:'index.js'
},
module:{
// 配置规则。规则有两个必须的属性:test (检测匹配要处理的文件) 和 use (对检测到的目标文件使用相应的loader进行处理)
rules:[
// 每个对象都是一个loader的配置项
{
test:/\.css$/i,
// 使用插件内部的loader 生成单独的css文件
use:[MiniCssExtractPlugin.loader 'css-loader']
},
{
test:/\.(scss|sass)/i,
use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
// 配置处理图片的loader
{
test:/\.(jpg|jpeg|png|gif|webp)$/i,
use:[
{
loader:'url-loader',
options:{
// limit 限定图片的大小, 如果小于指定的值,则转换为base64的编码格式
limit:8192,
// name 属性配置输入的图片名和路径
name:'image/[name].[ext]'
}
}
]
}
]
},
plugins:[
new HtmlWebpackPlugin({
// 定义模板
template:'index.html',
// 输入文件名
filename:'index.html'
}),
new MiniCssExtractPlugin()
]
}
webpack的热更新
webpack的 webpack-dev-server
插件可以实现热更新并开启服务
- 安装
npm i webpack-dev-server --save
- 配置 devServer
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry:'index.js',
output:{
path:path.resolve(__dirname, 'dist'),
filename:'index.js'
},
devServer:{
// 开启服务的端口号
port:9001
},
module:{
// 配置规则。规则有两个必须的属性:test (检测匹配要处理的文件) 和 use (对检测到的目标文件使用相应的loader进行处理)
rules:[
// 每个对象都是一个loader的配置项
{
test:/\.css$/i,
// 使用插件内部的loader 生成单独的css文件
use:[MiniCssExtractPlugin.loader 'css-loader']
},
{
test:/\.(scss|sass)/i,
use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
// 配置处理图片的loader
{
test:/\.(jpg|jpeg|png|gif|webp)$/i,
use:[
{
loader:'url-loader',
options:{
// limit 限定图片的大小, 如果小于指定的值,则转换为base64的编码格式
limit:8192,
// name 属性配置输入的图片名和路径
name:'image/[name].[ext]'
}
}
]
}
]
},
plugins:[
new HtmlWebpackPlugin({
// 定义模板
template:'index.html',
// 输入文件名
filename:'index.html'
}),
new MiniCssExtractPlugin()
]
}
- 配置启动命令
在 package.json 文件中配置启动命令 , 执行命令npm run server
"scripts":{
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack --mode development",
"build":"webpack --mode production",
"server":"webpack serve --open"
}
webpack的环境配置
环境分为开发环境,生产环境, 测试环境等, 因此需要配置环境
需要借助于插件 webpack-merge
帮我们合并处理配置文件:
npm i webpack-merge --save
创建三个webpack的配置文件: webpack.basic.js webpack.dev.js webpack.pro.js
-
webpack.basic.js
-
webpack.dev.js
const { merge } = require('webpack-merge');
const basic = require('webpack.basic.js');
module.exports = merge(basic, {...})
- webpack.pro.js
const { merge } = require('webpack-merge');
const basic = require('webpack.basic.js');
module.exports = merge(basic, {...})