自己搭建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]myapp app+ src:1[App.js] import React,{Component} from "react";import img from "./asset/logo.png";const Home = ()=>Homeexport default class App extends Component{ //测试 constructor(...args){ super(...args); this.state={count:100} } plus(){ this.setState({ count:this.state.count+1 }) } render(){ return}}2[index.js]import React from "react";import ReactDOM from "react-dom";import App from "./App";ReactDOM.render({this.state.count} 
,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]MyApp app+ [src]1[main.js]import Vue from "vue";import App from "./App.vue";new Vue({ render:h=>h(App)}).$mount("#app")2[App.vue]{ {msg}}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-pluginvue项目目录作用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：项目的安装依赖