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的 ...
随机推荐
- c++中transform()函数和find()函数的使用方法。
1.transform函数的使用 transform在指定的范围内应用于给定的操作,并将结果存储在指定的另一个范围内.transform函数包含在<algorithm>头文件中. 以下是s ...
- Centos yum国内源及配置含义
Centos yum源的位置: /etc/yum.repos.d,可以通过配置文件/etc/yum.conf指定其他位置 主要的yum源种类:前两个是必须的,不然yum安装很多软件时会失败.yum本来 ...
- linux-网站收藏
创建sudo无密码登陆 http://www.aboutyun.com/blog-61-428.html
- [Vuex] Create a Vuex Store using TypeScript
A Vuex store centralizes the state of your app, making it easy to reason about your state flow. In t ...
- mysql函数之SUBSTRING_INDEX(str,"/",-1)
SUBSTRING_INDEX的用法: •SUBSTRING_INDEX(str,delim,count) 在定界符 delim 以及count 出现前,从字符串str返回自字符串.若count为正值 ...
- JAVA获取程序(打成jar或classpath)所在目录
一.简述 JAVA获取程序(打成jar或classpath)所在目录. 二.代码 package dearcloud.utils.context; import dearcloud.utils.Str ...
- 如何永久激活(破解) IntelliJ IDEA 2018.2
1.去官网下载并安装 idea 地址:https://www.jetbrains.com/idea/download 文件有点大,耐心等待一会儿. 2.下载破解(crack) jar 包 地址 htt ...
- 评分模型的检验方法和标准&信用评分及实现
评分模型的检验方法和标准通常有:K-S指标.交换曲线.AR值.Gini数等.例如,K-S指标是用来衡量验证结果是否优于期望值,具体标准为:如果K-S大于40%,模型具有较好的预测功能,发展的模型具有成 ...
- 最新的Delphi版本号对照
The CompilerVersion constant identifies the internal version number of the Delphi compiler. It is de ...
- 什么是rpc
远程过程调用协议RPC(Remote Procedure Call)—远程过程调用,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.RPC协议假定某些传输协议的存在,如TC ...