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  开发、生产模式loaderplugindevServer ----> 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：项目的安装依赖

转载于:https://www.cnblogs.com/zhongchao666/p/9491463.html