webpack是前端项目打包工具
安装
安装webpack前先安装node.js，
查看node版本node - v
1.创建空白目录，并运行npm init -y,初始化包管理配置文件package.json
2.新建src目录，存放源代码
3.新建src->index.html首页
4.初始化首页基本结构
5.运行npm i jquery -S命令，安装jquery`
导入jquery
在项目的js文件main.js
import $ from 'jquery'
存在兼容性问题，需转换代码后才能正常工作
在项目中安装配置webpack
1.运行 npm install webpack webpack-cli -D命令，安装webpack
2.在项目根目录中，创建名为webpack.config.js的webpack配置文件
3.在webpack的配置文件中，初始化如下基本配置:
module.exports = {
mode: 'development'
}
mode指出构建模式，有两种，production状态下会对代码压缩和混淆
4.在package.json配置文件中的scripts节点下，新增dev脚本如下：
"scripts": {
"dev": "webpack"
}
5.在终端运行npm run dev命令，启动webpack进行项目打包
webpack会自动创建dist目录，目录中有一个main.js文件，将该文件导入项目中
在中，引入打包好的js文件
配置打包的入口和出口
webpack 4.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/xx.js"),
//设置出口文件
output:{
//输出文件路径
path:path.join(__dirname,"./dist"),
//输出文件名
filename:"res.js"
}
}
设置webpack自动打包
(修改js文件后自动打包)
1.安装自动打包功能的包:webpack-dev-server
npm install webpack-dev-server -D
2.修改package.json中的dev指令如下：
"scripts":{
"dev":"webpack-dev-server"
}
3.将引入的js文件路径更改为：
4.运行npm run dev，进行打包
5.打开网址查看效果：http://localhost:8080
注意:
webpack-dev-server会启动一个实时打包的http服务器
webpack-dev-server打包生成的输出文件，默认放在项目的根目录中，而且是虚拟的
配置html-webpack-plugin生成预览页面
(访问服务器地址自动打开首页)
1.安装默认预览功能的包:html-webpack-plugin
npm install html-webpack-plugin -D
2.修改webpack.config.js文件，如下：
//导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require("html-webpack-plugin");
//创建插件对象
const htmlPlugin = new HtmlWebpackPlugin({
//设置生成预览页面的模板文件
template:"./src/index.html",
//设置生成的预览页面名称，该文件在内存中，在目录中不显示
filename:"index.html"
})
3.继续修改webpack.config.js文件，添加plugins信息：
module.exports = {
plugins:[ htmlPlugin ]//plugins是打包期间会用到的一些插件列表
}
配置打包完成后自动打开浏览器
更改package.json文件，修改dev命令
//--open打包完成后自动打开浏览器
//--host配置ip地址
//--post配置端口
"scripts":{
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
},
通过loader打包非js模块
webpack默认只打包.js后缀结尾的模块，其他模块通过loader加载器才可以正常打包
less-loader处理.less的相关文件
scss-loader处理.scss相关文件
url-loader可以打包css中与url路径相关的文件
打包css文件
1.运行 npm i style-loader css-loader -D命令，安装处理css文件的loader
2.在webpack.config.js的module->rules数组中，添加loader规则如下:
module.exports = {
//......
plugins:[ htmlPlugin ],
module : {
rules:[
//......
{ test:/\.css$/, use:['style-loader','css-loader'] }
]
}
}
test表示匹配文件类型,一个正则表达式，表示以css结尾的文件，use表示对应要调用的loader
注意:use数组中指定的loader顺序是固定的，多个loader的调用顺序是从后往前调用的
使用
在src目录新建css文件夹,新建样式文件style.css
在index.js文件,导入css文件
import './css/style.css'
打包处理less文件
1.运行npm i less-loader less -D命令
2.在webpack.config.js的module->rules数组中，添加loader规则如下:
module.exports = {
//......
module : {
rules:[
{ test:/\.less$/,use:['style-loader','css-loader','less-loader'] }
]
}
}
使用
在css目录下新建style.less文件，
在index.js导入style.less
import './css/style.less'
打包处理scss文件
1.运行npm i sass-loader node-sass -D命令
2.在webpack.config.js的module->rules数组中，添加loader规则如下:
module.exports = {
//......
module : {
rules:[
{ test:/\.scss$/,use:['style-loader','css-loader','sass-loader'] }
]
}
}
使用
在css目录下新建style.scss文件，
在index.js导入style.scss
import './css/style.scss'
配置postCSS自动添加css的兼容前缀
(解决不同浏览器器的兼容性问题)
1.运行npm i postcss-loader autoprefixer -D命令
2.在项目根目录中创建postcss的配置文件postcss.config.js，并初始化如下配置
const autoprefixer = require('autoprefixer')//导入自动添加前缀的组件
module.exports = {
plugins:[autoprefixer] //挂载插件
}
3.在webpack.config.js的module->rules数组中，添加loader规则如下:
module.exports = {
//......
module : {
rules:[
{ test:/\.css$/,use:['style-loader','css-loader','postcss-loader'] }
]
}
}
打包样式表中的图片和字体文件
1.运行npm i url-loader file-loader -D命令
2.在webpack.config.js的module->rules数组中，添加loader规则如下:
module.exports = {
//......
module : {
rules:[
{ test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
use:"url-loader?limit=16940" }
]
}
}
其中，?之后是loader的参数项，limit用来限制图片的大小，单位是字节，只有小于limit的图片才会被转为base64图片
使用:
在src目录下创建images文件夹
打包处理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.config.js文件
module.exports = {
presets:["@babel/preset-env"],
plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
}
4.配置webpack.config.js的module中的rules数组
rules:[
{ test:/\.js$/, use:"babel-loader", exclude:/node_modules/ }
]
exclude为排除项，表示babel-loader不需要处理node_modules中的js文件(node_modules为第三方js文件,babel只需处理用户自定义js文件)
在webpack项目中使用vue
注意:scoped防止组件样式之间冲突
用法:
在src下创建components目录，
在components目录创建组件App.vue(组件后缀是.vue)
webpack中配置vue组件的加载器
在index.js文件中导入vue单文件组件
import App from './components/App.vue'
1.运行npm i vue-loader vue-template-compiler -D
2.在webpack.config.js文件中，添加vue-loader的配置项如下:
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
//......
module : {
rules:[
{ test:/\.vue$/,loader:'vue-loader' }
]
},
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根组件
//index.js文件中
import Vue from 'vue'
import App from './components/App.vue'
const vm = new Vue(
{
el:'#app',
render:h=>h(App)
})
render函数指出渲染的app
在index.html中添加id为app的div
注意:webpack项目中只支持render函数渲染app
webpack打包发布
项目发布前对项目整体打包，可以通过package.json文件配置打包命令
在package.json 文件中配置webpack打包命令
该命令默认加载项目根目录中的webpack.config.js配置文件
"scripts":{
//用于打包的命令
"bulid": "webpack -p",
//用于开发调试的命令
"dev":"webpack-dev-server --open --host 127.0.0.1 --port 3000",
},
删除dist目录
运行npm run bulid
自动生成dist目录
注意:
如果图片大小超过{ test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use:"url-loader?limit=400000" }设置的limit，dist文件夹会出现该图片(即不压缩)，方法为调大limit或者减小图片体积