Webpack

(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文件)的工具。它们通常用于将多个文件或模块合并成少量的打包文件,以优化加载速度和性能

常见的打包工具

  1. Webpack:广泛用于复杂应用的模块打包。
  2. Vite:现代化开发服务器,利用原生ESM,快速重载。
  3. Parcel:零配置打包工具,易于使用,适合小到中型项目。
  4. Rollup:更适合于库和框架的打包,支持ES模块。
  5. Browserify :允许在浏览器中使用Node.js风格的require

为什么要用Webpack:

  1. 模块化支持:管理和打包项目的多个模块和依赖。 --为管理模块提出的方法
  2. 性能优化:通过代码拆分和懒加载,提高加载速度和性能。 --提高加载速度
  3. 插件系统:提供丰富的插件,扩展功能和自定义构建过程。 --插件扩展广泛
  4. 开发效率:热模块替换等特性提升开发体验。 --开发效率提高
  5. 广泛兼容:支持多种前端资源和编程语言。 --兼容性强

优点:

优点:
  • 高度可配置:提供丰富的配置选项,适用于复杂和高度定制的项目。 --配置丰富
  • 强大的插件生态:有大量社区支持的插件,可以扩展其功能。 --插件扩展广泛
  • 广泛的兼容性:支持多种模块格式和第三方库集成。 --兼容性强
  • 优化策略:如代码拆分和懒加载,有利于性能优化。 --性能优化

Webpack核心及概念:

Webpack 是代码编译工具,有

1.入口(entry):指定Webpack开始构建内部依赖图的起始点。

2.输出(output):定义Webpack打包后的资源bundles放在哪里,以及如何命名。

3.Loaders:允许Webpack处理非JavaScript文件,并将它们转换为模块。

4.插件(plugins):扩展Webpack功能的组件,用于执行各种各样的任务。

5.模式(mode):设置developmentproduction来启用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

常见的打包工具

  1. Webpack:功能强大的模块化打包工具,支持多种不同类型 的资源打包,灵活性强且社区活跃。缺点是配置较为复杂,需要学习成本较高。
  2. Vite:Vue.js 团队推出的下一代前端开发工具,具备快速启动 和热更新能力,支持 Vue.js、React、Preact、LitElement 等多种框架和库,性能优秀,但对于一些特别的需求可能不太适用
  3. Parcel:一款零配置的打包工具 ,可以帮助开发者快速构建项目,但不如 Webpack 灵活,插件生态也相对较弱。
  4. Gulp:基于任务和管道的自动化构建工具,可以帮助操作和转换文件 ,并优化和压缩代码。但配置和编写任务的速度相对较慢
  5. Grunt:与 Gulp 类似,也是基于任务配置的构建工具。但 Grunt 配置相对较为繁琐,速度较慢
  6. Rollup:专门用于打包 JavaScript 库的工具 ,可以生成体积更小、加载更快的代码,但对于复杂的应用程序不够灵活

需要学习成本较高。

  1. Vite:Vue.js 团队推出的下一代前端开发工具,具备快速启动 和热更新能力,支持 Vue.js、React、Preact、LitElement 等多种框架和库,性能优秀,但对于一些特别的需求可能不太适用

  2. Parcel:一款零配置的打包工具 ,可以帮助开发者快速构建项目,但不如 Webpack 灵活 ,插件生态也相对较弱。

  3. Gulp:基于任务和管道的自动化构建工具,可以帮助操作和转换文件 ,并优化和压缩代码。但配置和编写任务的速度相对较慢

  4. Grunt:与 Gulp 类似,也是基于任务配置的构建工具。但 Grunt 配置相对较为繁琐,速度较慢

  5. Rollup:专门用于打包 JavaScript 库的工具 ,可以生成体积更小、加载更快的代码,但对于复杂的应用程序不够灵活

相关推荐
彭世瑜5 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4046 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish6 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five7 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序7 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫5418 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
酷酷的威朗普9 分钟前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
前端每日三省9 分钟前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript
小刺猬_98510 分钟前
(超详细)数组方法 ——— splice( )
前端·javascript·typescript
契机再现11 分钟前
babel与AST
javascript·webpack·typescript