1.webpack基本使用
创建行列表隔行变色项目
(1)新建空白目录,运行 npm init -y
命令 ,初始化包管理配置文件 package.json
(2)新建src源代码目录
(3)新建src -> index.html 首页
(4)初始化首页基本结构
(5)运行 npm install jquery -S
命令 安装 jquery
(6)通过模块化的形式,实现列表隔行变色效果
2.在项目中安装和配置webpack
(1)运行 npm install webpack@5.42.1 webpack-cli@4.7.2 -D
命令 安装 webpack相关的包
(2)在根目录中 创建名为 webpack.config.js 的 webpack 配置文件
(3)在webpack的配置文件中 初始化如下基本内容:
module.expoers={
mode:'development'
}
(4)在package.json 配置文件中的srcipts 节点下,新增dev脚本如下
"scripts":{
// 注意:通过 --model 指定的参数项,会覆盖 webpack.config.js 中的 model 选项。
"dev": "webpack serve --mode development",
"build": "webpack --mode production"
}
(5)在终端中运行 npm run dev
命令 启动webpack进行项目打包
3.配置打包的入口与出口
在 webpack 4.x 和 5.x 的版本中,有如下的默认约定:
① 默认的打包入口文件为 src -> index.js
② 默认的输出文件路径为 dist -> main.js
可以在 webpack.config.js 中修改打包的默认约定
const path = require('path')//导入node.js 中专门操作路径的模块
module.exports = {
mode:'development',
entry:path.join(__dirname,'./src/index.js'),//打包入口文件的路径
output:{
path:path.join(__dirname,'./dist'),//输出文件存放地址
filename:'main.js'//输出文件名称
}
}
4.配置webpack的自动打包功能
(1)运行 npm install webpack-dev-server@3.11.2 -D
命令 安装支持项目自动打包的工具
(2)修改 package.json->scripts 中的dev 命令如下
"dev": "webpack-dev-server" //如果不对尝试 "dev": "webpack serve"
(3)将src->index.html 中 scripts脚本的引用路径,修改为"/build.js" //进行了自定义打包入口出口的情况下进行(对应起来)
webpack-dev-server 生成到内存中的文件,默认放到了项目的根目录中,而且是虚拟的、不可见的。
//index.html中用/build.js引入 而非../dist/build.js
<script src="/build.js"></script>
(4)在终端中运行 npm run dev 命令 重新启动webpack进行项目打包
(5)在浏览器中访问 http://localhost:8080 地址,查看打包效果
5.配置生成预览页面
(1)运行npm install html-webpack-plugin@5.3.2 -D
命令,安装生成预览页面插件
(2)修改webpack.config.js 文件头部区域 添加如下配置信息
const path = require('path')
const HtmlPlugin=require('html-webpack-plugin')
const htmlPlugin=new HtmlPlugin({
template:'./src/index.html',//指定原文件存放路径
filename:'./index.html'//指定生成文件存放路径
})
(3)修改 webpack.config.js文件中向外暴露的配置对象,新增如下配置节点
module.exports={
mode:'development',
plugins:[htmlPlugin]//通过plugins节点 挂载插件实例对象
}
此时插件会在index.html底部自动注入<script src="/build.js"></script>
6.配置自动打包相关参数
方法一: 在package.json文件中进行配置
"scripts": {
//--open配置是否自动打开页面
//--host配置IP地址
//--port配置端口
//serve生成的文件放到内存中
"dev": "webpack serve --open --host 127.0.0.1 --port 8888"
},
方法二:在 webpack.config.js 配置文件中配置
devServer: {
open: true,//初次打包完成后,自动打开浏览器
host: '127.0.0.1',// 实时打包所使用的主机地址
port: 8080,//实时打包所使用的端口号
}
7、wabepack中的加载器
less-loader 打包处理 .less相关文件
sass-loader 打包处理 .scss相关文件
url-loader 打包处理 css中与url路径相关文件
babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法
打包处理css文件
(1)运行 npm i style-loader@3.0.0 css-loader@5.2.6 -D
命令,安装处理 css 文件的loader
(2)在 webpack.config.js 的 module -> rules 数组中,添加 如下内容
//所有第三方文件模块的匹配规则
module:{
rules:[
{test:/\.css$/,use: ['style-loader','css-loader'] }
]
}
其中,test 表示要匹配的文件类型, use 表示对于要调用的 loader
注意:
use 数组中指定的 loader 顺序是固定的
多个loader 的调用顺序: 从后往前调
打包less 文件
(1)运行 npm i less-loader@10.0.1 less@4.1.1 -D
命令
(2)在 webpack.config.js 的module -> rules 数组中,添加loader 规则如下:
{test:/\.less$/,use: ['style-loader','css-loader','less-loader'] }
打包处理scss 文件
(1)运行 npm i sass-loader node-sass -D
命令
(2)在 webpack.config.js 的module -> rules 数组中,添加loader 规则如下:
{test:/\.scss$/,use: ['style-loader','css-loader','sass-loader']}
配置postCSS自动添加css的兼容前缀
(1)运行npm i postcss-loader autoprefixer -D
命令
(2)在项目根目录中创建postcss 的配置文件 postcss.config.js,并初始化如下配置:
const autoprefixer = require ( ' autoprefixer')
//导入自动添加前缀的插件
module.exports = {
plugins: [ autoprefixer ] //挂载插件
}
在webpack.config.js 的module -> rules数组中,修改css 的loader 规则如下:
module : {
rules: [
{ test:/ \.ass$/,use: ['style-loader ' ,'css-loader ' ,'postcss-loader'] }
]
}
打包样式表中的图片和字体文件
(1)运行npm i url-loader@4.1.1 file-loader@6.2.0 -D
命令
(2)在 . webpack. config.js的module -> rules 数组中,添加 loader规则如下:
{
test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
//法1 use: 'url-loader?limit=22229'
//法2
use:{
loader:'url-loader',
options:{
limit=22229,
},
},
},
注意
其中?之后的是loader的参数项。
limit用来指定图片的大小,单位是字节(byte) ,只有小于limit大小的图片,才会被转为base64图片
打包处理js文件中的高级语法
(1)安装babel转换器相关的包: npm i babel-loader @babel/core @babel/ runtime -D
(2)安装babel语法插件相关的包: npm i @babel/preset-env @babel/ plugin-transform-runtime @babel/plugin-proposal-class-properties -D
(3)在项目根目录中, 创建babel 配置文件babel. config. js并初始化基本配置如下:
module.exports = {
presets: [' @babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime', ' @babel/plugin-proposalclass-properties']
}
(4)在 webpack.config.js的module -> rules 数组中,添加loader 规则如下:
// exclude为排除项,表示babel- loader不需要处理node_ modules中的js文件
{ test: /\.js$/, use: 'babel-loader', exclude: /node_ modules/ }
详情请参考 Babel 的官网 https://babeljs.io/docs/en/babel-plugin-proposal-decorator
8.Vue单文件组件
webpack中配置vue组件加载器
(1)运行 npm i vue-loader vue-template-compiler -D
命令
(2)在webpack.config.js中添加
const VueLoaderPlugin=require('vue-loader/lib/plugin')
(3)在webpack.config.js的module -> rules 数组中 ,添加vue-loader的配置如下
{test:/\.vue$/,loader:'vue-loader'}
(4)在webpack.config.js的plugins中添加插件
new VueLoaderPlugin()
在webpack项目中使用vue
(1)运行npm i vue -S
安装vue
(2)在src->index.js入口文件中,通过import Vue from 'vue'
来导入vue构造函数
(3)创建vue的实例对象 ,并指定要控制的el区域
(4)通过render 函数渲染App根组件
const vm=new Vue({
el:'#app',
render:h=>h(App)
})
9.webpack打包发布
在package.json中配置打包命令
"scripts": {
//注意:通过 --model 指定的参数项,会覆盖 webpack.config.js 中的 model 选项。
"build": "webpack --mode production"
},
把 JavaScript 文件统一生成到 js 目录中
在 webpack.config.js 配置文件的 output 节点中,进行如下的配置:
output:{
path:path.join(__dirname,'./dist'),//输出文件存放地址
//明确告诉webpack把生成的bundle.js 文件存放到dist目录下的js子目录中
filename:'js/build.js'//输出文件名称
},
把图片文件统一生成到 image 目录中
修改 webpack.config.js 中的 url-loader 配置项,新增 outputPath 选项即可指定图片文件的输出路径:
{
test:/\.jpg|png|gif$/,
use: {
loader: 'url-loader',
options: {
limit: 22228,
//明确指定把打包生成的图片文件,存储到dist 目录下的image 文件夹中
outputPath:'image',
},
},
}
自动清理 dist 目录下的旧文件
1.安装清理dist 目录的webpack插件
npm install clean-webpack-plugin@3.0.0 -D
2.按需导入插件、得到插件的构造函数之后,创建插件的实例对象
//webpackl.config.js中
const { CleanWebpackPlugin } = require('clean-webpack-plugin' )
const cleanPlugin = new CleanWebpackPlugin()
3.把创建的cleanPlugin 插件实例对象,挂载到plugins 节点中
//webpackl.config.js中
plugins: [htmlPlugin, cleanPlugin], //挂载插件
10.Source Map
开发环境下默认生成的 Source Map,记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。
解决默认 Source Map 的问题
开发环境下,推荐在 webpack.config.js =>module.exports中添加如下的配置,即可保证运行时报错的行数与源代码的行数保持一致:
devtool:' eval-source-map'
在生产环境下,如果只想定位报错的具体行数,且不想暴露源码。此时可以将 devtool 的值设置为:
devtool:'nosources-source-map'
在生产环境下,如果想在定位报错行数的同时,展示具体报错的源码。此时可以将 devtool 的值设置为source-map
devtool:'source-map'
Source Map的最佳实践
①开发环境下:
●建议把 devtool的值设置为eval-source-map
●好处: 可以精准定位到具体的错误行
②生产环境下:
●建议关闭 Source Map或将devtool的值设置为nosources-source-map
●好处: 防止源码泄露,提高网站的安全性