自己搭建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:项目的安装依赖
```
相关文章:
- 教你用webpack搭一个vue脚手架[超详细讲解和注释!](转载) 2023-11-08
- 前端框架 vue 和 react 的区别 2023-11-08
- 用vue-cli来搭建vue项目和webpack 2023-11-08
- webpack搭配vue框架使用 2023-11-08
- 用Webpack构建Vue项目 2023-11-08
- 用 webpack 创建 vue 项目 2023-11-08
- 轻松入门React和Webpack 2023-11-08