主流框架的搭建(VUE,React)

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.遇见替代,版本太低(extract-text-webpack-plugin@next)
遇见路径问题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 预处理器(自动添加浏览器前缀)

猜你喜欢

转载自www.cnblogs.com/MDGE/p/9162911.html
今日推荐