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的 ...
随机推荐
- D3
D3.js是一个JavaScript库,它可以通过数据来操作文档.D3可以通过使用HTML.SVG和CSS把数据鲜活形象地展现出来.D3严格遵循Web标准,因而可以让你的程序轻松兼容现代主流浏览器并避 ...
- GENet/ESPNet
GENet(更泛化的SEnet,有带参数和不参数的模块) 原文:https://blog.csdn.net/dgyuanshaofeng/article/details/84179196 SENet之 ...
- Tomcat参数设置，解决内存溢出问题
Tomcat默认参数不适合生产环境使用,因此需要修改一些参数 1.修改启动时内存参数.并指定JVM时区 (在Windows Server 2008 下时间少了8个小时): 在Tomcat上运行j2ee ...
- QPS从0到4000请求每秒，谈达达后台架构演化之路（转载）
https://blog.csdn.net/czbing308722240/article/details/52350219 QPS从0到4000请求每秒,谈达达后台架构演化之路 达达是全国领先的 ...
- wpf 控件添加背景图片
方法一,xaml中: <控件> <控件.Background> <ImageBrush ImageSource="/WpfApplication1;compon ...
- .Net混淆工具和反混淆工具
一.简介 本文给大家列举一些常用的.net程序反破解代码混淆工具.同时也列取一些反混淆工具. 二.混淆工具 Agile.NET (aka CliSecure) Babel.NET CodeFort C ...
- SuperObject生成示例
var jo,jEntity,jSubEntity: ISuperObject; jaOrder,jaEntity,jaSubEntity: ISuperObject; i,j,entityCount ...
- php的Allowed memory size of 134217728 bytes exhausted问题解决办法
php的Allowed memory size of 134217728 bytes exhausted问题解决办法 报错: Fatal error: Allowed memory size of 1 ...
- Charles配置问题
1. 手机访问chls.pro/ssl下载证书时候,用常用安卓手机不同的浏览器(可以多试几种浏览器) 会出现两种情况,一种是直接打开下载getssl.crt文件 一种是没有反应,直接打开网页了 这时候 ...
- 浅谈 CSS 预处理器： 为什么要使用预处理器？
CSS 自诞生以来,基本语法和核心机制一直没有本质上的变化,它的发展几乎全是表现力层面上的提升.最开始 CSS 在网页中的作用只是辅助性的装饰,轻便易学是最大的需求:然而如今网站的复杂度已经不可同日而 ...