27.用webpack自搭react和vue框架
自己搭建react-app vue-cli
前置条件
cnpm i -D webpack webpack-cli webpack-dev-server
cnpm i -D css-loader style-loader url-loader file-loader
cnpm i -D html-webpack-plugin clean-webpack-plugin
webpack.config.js
webpack <==> webpack --config webpack.config.js
webpack --config vue.config.js
组成：
{
mode 开发、生产模式
loader
plugin
devServer ----> webpack-dev-server
}
react
cnpm i -S react react-dom
cnpm i -D babel-loader babel-core babel-preset-env babel-preset-react
预设：.babelrc { "presets": ["env", "react"] }
.babelrc：ES6解析的配置
实例:
+ public:
1[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>myapp</title>
</head>
<body>
<div id="app">app</div>
</body>
</html>
+ src:
1[App.js]
import React,{Component} from "react";
import img from "./asset/logo.png";
const Home = ()=> <div>Home</div>
export default class App extends Component{
//测试
constructor(...args){
super(...args);
this.state={count:100}
}
plus(){
this.setState({
count:this.state.count+1
})
}
render(){
return <div>
<Home />
{this.state.count}
<input onClick={this.plus.bind(this)} type="button" value="按钮"/>
<img src={img} />
</div>
}
}
2[index.js]
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App/>,document.getElementById("app"));
+ [.babelrc] ES6解析的配置
{ "presets": ["env", "react"] }
+ webpack.config.js 配置文件
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports ={
mode:"development",
entry:"./src/index.js",
output:{
path: path.resolve(__dirname, "./dist"),
filename: "app.bundle.js"
},
devServer:{
port:9000,
open:true,
},
plugins: [
new CleanWebpackPlugin(['./dist']),
new HtmlWebpackPlugin({
template:'./public/index.html',
filename: 'index.html'
})
],
module:{
rules:[
{test: /\.css$/, use: ['style-loader','css-loader']},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,//排除
use: 'babel-loader'
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
]
}
}
+ [package.json] 工程文件
{
"name": "react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.22.1",
"url-loader": "^1.1.0",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
},
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2"
}
}
vue
cnpm i -S vue
cnpm i -D babel-loader babel-core babel-preset-env
cnpm i -D vue-loader vue-template-compiler
预设：.babelrc { "presets": ["env"] }
实例
+ [public]
1[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>MyApp</title>
</head>
<body>
<div id="app">app</div>
</body>
</html>
+ [src]
1[main.js]
import Vue from "vue";
import App from "./App.vue";
new Vue({
render:h=>h(App)
}).$mount("#app")
2[App.vue]
<template>
<div id="app">
{{msg}}
</div>
</template>
<script>
export default{
name:"App",
data(){
return {
msg:"MyVue App"
}
}
}
</script>
<style>
#app{color:red;}
</style>
3[asset]=>logo.png
+ [.babelrc]
{ "presets": ["env"] }
+ [package.json]
{
"name": "vue",
"version": "1.0.0",
"description": "",
"main": "vue.config.js",
"scripts": {
"test": "cross-env NODE_ENV=development webpack --config test.js",
"serve": "cross-env NODE_ENV=development webpack-dev-server --progress --config vue.config.js",
"serve2": "webpack-dev-server --config vue.config.js",
"dev": "webpack --config vue.config.js",
"build": "set NODE_ENV=development && webpack --config vue.config.js",
"build2": "set NODE_ENV=production && webpack --config vue.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"clean-webpack-plugin": "^0.1.19",
"cross-env": "^5.2.0",
"css-loader": "^1.0.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.22.1",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^1.1.0",
"vue-loader": "^15.3.0",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
},
"dependencies": {
"vue": "^2.5.17"
}
}
+ [vue.config.js]
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
//const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
console.log("====================================");
console.log("process.env:",process.env.NODE_ENV);
console.log("====================================");
process.env.NODE_ENV = process.env.NODE_ENV||"production";
const isDev = process.env.NODE_ENV == "development"?true:false;
const mode = isDev?"development":"production";
function resolve (dir) {
return path.join(__dirname,dir)
}
module.exports={
mode,
//mode:"production",
entry:"./src/main.js",
output: {
path: path.resolve(__dirname, "./dist"),
filename: "main.bundle.js"
},
resolve:{
extensions: ['.js', '.vue', '.json',".css"],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
devServer:{
port:9000,
open:true,
},
plugins:[
//new UglifyJsPlugin(),
new webpack.DefinePlugin({
'process.env': {
//NODE_ENV: JSON.stringify(process.env.NODE_ENV)
NODE_ENV: JSON.stringify(mode)
}
}),
new CleanWebpackPlugin(['./dist']),
new HtmlWebpackPlugin({
template:'./public/index.html',
filename: 'index.html'
}),
new VueLoaderPlugin()
],
module:{
rules:[
{ test: /\.vue$/, loader: 'vue-loader' },
{ test: /\.css$/, use: ['style-loader','css-loader'] },
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,//排除
use: 'babel-loader'
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
]
}
}
cnpm i -D cross-env 兼容环境变量
DefinePlugin mode设置开发者还是生产版本
mode:production 会自动压缩代码
自己手动压缩代码：
mode:development
cnpm i -D uglifyjs-webpack-plugin
vue项目目录作用
1. build文件夹：打包配置的文件夹
1.1 webpack.base.conf.js ：打包的核心配置
1.2 build.js：构建生产版本，项目开发完成之后，通过build.js打包（加载base与prod，读取完之后通过webjpack命令对项目进行打包）
1.3 webpack.prod.conf.js：被build.js调用，webpack生产包的一个配置。基础代码都在1.1里面写，1.3是对1.1的扩展与补充
1.4 dev-client.js：热更新的插件，进行对客户端进行重载
1.5 dev-server.js：服务器。（背后的原理是启动一个express框架，这是一个基于node做的一个后端框架，后端框架可以在前端起一个服务）
1.6 vue-loader.conf.js：被base加载，
1.7 utils.js：工具类，公共的配置
2. config文件夹：打包的配置，webpack对应的配置
2.1 index.js：可与1.1合并成一个文件，但由于spa想做一个清晰的架构，因此把它们拆分开了
3. src文件夹：开发项目的源码
4. App.vue ： 入口组件
5. static文件夹：静态资源，图片
6. .babelrc：ES6解析的配置
7. .gitignore：忽略某个或一组文件git提交的一个配置
8. index.html：单页面的入口，通过webpack的打包构建之后，会对src源码进行编译，最终把它们插入到html里面来
9. package.json：基础配置，告诉我们项目的信息（版本号、项目姓名、依赖）
10. node_modulues：项目的安装依赖
27.用webpack自搭react和vue框架的更多相关文章
- WijmoJS V2019.0 Update2发布：再度增强 React 和 Vue 框架的组件功能
前端开发工具包 WijmoJS 在2019年的第二个主要版本 V2019.0 Update2 已经发布,本次发布涵盖了React 和 Vue 框架下 WijmoJS 前端组件的功能增强,并加入更为易用 ...
- Angular React 和 Vue的比较
Angular(1&2),React,Vue对比 一 数据流 数据绑定 Angular 使用双向绑定即:界面的操作能实时反映到数据,数据的变更能实时展现到界面. 实现原理: $scope变量中 ...
- react构建淘票票webapp，及react与vue的简单比较。
前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...
- Vue与React两个框架的区别对比
简单介绍 React--Facebook创建的JavaScript UI框架.它支撑着包括Instagram在内的大多数Facebook网站.React与当时流行的jQuery,Backbone.js ...
- 【转】前端框架天下三分：Angular React 和 Vue的比较
前端框架天下三分:Angular React 和 Vue的比较 原文链接:http://blog.csdn.net/haoshidai/article/details/52346865 前端这几年的技 ...
- 【repost】前端学习总结（二十三）——前端框架天下三分：Angular React 和 Vue的比较
目录(?)[+] 前端这几年的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等: 2.开发框架,如Ang ...
- react和vue的异同点
一.相似处1.使用Virtual DOM,都有jsx,性能好.2.提供了响应式(reactive)和可组合的视图组件(composable view component).3.将注意力集中保持在核心库 ...
- 手把手教你使用webpack搭建vue框架
我们在使用vue开发项目的时候,都是用vue-cli直接来搭建的.但是这是别人已经造好的轮子,我们既然要使用别人造好的轮子,我们总不能知其然而不知其所以然.所以呢,我这边文章就教你如何使用webpac ...
- react和vue对比
相同点 都支持服务器端渲染 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范 数据驱动视图 都有支持native的方案,React的 ...
随机推荐
- 09、高级编程之基于排序机制的wordcount程序
package sparkcore.java; import java.util.Arrays; import java.util.Iterator; import org.apache.spark. ...
- AndroidStudio中Handler类的内存溢出风险
package com.test.king.xmlparser; import android.annotation.SuppressLint; import android.app.Activity ...
- CTR预估算法之FM, FFM, DeepFM及实践
https://blog.csdn.net/john_xyz/article/details/78933253 目录目录CTR预估综述Factorization Machines(FM)算法原理代码实 ...
- SSE图像算法优化系列九：灵活运用SIMD指令16倍提升Sobel边缘检测的速度（4000*3000的24位图像时间由480ms降低到30ms）。
这半年多时间,基本都在折腾一些基本的优化,有很多都是十几年前的技术了,从随大流的角度来考虑,研究这些东西在很多人看来是浪费时间了,即不能赚钱,也对工作能力提升无啥帮助.可我觉得人类所谓的幸福,可以分为 ...
- Oracle 学习笔记 10 -- 约束
本次笔记来学习约束,约束在表中无处不在. 比如,表中的数据不同意为空或者是表中id为设为主键,都是约束. 约束分类: 主键约束(PRIMARY KEY):主键表示表中一个唯一的标识,本 ...
- 基本够用的php.ini配置文件（CentOS7）
[PHP] engine = On short_open_tag = Off asp_tags = Off precision = output_buffering = zlib.output_com ...
- Elasticsearch索引mapping的写入、查看与修改(转)
mapping的写入与查看 首先创建一个索引: curl -XPOST "http://127.0.0.1:9200/productindex" {"acknowledg ...
- Vue在线客服系统【开源项目】
1. 项目介绍 一个基于Vue2.0的在线客服系统. 技术栈包含:Vue.VueX.Vue Router.Element UI. 2. 功能介绍 项目包含了2个模块:客服端和访客端. 2.1 客服端功 ...
- 解决ubuntu系统中firefox无法播放网页版音乐播放器音乐
Reference: https://blog.csdn.net/h736131708/article/details/80775382 因为网页版的qq音乐或者网易云音乐都把音频换成了AAC格式,这 ...
- rabbitmq web管理
celery突然连接不上rabbitmq server,结果找半天发现是rabbitmq卡的不行... rabbitmq 设置web管理,添加用户 rabbitmqctl list_queues | ...