自己搭建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解析的配置 -------------------------------------------------------------------- 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"] } -------------------------------------------------------------------- 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：项目的安装依赖 ```