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的 ...
随机推荐
- Siamese网络
1. 对比损失函数(Contrastive Loss function) 孪生架构的目的不是对输入图像进行分类,而是区分它们.因此,分类损失函数(如交叉熵)不是最合适的选择,这种架构更适合 ...
- ELK架构设计
1.架构一 2.架构二 3.架构三 4.架构四 示例1: 示例二: ELKB简述 E:Elasticsearch 是一个基于Lucene的分布式搜索和分析引擎,具有高可伸缩.高可靠和易管理等特点.支持 ...
- Map network drive遇到报错“The network folder specified is currently mapped using a different user name and password”，怎么办？
--------------------------- Windows --------------------------- The network folder specified is curr ...
- Spark（四十四）：使用Java调用spark-submit.sh(支持 --deploy-mode client和cluster两种方式)并获取applicationId
之前也介绍过使用yarn api来submit spark任务,通过提交接口返回applicationId的用法,具体参考<Spark2.3(四十):如何使用java通过yarn api调度sp ...
- Android 使用easeui 3.0 集成环信即时通讯 我踩过的坑
0.关于注冊账号就不用说了. 1.创建应用.获取appkey 0.创建应用 1.填写信息 2.获取appkey 2.集成 0.首先新建一个project 1.这里主要介绍使用easeui来集成环信的即 ...
- SSE图像算法优化系列二十八：深度优化局部拉普拉斯金字塔滤波器。
基于局部拉普拉斯金字塔的Edge-aware滤波器是在2011年由Adobe 公司的研究员Sylvain Paris(大神级人物,写了很多文章)提出的,我在4年前曾经参考有关代码实现过这个算法,但是速 ...
- MyBatis中使用实体中使用枚举，数据库中使用数值
一.简介 本文主要讲MyBatis中使用实体中使用枚举,数据库中使用数值的解决方案.正常直接使用会报错,需要添加typeHandlers在mybatis-config.xml中. 二.解决方案 如下: ...
- 安装rcssmin方法
#安装rcssmin方法'''pip install wheelpip install rcssmin --install-option="--without-c-extensions&qu ...
- 并行排序ShearSort ---[MPI , c++]
思想: (1) 对于一个nxm的数组,使用N个work进行处理. (2) 先按行对数组进行升序和降序排序[由左至右],一般奇数序列work升序,偶数序号的work进行降序 (3)再按列对数组进行升序排 ...
- 51单片机stack堆栈
一般编译器的堆栈用于保存局部变量.函数的参数.函数的返回值.中断上下文信息等.但Keil对局部变量.函数参数预先分配空间(放在静态全局变量区),Keil的堆栈只是用于保存函数嵌套调用的PC.中断上下文 ...