Vue之Webpack入门及学习总结

babel 是一个通用的多功能 JavaScript 编译器，但与一般编译器不同的是它只是把同种语言的高版本规则转换为低版本规则，而不是输出另一种低级机器可识别的代码，并且在依赖不同的拓展插件下可用于不同形式的静态分析。（静态分析：指在不需要执行代码的前提下对代码进行分析以及相应处理的一个过程，主要应用于语法检查、编译、代码高亮、代码转换、优化、压缩等等）

安装babel

//打开终端，输入命令
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

//安装完毕之后，再次输入命令安装
npm install --save @babel/polyfill

创建babel.config.js

const presets = [
            ["@babel/env",{
                targets:{
                    //最低支持的浏览器版本
                    edge:"17",
                    firefox:"60",
                    chrome:"67",
                    safari:"11.1"
                }
            }]
        ]

export导出/暴露

//export default默认导出，即外部JS文件import（引入）后可以使用的属性
// export default只能到处一次
export default {
  //属性
  a,
  //方法
  show
}
//按需要暴露（导出），不限制导出次数，引入名字需要跟暴露一样
export let s1 = 's1'
export let s2 = 's2'
export function say() {
  console.log('say')
}

import导入

//默认导入，默认导入无法获取按需暴露的内容
import m1 from './m1.js'

// 按需导入，名字要与导入文件内暴露的名字一样
//s2 as ss2中s2是原名字，通过as改别名
import m1, { s1, s2 as ss2, say } from './m1.js'

//如果导出文件没有默认导出，或者按需导出可以直接import执行js文件内容
import './m1.js'

使用npx执行js文件

npx babel-node ./index.js

webpack基本使用

//初始化文件夹，会生成package.json文件
npm init -y

//创建src文件夹，存放代码文件

//这里举个例子，引入jquery，实际看需求，
//此时项目运行会有错误，因为import $ from "jquery";这句代码属于ES6的新语法代码，在浏览器中可能会存在兼容性问题
所以我们需要webpack来帮助我们解决这个问题
import $ from "jquery";


//安装webpack和webpack-cli
npm install webpack webpack-cli -D

//创建webpack.config.js 的配置文件用来配置webpack
module.exports = {
        //可以设置为development(开发模式)，production(发布模式)
        mode:"development"
    }

//修改项目中的package.json文件添加运行脚本dev
"scripts":{
        "dev":"webpack"
    }

//编译，得到转换低版本的js文件，默认的dist路径中生成的main.js文件，将其引入到html页面中。
npm run dev

设置webpack的打包入口/出口 （默认会将dist/main.js 作为默认的打包输出js文件）

//webpack.config.js内设置
module.exports = {
  //需要打包文件信息
  entry: path.join(__dirname, './src/index.js'),
  //输出打包信息
  output: {
    path: path.join(__dirname, './dist'), // 输出文件的存放路径
    filename: 'bundle.js' // 输出文件的名称
  },
}

设置webpack的自动打包

//第一步
npm install webpack-dev-server --D

//第二部，修改package.json中的dev指令如下：
"scripts":{
                "dev":"webpack-dev-server"
}

//第三步，将引入的js文件路径更改为：（根目录下）
//这里的bundle.js是自己在webpack.config.js配置的输出文件名！
<script src="/bundle.js"></script>

//第四步 重新打包
npm run dev

//第五步 登录网址查看效果
http://localhost:8081/

配置html-webpack-plugin

因为自动打包每次都要访问 http://localhost:8081/还有找到对应的index.html，比较繁琐。所以配置html-webpack-plugin 后访问 http://localhost:8081/可以直接打开html文件。

//第一步
npm install html-webpack-plugin -D

//第二部在webpack.config.js文件引入包
const HtmlWebpackPlugin = require('html-webpack-plugin')
//第三步配置
const htmlPlguin = new HtmlWebpackPlugin({
    //设置生成预览页面的模板文件（需要打开的html文件模板/源文件，但打开的不是这个文件）
    template: './src/index.html',
    //设置生成的预览页面名称（另外生成一个template配置的html文件，在根目录，用于自动打开）
    filename: 'index.html'
})

//第四步导出(暴露)
module.exports = {
    plugins: [htmlPlguin],
}

测试时报错，引入后解决（查询说是webpack全局问题？待验证，可能是webpack安装了全局）
npm link webpack --save-dev

配置自动打包相关参数 (自动打包后vscode可以直接弹出页面)

//在package.json文件中配置
//自动打包后自动弹出网页
"dev": "webpack-dev-server --open",

//host设置IP，port设置端口
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888",

webpack中的加载器

通过loader打包非js模块：默认情况下，webpack只能打包js文件，如果想要打包非js文件，需要调用loader加载器才能打包 loader加载器包含：

1).less-loader

2).sass-loader

3).url-loader:打包处理css中与url路径有关的文件

4).babel-loader:处理高级js语法的加载器

5).postcss-loader

6).css-loader,style-loader

安装style-loader,css-loader来处理样式文件

没有安装前用webpack打包css文件会报错！

import './css/index.css'

//第一步
npm install style-loader css-loader -D

//第二步 配置规则：更改webpack.config.js的module中的rules数组
 module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                }
            ]
        }

安装less,less-loader处理less文件

//第一步
npm install less-loader less -D

//第二步 导入less文件
import './css/index.less'

//第三步
        module : {
            rules:[
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                }
            ]
        }

安装sass-loader,node-sass处理less文件

//导入文件
import './css/index.scss'

//下载包
npm install sass-loader node-sass -D

//配置文件
 module : {
            rules:[
                {
                    test:/\.scss$/,
                    use:['style-loader','css-loader','sass-loader']
                }
            ]
        }

安装post-css自动添加css的兼容性前缀（-ie-,-webkit-），即自动给那些有兼容性问题的样式自动加前缀

//下载包
npm install postcss-loader autoprefixer -D

//在项目根目录创建并配置postcss.config.js文件，内容如下；
const autoprefixer = require("autoprefixer");
module.exports = {
    plugins:[ autoprefixer ]
}

//配置规则：更改webpack.config.js的module中的rules数组，在css配置项加'postcss-loader'
use:['style-loader','css-loader','postcss-loader']

打包样式表中的图片以及字体文件

在样式表css中有时候会设置背景图片和设置字体文件，一样需要loader进行处理使用url-loader和file-loader来处理打包图片文件以及字体文件

//下载包
npm install url-loader file-loader -D

//配置webpack.config.js的module中的规则
{
                //这里配置文件类型
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数，只有小于limit值的图片，才会转换为base64图片
                use:"url-loader?limit=16940"
            }

打包js文件中的高级语法

在编写js的时候，有时候我们会使用高版本的js语法,有可能这些高版本的语法不被兼容，我们需要将之打包为兼容性的js代码,所以需要安装babel系列的包

//安装babel转换器
npm install babel-loader @babel/core @babel/runtime -D

//安装babel语法插件包
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

//在项目根目录创建并配置babel.config.js文件，内容如下；
module.exports = {
        presets:["@babel/preset-env"],
        plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
    }

//配置规则：更改webpack.config.js的module中的rules数组
{
                test:/\.js$/,
                use:"babel-loader",
                //exclude为排除项，意思是不要处理node_modules中的js文件
                exclude:/node_modules/
            }

.vue单文件组件

传统Vue组件的缺陷： 全局定义的组件不能重名，字符串模板缺乏语法高亮，不支持css(当html和js组件化时，css没有参与其中) 没有构建步骤限制，只能使用H5和ES5，不能使用预处理器（babel）

解决方案： 使用Vue单文件组件，每个单文件组件的后缀名都是.vue 每一个Vue单文件组件都由三部分组成

1).template组件组成的模板区域

2).script组成的业务逻辑区域

3).style样式区域

<template>
    <div>
        <h1>你好vue</h1>
    </div>
</template>

<script>
export default {
    data(){
        return {};
    }
}
</script>

<style scoped>
    h1{
        color: red
    }
</style>

配置.vue文件的加载器 

//下载包
npm install vue-loader vue-template-compiler -D

//配置规则：更改webpack.config.js的module中的rules数组
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const vuePlugin = new VueLoaderPlugin();

module : {
            rules:[
                { 
                    test:/\.vue$/,
                    loader:"vue-loader",
                 }
             ]
          }

在webpack中使用vue 

//下载包
npm install vue -S

//在js文件中引入
import Vue from 'vue'
//导入vue单文件
import Vuw from 'components/app.vue'

const vm=new Vue({
    el:'#app',
    //渲染指定组件
    render:h=>h(app)
})

//vue操作区域，在html页面中
<div id="app"></div>

使用webpack打包发布项目 

//配置package.json
 "scripts":{
        "build":"webpack -p"
    }

//运行打包命令
npm run build

//生成的dist文件夹就是打包出来的文件夹

Vue脚手架  Vue脚手架可以快速生成Vue项目基础的架构。

使用命令创建Vue项目 

//安装3.x版本的Vue脚手架：
npm install -g @vue/cli

//使用命令创建Vue项目
vue create my-project

//选择Manually select features(选择特性以创建项目)

//勾选特性可以用空格进行勾选。

Use history mode for router? (Requires proper server setup for index fallback in production)
//是否选用历史模式的路由：n

//ESLint选择：ESLint + Standard config

//何时进行ESLint语法校验：Lint on save

//babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置)

//是否保存为模板：n

//切换路径
$ cd my-project
//运行
$ npm run serve
//得到地址
http://localhost:8081/

基于ui界面创建Vue项目 

//执行命令后打开操作页面
vue ui

基于2.x的旧模板，创建Vue项目 

//下载包
npm install -g @vue/cli-init
//创建
vue init webpack my-project

分析Vue脚手架生成的项目结构 

node_modules:依赖包目录

public：静态资源目录

src：源码目录

src/assets:资源目录

src/components：组件目录

src/views:视图组件目录

src/App.vue:根组件

src/main.js:入口js

src/router.js:路由js

babel.config.js:babel配置文件

Vue脚手架的自定义配置 

通过 package.json 进行配置 [不推荐使用]

  "vue":{
            "devServer":{
                "port":"9990",
                "open":true
            }
        }

通过单独的配置文件进行配置，创建vue.config.js 

 module.exports = {
            devServer:{
                port:8888,
                open:true
            }
        }

Element-UI的基本使用 

//下载包
npm install element-ui -S
//导入组件库
import ElementUI from "element-ui";
//导入相关样式
import "element-ui/lib/theme-chalk/index.css";
//配置vue插件
Vue.use(ElementUI)

//配置完成后就可以在element-ui官网复制代码到xxx.vue单文件组件中

基于图形化界面自动安装

//通过 vue ui 启动界面
//在插件面板下载 vue-cli-plugin-element
//用vscode打开项目，在app.vue内添加element-ui官网案例代码即可看到效果

链接: https://fly63.com/article/detial/7604

Vue之Webpack入门及学习总结

程序员的年总结，最大的遗憾竟然是没有女朋友！

webpack常用加载器、插件总结

Vue中filters，computed， methods， watch的总结

前端es6知识点总结

Vue中容易被忽视的知识点