zhongchao666
自己搭建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:项目的安装依赖 ```

相关文章: