Vue之Webpack入门及学习总结

时间 2020-02-27

标签 vue webpack 入门学习总结繁體版

原文原文链接

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

安装babel css

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

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

建立babel.config.js html

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

export导出/暴露vue

//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导入java

//默认导入，默认导入没法获取按需暴露的内容
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文件 node

npx babel-node ./index.js

Webpack基本使用jquery

//初始化文件夹，会生成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

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

设置webpack的自动打包 web

//第一步
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 chrome

由于自动打包每次都要访问 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官网案例代码便可看到效果