webpack学习
本文是针对webpack新手而言的,对于一些webpack初期会踩的一些坑的总结。
预备工作
npm i webpack -s 安装webpack
使用命令 webpack 源文件地址 处理文件存放路径和名称
兼容性问题
webpack 在4.0之后需要安装webpack-cli
“webpack”: “^4.41.5”,
“webpack-cli”: “^3.3.10”,
“webpack-dev-server”: “^3.10.1”
0.运行 npm init -y 命令,初始化包管理配置文件 package.json webpack.config.js 是webpack配置文件
module.exports={
mode:'development' //mode用来指定构建模式
}
// 在package.json配置文件中的scripts 节点下,新增dev脚本
"scripts":{
"dev":"webpack" //script节点下脚本,可以通过npm run执行
}
1.如果要修改打包的入口和出口,可以在webpack.config.js中添加如下配置
const path=require('path') //导入nodejs中专门操作路径的模块
module.exports ={
entry:path.join(_dirname,'./src/index.js'), //打包入口文件的路径
output:{
path:path.join(_dirname,'./dist'), //输出文件的路径
filename:'bundle.js' //输出文件的名称
}
}
自动打包功能
0.运行 npm install webpack-dev-server -D 命令,安装支持项目自动打包的工具
1.修改package.json -> scripts 中的dev 命令如下
"scripts":{
"dev":"webpack-dev-server"
}
2.将src-> index.html中,script脚本的引用路径,修改为 “/bundle.js”
3.运行npm run dev 命令,进行重新打包
4.在浏览器中访问 http://localhost:8080 查看自动打包功能
预览页面 Html-webpack-plugin
0.运行 npm install html-webpack-plugin -D 命令,安装生成预览页面插件
1.修改webpack.config.js 文件头部区域,添加如下配置信息
//导入生成预览页面的插件,得到一个构造函数
const HtmlWebpackPlugin =require('html-webpack-plugin')
const htmlPlugin =new HtmlWebpackPlugin({ //创建插件的实例对象
template:path.join(__dirname,'./src/index.html')
template:'./src/index.html', //指定要用到的模板文件
filename:'index.html' //指定生成的文件的名称,改文件存在于内存中,在目录中不显示
})
2.修改 webpack.config.js 文件中向外暴露的配置对象, 新增如下配置节点
module.exports ={
plugin:[htmlPlugin] //plugin数组是webpack打包期间会用到的一些插件列表
}
配置自动打包相关的参数
//package.json中配置
// --open 打包完成后自动打开浏览器页面
// --host 配置ip地址
// --port 配置端口
"scripts":{
"dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
}
webpack中的加载器
通过loader打包非js模块
0.在实际开发中,webpack默认只能打包处理以_.js__后缀名的模块,其它非.js后缀名结尾的模块
webpack默认处理不了,需要调用loader加载器才能正常打包loader加载器可以协助webpack打包处理特定的文件模块
- less-loader 可打包处理 .less 相关的文件
- sass-loader 可打包处理 .scss 相关的文件
- url-loader 可打包处理 css 中与 url 路径相关的文件
打包处理css文件
运行 npm i style-loader css-loader -D 命令,安装处理css文件的loader
在webpack.config.js 的 module ->rules 数组中, 添加loader规则
//所有第三方文件模板的匹配规则
module:{
rules:[
{test:/\.css$/ , use: ['style-loader' , 'css-loader']}
// test 表示匹配的文件类型, use 表示对应要调用的loader
// 注意:use 数组中指定的loader 顺序是固定的!!!
// 多个loader 的调用顺序是 从后往前调用
]
}
打包处理less文件
运行 npm i less-loader less -D 命令
在webpack.config.js 的 module ->rules 数组中, 添加loader规则
//所有第三方文件模板的匹配规则
module:{
rules:[
{test:/\.less$/ , use: ['style-loader' , 'css-loader' ,'less-loader']}
]
}
打包处理scss文件
运行 npm i sass-loader node-sass -D命令
在webpack.config.js 的 module ->rules 数组中, 添加loader规则
//所有第三方文件模板的匹配规则
module:{
rules:[
{test:/\.scss$/ , use: ['style-loader' , 'css-loader' ,'sass-loader']}
]
}
配置postCss 自动添加css 的兼容前缀 (解决各类浏览器兼容性问题)
运行 npm i postcss-loader autoprefixer -D命令
在项目根目录中创建 postcss 的配置文件 postcss.config.js ,并初始化如下配置
const autoprefixer =require('autoprefixer') //导入自动添加兼容前缀插件
module.exports={
plugins:[autoprefixer] //挂载插件
}
在webpack.config.js 的module -> rules 数组中,修改css的loader
{test:/\.css$/ , use: ['style-loader' , 'css-loader' , 'postcss-loader']}
打包样式表中的图片和字体文件
运行 npm i url-loader file-loader -D 命令
在webpack.config.js 的 module ->rules 数组中, 添加loader规则
rules:[
{
test :/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
use :['url-loader?limit =16940']
//其中 ? 之后的是 loader 的参数项
// limit 用来指定图片的大 , 单位是字节(byte), 只有小于limit大小的图片,才会被转为base64图片
}
]
打包处理js文件中的高级语法
安装babel-loader @7
安装babel 转化器相关的包, npm i bable-loader @babel/core @babel/runtime -D [ 或者安装 npm i babel-loader@7 babel-core babel-plugin-transform-runtime -D]
安装babel语法插件相关的包,npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D [或者安装 npm i babel-preset-env babel-preset-stage-0 -D]
在项目根目录中, 创建babel配置文件 babel.config.js 并初始化基本配置如下
module.exports={
presets:['@babel/preset-env'],
plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}
在根目录下创建 .babelrc 的配置文件 ,这个配置文件属于 JSON文件
//配置如下
{
"presets":["env","stage-0"],
"plugins":["transform-runtime"]
}
在webpack.config.js 的module ->rules 数组中, 添加loader规则
//exclude 为排除项 , 表示babel-loader 不需要处理 node_modules 中的js文件
{test:/\.js$/ ,use: 'babel-loader' ,exclude :/node_modules/}
Vue 单文件组件
传统组件的问题和解决方案
问题:
0.全局定义的组件必须保证组件的名称不重复
1.字符串模板缺乏语法高亮,在 Html 有多行的时候,需要用到 \ 转义
2.不支持 css 意味着当 html 和 javascript 组件化, css 明显被遗漏
3.没有构建步骤限制,只能使用 Html 和 ES5 ,而不能用预处理器 (babel)
解决方案
针对传统组件的问题,vue 提供了一个解决方案 —使用VUe 单文件组件
单文件的组件的构成
+ template 组件的模板区域
- script 业务逻辑区域
+ style 样式区域
webpack 中配置 vue 组件的加载器
运行 npm i vue-loader vue-template-compiler -D 命令
在 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
运行 npm i vue -s 安装 vue
在 src ->index.js 入口文件中, 通过 import Vue from ‘vue’ 来导入 vue 构造函数
创建vue 的实例对象 ,并指定要控制的 el 区域
通过 render 函数 渲染 App 根组件
import Vue from 'vue' //1.导入 vue 构造函数
import App from './components/App.vue' //2.导入App根组件
const vm = new Vue({
el:'',
// render:function(createElements){return createElements(login)}
//render:createElements=>createElements(login)
render:h=>h(App) //通过 render 函数,把指定的组件渲染到 el 区域中 ,会把所有的内容清空覆盖
})
vue引用注意事项
在webpack中,使用import Vue from ‘vue’ , 导入的vue构造函数,功能不完不完整,
解决方法
//通过导入文件路径
import Vue from '../node_modules/vue/dist/vue.js'
//通过packjson.js文件中,main属性指定 vue.js 文件
"main":'vue.js'
//在webpack.config.js配置文件中添加 resolve 属性
resolve:{
alias:{
'vue$':'vue/dist/vue.js'
}
}
vue文件查找规则
0.找项目根目录中有没有 node_modules 的文件夹
1.在node_modules 中根据包名,找到对应的 vue 文件夹
2.在 vue 文件夹中,找 package.json 的包配置文件
3.在package.json 文件中,查找 main 属性 [main属性指定了这个包在被加载时候的入口文件]
webpack 打包发布
上线之前需要通过 webpack将应用整体打包, 可以通过对package.json 文件配置打包命令
可在终端运行 npm run build 打包
//将命令默认加载项目根目录中的 webpack.config.js 配置文件
"scripts" :{
//用于打包的命令
"build" :"webpack -p",
//用于开发调试的命令
"dev" :"webpack-dev-server --open --host 127.0.0.1 --prot 8888"
}
Vue 脚手架的基本用法
vue 脚手架用于快速生成 vue 项目基础架构
安装3.x版本的 vue 脚手架
npm install -g @vue/cli
vue-cli 创建 vue 项目
//1.基于 交互式命令行的方式,创建新版 vue 项目
vue create my-project
//2.基于 图形化界面的方式
vue ui
//3.基于2.x的旧模板,创建旧版项目
npm i -g @vue/cli-init
vue init webpack my-project
vue-router的使用方法
必须先导入 vue ,然后在导入 vue-router
import Vue from ‘vue’
import VueRouter from ‘vue-router’必须通过 Vue.use() 明确的安装路由功能
vue.use(VueRouter)
//通过 render 函数,把指定的组件渲染到 el 区域中 ,会把所有的内容清空覆盖
//render:createElements=>createElements(login)
!!所以需要把所有的 router 放入在 render 属性暴露的组件之中
使用mint-ui组件
导入全部组件文件代码过大
//导入所有组件
import Vue from ‘vue’
import MintUI from ‘mint-ui’
import ‘mint-ui/lib/style.css’
import App from ‘./App.vue’
Vue.use(MintUI)
new Vue({
el: '#app',
components: { App }
})
借助于babel-plugin-component,只引入需要的组件
npm i bael-plugin-component然后将babel.config.js(.babelrc)配置文件 修改为
[
"presets":[
["es2015",{"modules":false}]
],
""plugins:[["component",[
{
"libraryName":"mint-ui",
"style":true
}
]]]
]
使用MUI 代码片段
mui和bootstrap类似,不用用 npm 下载
使用moment.js 初始化时间
npm i moment -s
import moment from 'moment'
Vue.filter('dataFormat',function(dataStr,pattern='YYYY-MM-DD HH:mm:ss'){
moment(dataStr).format(pattern)
})
bebel严格模式下的处理
babel严格模式下可能会造成路径的读取错误
解决方法:
npm install babel-plugin-transform-remove-strict-mode
在.bablerc文件中加入"plugins": ["transform-remove-strict-mode"]
使用vue-preview插件实现缩略图
网址 https://github.com/LS1231/vue-preview
npm i vue-preview -S
import VuePreview from 'vue-preview'
Vue.use(VuePreview)
//其中 img 里的class属性不能删除
<template>
<img class='preview-img' v-for='(item,index) in list' :src='item.src' height='100' @click='$preview.open(index,list)'>
</template>
<script>
export default{
data(){
return {
list:[{
src:'http://placekitten.com/600/400',
w:600,
h400
},{
src:'http://placekitten.com/600/400',
w:600,
h400
}]
}
}
}
</script>