webpack项目中使用流程

复制代码
1、初始化项目
npm init -y

2、安装webpack
cnpm install webpack webpack-cli -D

3、创建src文件夹 创建dist文件夹

4、创建webpack.config.js文件

5、在src中创建入口文件 main.js

6、初始打包
npx webpack

7、安装解析JS的babel文件
cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

8、安装解析CSS的loader文件
cnpm install --save-dev style-loader css-loader sass-loader node-sass

9、安装html插件
cnpm install -D html-webpack-plugin

10、安装处理图片的loader
cnpm install url-loader file-loader -D


11 、安装处理vue的文件loader
cnpm install -D vue-loader vue-template-compiler

12、安装vue.js

cnpm install vue -S


13、安装服务器环境
cnpm install webpack-dev-server -D    //在package.json中修改为:'dev':'webpack-dev-server'
复制代码

 

posted @   一直敲敲敲  阅读(264)  评论(0编辑  收藏  举报
编辑推荐:
· 自定义通信协议——实现零拷贝文件传输
· Brainfly: 用 C# 类型系统构建 Brainfuck 编译器
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
阅读排行:
· DeepSeek 全面指南,95% 的人都不知道的9个技巧(建议收藏)
· 自定义Ollama安装路径
· 本地部署DeepSeek
· 快速入门 DeepSeek-R1 大模型
· DeepSeekV3+Roo Code,智能编码好助手
点击右上角即可分享
微信分享提示