webpack使用步骤
1.初始化项目:npm init -y
2.安装依赖 webpack、webpack-cli (webpack命令行工具)
3.在项目中创建src目录,入口文件index.js文件中编写代码
4.执行 npm run build 将入口文件代码打包到出口目录下(dist目录)
webpack.config.js配置文件
mode 配置 指定模式 production、development;
entry 配置 入口;
output 配置 出口;
module 配置 loader加载器 ;
plugin 配置 插件;
const path = require("path");
// 引入html插件
cons HTMLPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = {
mode:"production",
entry:"./src/index.js",
output:{
path:path.resolve(__dirname,"dist"), //指定打包的目录,必须要绝对路径
filename:"main.js", //打包后的文件名
clean:true // 自动清理打包目录
},
module:{
rules:[
{
test:/\\ \.css$/,
use:["style-loader","css-loader"] // loader 从右到左(或从下到上)执行,此处先css-loader,再style-loader
}
]
},
plugins:[
new CleanWebpackPlugin(),
new HTMLPlugin()
],
devServer:{}
}
加载器 loader
webpack默认情况下,只会处理js文件,如果要处理其它类型的文件,需要什么引入什么loader。
babel-loader、sass-loader、ts-loader……
以css为例:
使用css-loader可以处理js中的样式;
使用步骤:
1.安装 npm i -D css-loader
2.配置
module:{
rules:[
{
test:/\\ \.css$/i,
use:["style-loader","css-loader"] // loader 从右到左(或从下到上)执行,此处先css-loader,再style-loader
},
{
test:/\\.(jpg|png|gif)$/,
type:"asset/resource" // 表示将文件作为资源进行处理,并将其拷贝到dist目录下。图片直接资源类型的数据,可以通过指定type来处理。
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
css-loader是把css文件转换为js代码使用,这样js文件直接引入的css文件就可以直接import引入css文件使用
style-loader是让css样式生效。
webpack5之后不再需要使用loader来处理以.png结尾的文件,而是可以直接使用asset模块来简化配置和处理。asset是webpack5内置的模块,不需要额外安装任何东西
在编写js代码时,经常需要使用一些js中的新特性,而新特性在旧的浏览器中兼容性不好,导致 我们无法使用一些新的特性,现在,我们可以使用新特性编写代码,代码编写完成时使用一些工具(babel)将新特性代码转换为旧代码。
babel -- 进行js语法转化,以提高代码的兼容性。 如 箭头函数-》普通函数 ,let-》var
使用步骤:
1.安装 npm install -D babel-loader @babel/core @babel/preset-env
// babel-loader 连接webpack和babel,让babel可以在webpack中使用;
// @babel/core babel的核心,实现主要功能,转化js代码
// @babel/preset-env 预设环境,babel中也是一个个插件,不同的转换对应不同的插件,用预设指把常用插件提前准备好
2.配置
module: {
rules: [
{
test: /\.m?js$/, // 以mjs或js结尾的文件
exclude: /(node_modules|bower_components)/, // 排除node_modules或bower_components目录中的文件
use: { // 传对象给babel加载器做更详细的配置
loader: 'babel-loader', // 使用babel加载器
options: {
presets: ['@babel/preset-env'] // 用babel的默认配置
}
}
}
]
}
3.在package.json中设置浏览器兼容列表
"browserslist":[
"defaults" // 设置默认支持的浏览器
]
插件 plugin
插件用来为webpack扩展功能
常用plugin:
html-webpack-plugin :自动生成html文件,并将打包后的js和css文件自动引入html文件中,方便在浏览器中查看应用程序。
uglifyjs-webpack-plugin:压缩js代码,减小文件体积,提高应用程序的性能。
mini-css-extract-plugin:将css文件从js中分离出来,形成单独的css文件,提高浏览器加载CSS文件的效率。
define-plugin:在代码中定义全局变量,方便在不同环境下进行调试和测试。
clean-webpack-plugin:在每次构建前清理打包目录dist,再生成新的,避免旧文件对新文件的影响。
1. html-webpack-plugin:可以在打包代码之后,在打包目录dist中自动生成html文件
使用步骤:安装依赖;配置插件。
plugins:[
new HTMLPlugin({
title:"hello" , // 浏览器打开生成的html页面的tab名
template:"./src/index.html" // 将src目录下的index.html文件作为模板,在打包后目录dist下生成一个相同的index.html 并在其中自动引入打包后的js和css文件
})
]
loader是处理文件的;
plugin是扩展功能的;
开发服务器 webpack-dev-server
可以提供用于开发的 HTTP Server(开发服务器),它已集成了自动编译和自动刷新页面的功能。是官方的一个库,
devServer: {
port: 8000, // 监听的端口号
open: true, // 开启服务器后,自动打开浏览器,自动访问地址 Http:localhost:8000
index:'index.html', // 默认配置是index.html 当访问Http:localhost:8000 时,没写具体的资源文件,会加上index.html 访问Http:localhost:8000/index.html
proxy: { // 配置代理规则,常用于跨域访问
"/api": { // 这是个正则表达式,只要请求地址中能够符合正则表达式,就用代理,把协议,主机名,端口 换成代理的
target: "http://xxx.com",
changeOrigin: true // 请求时候的request headers,如果不配置,请求头里还是localhost:8000,服务器要求请求头匹配, 所以要更改请求头中的host和origin
}
}
},