为了账号安全,请及时绑定邮箱和手机立即绑定

01.ElementUI源码学习:项目初始化和webpack配置

标签:
webpack

0x00.项目初始化

由于整个过程像素级 copy element,所以将不使用vue-cli初始化项目。

创建项目

新建一个空的文件夹,使用npm init 来初始化项目,并安装vue模块。

carbon (17).png

修改目录结构

根目录中添加文件夹

carbon (18).png

根目录下创建项目配置文件: .gitignore README.md
public目录下,创建模板页文件: favicon.ico index.html
examples目录下,创建示例入口文件: App.vue main.js logo.png

0x01.wepack安装与配置

项目使用webpack实现模块化管理和打包。

局部安装webpack

carbon (16).png

webpack-cli最新为4.X版本,webpack-dev-server无法正常运行,安装时需要指定版本(确保两模块版本皆为3.X)。

carbon (14).png

webpack-cli 提供了许多命令来使 webpack 的工作变得简单。官方文档
webpack-dev-server为你提供了一个简单的 web server,并且具有 live reloading(实时重新加载) 功能。官方文档

安装 webpack loaders

webpack 使用 loader 对文件进行预处理。可以构建包括 JavaScript 在内的任何静态资源。
官方插件列表
webpack 插件中文文档

carbon (15).png

webpack配置

build目录下创建webpack配置文件webpack.config.js,提供入口(entry)模式(Mode)输出(output)模块(Module)插件(Plugins)开发服务器(DevServer)等配置选项。官方文档

carbon (11).png

0x02.项目运行

npm scripts 配置

在npm脚本中新增webpack命令,执行的命令会自动去node_modules寻找,不用加上目录。

修改package.json配置

.
...
"scripts": { 
    "build:dist": "webpack --config  build/webpack.config.js",
    "dev": "webpack-dev-server --config build/webpack.config.js"
},
...
.

cross-env配置

cross-env是一款运行跨平台设置和使用环境变量的脚本,不同平台使用唯一指令,无需担心跨平台问题。

carbon (13).png

修改package.json配置

.
...
"scripts": { 
    "build:dist": "cross-env NODE_ENV=development webpack --config  build/webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js"
},
...
.

运行测试

命令行窗口中,在该项目根目录下输入npm run dev 即可进行本地开发调试。

微信截图_20210414165142.png

成功运行后,项目第一个页面结果如下:

微信截图_20210414165237.png

最终目录结构

carbon (19).png

0x03.示例代码

作者:Anduril
原文出处:https://www.cnblogs.com/anduril/p/14659439.html
版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消