Webpack入门与基础使用
本文是我学习Webpack中所做笔记,可供快速入门和查阅使用,详细学习推荐黑马程序员的vue学习。
文章目录
基础概念
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。
Webpack解决兼容性问题以及对代码进行优化。
安装与配置
在配置webpack前我们需要进行以下操作
-
初始化包管理配置文件
npm init -y
-
安装jQuery并导入
npm i jquery -S
可以直接在js文件使用ES6导入语法导入jQuery
import $ from 'jquery'
-
安装webpack
npm i webpack webpack-cli -D
注:可自定义版本,如webpack@5.42.1
-D代表记录到devDependencies中,只在开发阶段使用
-S代表记录到Dependencies中,在开发和上线的阶段都会使用
-
在项目根目录,创建webpack配置文件
创建webpack.config.js文件,并初始化
module.exports = { modeL 'development' }
mode是对webpack模式进行设置,
development是开发模式,不进行压缩,打包后的文件大,但是处理速度快。
production是产品模式,会进行压缩,处理速度慢,但打包后文件小。
一般开发过程使用开发模式,上线之后使用产品模式。
-
新增脚本
在package.json的script节点新增脚本
"scripts": { "dev": "webpack serve", //可自定义脚本名 }
-
运行脚本
在终端输入命令运行
npm run dev
会产生一个dist文件夹,包含打包后的文件
指定路径
可对webpack打包文件和输出文件路径进行修改
默认打包文件入口为: ./src/index.js
默认输出文件路径为: ./dist.main.js
module.exports = {
//打包文件路径
entry: path.join(__dirname, './src/index.js'),
//输出文件路径
output: {
path: path.join(__dirname, 'dist'),
filename: 'js/bundle.js'
},
}
此处我将输出的js文件放到dist下的js文件夹下
插件
webpack-dev-server
解决每次修改完源代码之后都需手动打包(运行dev脚本)
每次修改源代码保存后,webpack-dev-server插件可将源文件自动编译后放到内存,大大提高开发效率
-
安装
npm i webpack-dev-server -D
-
配置文件
"dev": "webpack serve"
将package.json下script中的dev命令修改如上
-
运行脚本
npm run dev
-
访问网址
注意:此处html文件应引入内存里的js文件
html-webpack-plugin
可将src中的文件复制一份到根目录中,并在生成的页面自动注入js文件,这样我们不需再点击src进入页面
-
安装
npm i html-webpack-plugin -D
-
配置
再webpack.config.js文件中做如下配置
//导入html插件,得到构造函数 const HtmlPlugin = require('html-webpack-plugin') //创建html对象 const htmlPlugin = new HtmlPlugin({ template: './src/index.html', //源文件路径 filename: './index.html' //生成文件目录 }) module.exports = { plugins: [htmlPlugin] }
其他配置
可通过Webpack中的devServer节点配置这个插件
devServer: {
open: true, //运行服务器后,自动打开页面
host: '127.0.0.1', //打包的主机地址
port: '80' //端口号
}
注:每次修改配置文件后都需重启服务器
clean-webpack-plugin
每次打包自动删除原dist文件夹
-
安装
npm i clean-webpack-plugin -D
-
配置
在webpack.config.js文件中进行以下配置
const {CleanWebpackPlugin} = require('clean-webpack-plugin') module.exports = { plugins: [new CleanWebpackPlugin] }
loader
为什么需要loader?
webpack默认只能打包处理js模块,其他非js模块或js模块包含高级js语法需loader加载器进行处理
css-loader
-
安装
npm i style-loader css-loader -D
-
配置
在webpack.config.js中添加module,存放第三方文件模块匹配规则,并进行如下配置
module: { rules: [ {test: /\.css$/, use: ['style-loader', 'css-loader']}, ] }
注:loader会从后往前调用,如上文件先交给css-loader处理,然后交给style-loader,webpack会将结果合并到目标js文件。
less-loader
-
安装
npm i less-loader less -D
-
配置
如上对webpack.config.js文件进行配置
module: { rules: [ {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}, ] }
url-loader
处理图片文件
-
安装
npm i url-loader file-loader -D
-
配置
对webpack.config.js文件进行配置
module: { rules: [ {test: /\.jpg|png|gif$/, use: 'url-loader?limit=233&outputPath=images'} ] }
注:
limit参数指当文件大小limit限制,这里为233字节,就会转换为base64格式
Path参数为图片文件打包后位置,当前为dist的images文件夹中
babel-loader
处理部分js高级语法
-
安装
npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D
-
配置
如上对webpack.config.js文件进行配置
module: { rules: [ {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/} ] }
exclude代表被除外的
在根目录创建babel.config.js配置文件,并做如下配置
module.exports = {
plugins: [['@babel/plugin-proposal-decorators', { legacy: true}]]
}
最后打包
在package.json文件新增build,如下
"scripts": {
"dev": "webpack serve", //可自定义脚本名
"build": "webpack --mode production" 执行开发模式webpack
}
source-map
一个信息文件,存储着源代码转换前的位置信息,可以理解为打包前后代码位置的映射关系
利用source-map,可以实现当允许时报错时的行号为源代码中的行号,方便调试代码
配置方式:在webpack.config.js中做如下配置
module.exports = {
devtool: 'eval-source-map',
}
注:devtool也可设置为nosource-source-map,将只定位行数,不展示源码
webpack @
一般webpack中的@代表src文件夹路径,在webpack.config.js文件中可对其进行配置
resolve: {
alias: {
'@': path.join(__dirname, './src/')
}
}