webpack基本打包笔记

109 阅读1分钟

项目结构

image.png

老版本webpack基本配置网址 24kcs.github.io/vue3_study/…

安装依赖

cmd 命令行打开
1.npm init -y 初始化(出现package.json文件) 
2.tsc --init (产生tsconfig.json文件,看看是否有安装ts没安装 npm install -g typescript) 
==========接下来下载依赖========= 
3.npm install -D typescript
4.npm install -D webpack 
5.npm install -D webpack-cli 
6.npm install -D webpack-dev-server (使用比较稳定版本,不是最新版本) ==========版本装不好很烦,装不对就多试试几个版本吧 ============ 
7.npm install -D html-webpack-plugin clean-webpack-plugin(html打包工具,清除上次打包内容工具)
8.npm install -D ts-loader cross-env(cross-env跨平台插件,目前不知道干啥的可以查一查)
==========依赖安装完成,版本装不对一直在报错,烦死了... 

配置启动和打包命令 

找到package.json中 ==>script ==>替换 "dev":
"cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js", 
"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js" 

替换完成后 npm run dev 项目启动