webpack-vue的配置

回顾


public/index.html

webpack.config.js

cnpm i webpack webpack-cli clean-webpack-plugin html-webpack-plugin -D

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
    mode: 'development',
    entry: {
        app: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, './') + '/dist',
        // app.afae4ce7.js 中间的值自动生成
        filename: '[name].[hash:8].js'
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            hash: true,
            minify: {
                removeComments: true, // 去除注释
                removeEmptyElements: true, // 去除空标签
                removeAttributeQuotes: true, // 去除引号
                collapseWhitespace: true // 代码折叠
            }
        })
    ]
}

• 疑问：如果导出的js文件需要以绝对路径展示呢？
  
  

• 疑问：vue项目中运行 npm run serve 打开了一个服务器 localhost:8080,通过它即可访问我们的项目

webpack开发服务器配置

cnpm i webpack-dev-server -g
cnpm i webpack-dev-server -D

在命令行此时即可通过 webpack-dev-server 启动服务器，默认的端口号是8080

• 如果想要修改默认端口，运行成功自动打开默认的浏览器运行，设置服务器代理等等......

配置开发者服务器

webpack转换器

css、sass 、less、stylus、js高级语法、字体文件.....当做模块使用，需要使用到转换器

css文件

src/css/main.css

src/index.js

配置解析器选项

cnpm i style-loader css-loader -D

重启服务器查看效果

sass文件

src/scss/main.scss

src/index.js

配置解析器选项

cnpm i node-sass sass-loader -D

重启服务器查看效果

处理less文件

src/less/main.less

src/index.js

配置解析器选项

cnpm i less less-loader -D

重启服务器查看效果

stylus文件

src/stylus/main.stylus

src/index.js

配置解析器选项

cnpm i stylus stylus-loader -D

重启服务器查看效果

js高级语法

有些js的高级语法，留级无法直接解析，使用是需要对它进行转换

cnpm i @babel/core babel-loader -D

如果样式中含有背景图片

cnpm i file-loader url-loader -D

重启服务器查看效果

• 疑问： vue项目中可以省略后缀名，并且 @符号指向src文件目录

重启服务器查看效果

如果需要调试源代码

• vue
• react

vue 以及react 大量使用es6及其以上的语法，

在项目的根目录下创建文件 .babelrc,安装依赖，配置如下

cnpm i @babel/preset-env -D （js的高级语法）
cnpm i @babel/preset-react -D (开发react)

复制 webpack.config.js 以及 package.json 再加上.babelrc 文件至自己的项目文件，执行安装依赖，自己创建src文件夹 以及public文件夹，src文件加下入口文件为index.js，public文件夹下为index.html

webpack搭建vue项目

cnpm i vue -S

cnpm i vue-template-compiler vue-loader -D

• 添加vue为后缀的处理文件
  
  
  

src/App.vue

src/index.js

• 测试路由

cnpm i vue-router -S

src/router/index.js

import Vue from 'vue'import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        name: 'home',
        component: () => import('@/views/Home.vue')
    },
    {
        path: '/kind',
        name: 'kind',
        component: () => import('@/views/Kind.vue')
    },
    {
        path: '/cart',
        name: 'cart',
        component: () => import('@/views/Cart.vue')
    }
]
const router = new VueRouter({
    mode: 'hash',
    routes
})
export default router

views/Home.vue + Kind.vue + Cart.vue

src/index.js

src/App.vue

react 介绍

https://react.docschina.org/
用于构建用户界面的 JavaScript 库
react主要用于构建UI，MVC中的V（视图）
起源于Fackbook的内部项目（2013年5月开源）
react拥有高性能，代码逻辑简单

React特点

1.声明式的设计
react采用声明范式，可以轻松描述应用
2.高效
通过对DOM的模拟，最大限度的减少了于DOM的交互 --- 虚拟DOM
3.灵活
可以和已知库和第三方框架很好的整合
4.组件
提高代码的复用性
5.单向响应的数据流

webpack 构建react应用

cnpm i react react-dom -S

1.体验

src/index.js

2.代码说明

// react相关的基础库，必须引入，特别是写到组件的时候import React from 'react'// ReactDOM 以前是包含在React对象内部，后来分离了出来// 给DOM节点渲染数据，渲染视图使用 ---- React Dom操作import ReactDOM from 'react-dom'// ReactDOM.render() 给某个DOM节点渲染react的视图// react视图： react元素 / react组件// React视图 记住 只能有一个顶级标签// React 语法 符合 jsx 语法 - javascriptxml 语法 - 类xml语言 - 标签必须拥有顶级标签// ReactDOM.render(视图, DOM节点)
ReactDOM.render(<h1>hello react</h1>, document.getElementById('app'))

3.react元素

元素是构成react应用的最小单位，它用于描述屏幕上输出的内容

import React from 'react'import ReactDOM from 'react-dom'// react元素// 元素是构成react应用的最小单位，它用于描述屏幕上输出的内容const element = <h1>hello react 元素</h1>/**
* 元素
* 与浏览器的DOM元素不同
* react中的元素事实上是普通js对象
*
* ReactDOM可以确保浏览器DOM的数据内容于React元素保持一致
*/
ReactDOM.render(element, document.getElementById('app'))

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。

• 疑问：如何更新react元素渲染

再特定的时间中 重新渲染一个新的元素

import React from 'react'import ReactDOM from 'react-dom'// new Date().toLocalDateString()// new Date().toLocaleTimeString()// react 其实就是 js 加 {}// 更新元素 ---- 每隔一段时间 重新给某个dom节点渲染新的元素function getTime () {
    const element = <h1>现在是：{ new Date().toLocaleDateString() + new Date().toLocaleTimeString()} </h1>
    ReactDOM.render(element, document.getElementById('app'))
}
setInterval(getTime, 1000)

----------------------------文章来自吴大勋（大勋哥）