主流框架的搭建（VUE，React）

Posted 2020-11-17 mdge

vue脚手架：
cnpm install vue vue-cli -g
vue init webpack/webpack-simple shuaige(新建文件夹的名字)
cd shuaige
cnpm install

npm run dev

打包npm run build

 

react脚手架：
cnpm install create-react-app -g
create-react-app shuaige(新建文件夹名字)
cd shuaige
cnpm install

运行是npm start
打包npm run build
cnpm install serve -g
serve -s build

/*开发模式devD,你开发是用的*/
有关webpack自己配置的问题：
1.npm init (生成pack.json);
2.cnpm install webpack-cli -g(webpack -v【当时我用的是4.X】);
3.cnpm install webpack -D;
4.cnpm install webpack-cli -D;
5.entry(入口文件)，output(出口文件)，plugins:{},有关title的问题（<%=htmlWebpackPlugin%>）,pack.json("build":"webpack --mode development");
6.clean-webpack-plugin:删除某些东西
7.服务器环境【webpack-dev-server】("dev":"webpack-dev-server --mode development")
8.loaders:加载器，转化器less/scss,ES[style-loader,css-loader],use:[{loader:‘style-loader‘},{loader:‘css-loader‘}],压缩，--mode production
9.cnpm install file-loader url-loader -D
10.extract-text-webpack-plugin[分离css],
11.遇见替代，版本太低（[email protected]）
遇见路径问题publicPath:‘../‘[vue项目上线时，哪里见过]
outputPath:‘images‘[打包出去的路径]
new extractTextPlugin(提取出去的路径css/index.css)
mini-css-extract-plugin:(2018/3.23支持不好)

*********less*******
cnpm install less less-loader -D
*****sass****

postCss 预处理器（自动添加浏览器前缀）