(5条消息) webpack看这一篇就够了_itpeilibo的博客-CSDN博客
Webpack
简介:
Webpack的创始人是德国工程师Tobias Koppers(托比亚斯.科伯斯) ,他是Webpack的核心开发者之一。他于2012年开始 开发Webpack,并于2013年开源发布第一个版本。
Webpack 是一个现代JavaScript应用程序的静态模块打包器 ,也是个开源的前端打包工具。 要使用Webpack 前须先安装Node.js。 Webpack 可以通过更改 Webpack.config.js 来设置各项功能。
本质上,webpack是一个用于现代JavaScript应用程序的静态模块打包工具
静态模块打包器:
它分析应用的模块结构,处理和打包各种资源和文件,生成浏览器可以直接运行的静态资源。Webpack是最知名的例子。
打包工具:
打包工具是一种用于处理、组合、压缩和优化网站和应用程序资源 (如JavaScript, CSS, HTML文件)的工具。它们通常用于将多个文件或模块合并成少量的打包文件,以优化加载速度和性能。
常见的打包工具
- Webpack:广泛用于复杂应用的模块打包。
- Vite:现代化开发服务器,利用原生ESM,快速重载。
- Parcel:零配置打包工具,易于使用,适合小到中型项目。
- Rollup:更适合于库和框架的打包,支持ES模块。
- Browserify :允许在浏览器中使用Node.js风格的
require
。
为什么要用Webpack:
- 模块化支持:管理和打包项目的多个模块和依赖。 --为管理模块提出的方法
- 性能优化:通过代码拆分和懒加载,提高加载速度和性能。 --提高加载速度
- 插件系统:提供丰富的插件,扩展功能和自定义构建过程。 --插件扩展广泛
- 开发效率:热模块替换等特性提升开发体验。 --开发效率提高
- 广泛兼容:支持多种前端资源和编程语言。 --兼容性强
优点:
优点:
- 高度可配置:提供丰富的配置选项,适用于复杂和高度定制的项目。 --配置丰富
- 强大的插件生态:有大量社区支持的插件,可以扩展其功能。 --插件扩展广泛
- 广泛的兼容性:支持多种模块格式和第三方库集成。 --兼容性强
- 优化策略:如代码拆分和懒加载,有利于性能优化。 --性能优化
Webpack核心及概念:
Webpack 是代码编译工具,有
1.入口(entry):指定Webpack开始构建内部依赖图的起始点。
2.输出(output):定义Webpack打包后的资源bundles放在哪里,以及如何命名。
3.Loaders:允许Webpack处理非JavaScript文件,并将它们转换为模块。
4.插件(plugins):扩展Webpack功能的组件,用于执行各种各样的任务。
5.模式(mode):设置development
或production
来启用Webpack内置的优化功能。
入口(entry):
简易示例:
//单入口--字符串
module.exports = {
entry: './path/to/my/entry/file.js',
};
//多入口--数组
module.exports = {
entry: ['./src/index.js', './src/add.js']
};
//多入口--对象
module.exports = {
entry: {
home: './home.js',
about: './about.js',
contact: './contact.js'
}
};
输出(output):
简易示例:
const path = require('path')
module.exports={
entry:'./file.js', // 入口文件
// 输出配置
output:{
path:path.resolve(__dirname,'dist'), // 输出文件夹,使用path.resolve()方法解析相对路径,这里是./dist
filename:'boundle.js' // 输出文件的名称,这里是boundle.js
}
}
Loaders:
简易示例:
module.exports={
// 输出配置
output:{},
// 模块配置
module:{
// 规则配置
rules:[
// 使用正则表达式匹配.txt文件,并将它们加载为raw-loader
{ test:/\.txt/ , use: 'raw-loader' }
// { test: /\.txt$/, use: ['raw-loader', 'css-loader'] }
]
}
}
插件(plugins):
简易示例:
const HtmlWebPackPlugin = require('html-Webpack-plugin'); // 导入HtmlWebPackPlugin
cosnt Webpack = require('Webpack'); // 导入Webpack
// 定义配置对象
module.exports={
//模块配置
module:{
[
// 使用正则表达式匹配.txt文件,并将它们加载为raw-loader
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins:[
// 创建一个HtmlWebPackPlugin实例,用于生成HTML文件
new HtmlWebPackPlugin ({
template:'./src/index.html' // 指定HTML模板文件,这里是./src/index.html
})
]
}
模式(mode):
production(生产模式):不设置默认为production,会对打包生成的文件进行代码压缩和性能优化,打包速度很慢,仅适合项目发布阶段使用
development(开发模式):不会对打包生成的文件进行代码压缩和性能优化,打包速度快,适用于开发阶段
module.exports={
mode:'production'
}
3_使用webpack-dev-server_哔哩哔哩_bilibili
《Webpack打包简单的js文件》
初始化一个新的npm
步骤一:
初始化npm项目,创建一个package.json文件
npm init -y
步骤二:
添加打包脚本:在scripts
部分添加一个命令来运行webpack
"scripts": {
"build": "webpack --config webpack.config.js"
},
步骤三:
安装Webpack
npm install --save-dev webpack webpack-cli
步骤四:
创建一个简单的Javascript文件,比如src/index.js
console.log('Hello,Webpack!');
步骤五:
配置Webpack,创建一个名为webpack.config.js
的文件
const path = require('path'); // 《引入path模块》如 join()、basename()、dirname()、extname() 等,
module.exports = {
mode: 'development', // 设置模式为开发模式,可以设置为 'production' 以启用压缩等优化
entry: './src/index.js', // 设置入口文件为 './src/index.js'
output: { //设置输出目录为 path.resolve(__dirname, 'dist')
path: path.resolve(__dirname, 'dist'), // 输出目录
filename: 'bundle.js' // 设置输出文件为 'bundle.js'
}
};
步骤六:
打包项目:
npm run build
《Webpack打包vue项目》
步骤一:
创建一个vue项目
vue create 项目名称
在项目里打开终端
步骤二:
初始化npm项目,创建一个package.json文件
npm init -y
步骤三:
修改package.json
"scripts": {
"build": "webpack --config webpack.config.js"
},
步骤四:
npm安装Webpack
npm install --save-dev webpack webpack-cli
步骤五:
在项目根目录下创建一个名为webpack.config.js
的文件
const { VueLoaderPlugin } = require('vue-loader'); // 引入 VueLoaderPlugin
const path = require('path'); // 引入路径模块
module.exports = {
mode: 'development', // 设置模式为开发模式,可以设置为 'production' 以+++++++++
//启用压缩等优化
entry: './src/main.js', // 设置入口文件为 './src/main.js'
output: {
// 设置输出目录为 path.resolve(__dirname, //'dist')
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js' // 设置输出文件为 'bundle.js'
},
// 配置模块加载规则
module: {
rules: [
{
// 匹配 .vue 文件,使用 vue-loader
test: /\.vue$/,// 文件后缀名的匹配规则
loader: 'vue-loader'// 定义了不同模块对应的 loader
},
{
// 匹配 .js 文件,使用 babel-loader,排除 node_modules
test: /\.js$/,// 文件后缀名的匹配规则
loader: 'babel-loader',// 定义了不同模块对应的 loader
exclude: /node_modules/ // 排除
},
{
// 匹配 .png 文件,使用 file-loader
test: /\.png$/,// 文件后缀名的匹配规则
use: 'file-loader'//定义了不同模块对应的 loader
},
{
// 匹配 .css 文件,使用 vue-style-loader 和 css-loader
test: /\.css$/,// 文件后缀名的匹配规则
// 定义了不同模块对应的 loader
use: [
'style-loader',
'css-loader'
]
}
]
},
// 配置插件
plugins: [
new VueLoaderPlugin() // 创建 VueLoaderPlugin 实例
],
// "resolve" 是 webpack 配置中的一个核心选项,用于配置模块解析的规则和设置模块解析的行为。它提供了一//系列的属性,包括 "alias"、"extensions" 等,用于指定模块的解析规则。
resolve: { //配置模块解析的规则和设置模块解析的行为
alias: { //表示别名配置的属性
'vue$': 'vue/dist/vue.esm.js' //为' vue别名设置解析路径为 'vue/dist/vue.esm.js'
},
//表示支持扩展名的属性
extensions: ['*', '.js', '.vue', '.json']
},
};
这个配置文件设定了入口文件、输出路径、模块解析规则以及插件使用
步骤六:
这行代码的意思是安装 Vue.js 的一个加载器库,名为 vue-loader,版本为 15.9.8。
npm install vue-loader@15.9.8
这行代码的意思是安装一个名为 @amap/amap-jsapi-loader
的库,并将其保存到 package.json
文件中
npm i @amap/amap-jsapi-loader --save
步骤七:
安装其他必要依赖,为了让Webpack能够理解vue-loader babel-loader file-loader style-loader css-loader
npm install --save-dev vue-loader babel-loader file-loader style-loader css-loader vue-template-compiler
步骤八:
使用Webpack打包的库默认会将模块暴露为全局变量,因此无法使用import语法引入
src------>views------>homeview.vue里的import导入的那句删掉
运行打包命令:
npm run build
常见的打包工具
- Webpack:功能强大的模块化打包工具,支持多种不同类型 的资源打包,灵活性强且社区活跃。缺点是配置较为复杂,需要学习成本较高。
- Vite:Vue.js 团队推出的下一代前端开发工具,具备快速启动 和热更新能力,支持 Vue.js、React、Preact、LitElement 等多种框架和库,性能优秀,但对于一些特别的需求可能不太适用。
- Parcel:一款零配置的打包工具 ,可以帮助开发者快速构建项目,但不如 Webpack 灵活,插件生态也相对较弱。
- Gulp:基于任务和管道的自动化构建工具,可以帮助操作和转换文件 ,并优化和压缩代码。但配置和编写任务的速度相对较慢。
- Grunt:与 Gulp 类似,也是基于任务配置的构建工具。但 Grunt 配置相对较为繁琐,速度较慢。
- Rollup:专门用于打包 JavaScript 库的工具 ,可以生成体积更小、加载更快的代码,但对于复杂的应用程序不够灵活。
需要学习成本较高。
-
Vite:Vue.js 团队推出的下一代前端开发工具,具备快速启动 和热更新能力,支持 Vue.js、React、Preact、LitElement 等多种框架和库,性能优秀,但对于一些特别的需求可能不太适用 。
-
Parcel:一款零配置的打包工具 ,可以帮助开发者快速构建项目,但不如 Webpack 灵活 ,插件生态也相对较弱。
-
Gulp:基于任务和管道的自动化构建工具,可以帮助操作和转换文件 ,并优化和压缩代码。但配置和编写任务的速度相对较慢 。
-
Grunt:与 Gulp 类似,也是基于任务配置的构建工具。但 Grunt 配置相对较为繁琐,速度较慢 。
-
Rollup:专门用于打包 JavaScript 库的工具 ,可以生成体积更小、加载更快的代码,但对于复杂的应用程序不够灵活。