一步步构建自己的前端项目
创始人
2024-06-02 16:55:30
0

一、我们先把webpack走通

1、先安装相关依赖,webpack是用来处理命令行参数的,但是我不准备使用webpack-cli,但是还是要求必须安装webpack-cli

npm install webapck webpack-cli --save-dev

2、npm init -y

3、创建项目结构
在这里插入图片描述
build.js

const webpack = require('webpack')
const config = require('../webpack.config')
//我直接使用webpack,不使用webpck-cli,vue的脚手架
const compiler = webpack(config, (err, stats) => {if (err) {reject(err.stack || err)} else if (stats.hasErrors()) {let err = ''stats.toString({chunks: false,colors: true}).split(/\r?\n/).forEach(line => {err += `    ${line}\n`})} else {}
})

webpack.config.js

const path = require("path");//nodejs里面的基本包,用来处理路径
//我们先打个基本的包
module.exports = {entry: "./src/index.js",output: {path: path.join(__dirname, 'dist'),filename: "bundle.js"},
};

index.html


起步

index.js

import count from './count';function component() {const element = document.createElement('div');element.innerHTML = `hello world-${count(3, 6)}`;return element;
}document.body.appendChild(component());

count.js

export default function count(x, y) {return x - y;
}

在package.json中添加script配置

{"name": "test-build-project","version": "1.0.0","description": "","main": "webpack.config.js","devDependencies": {"webpack": "^5.76.1","webpack-cli": "^5.0.1"},"scripts": {"build": "node ./config/build.js"},"author": "","license": "ISC"
}

3、执行打包命令,就生成了我们的打包内容

npm run build

在这里插入图片描述
此时index.html就打印出了我们的内容
在这里插入图片描述

二、集成vue

1、安装vue相关的依赖,因为我们用到了vue以及webpack,webpack已经安装了,除了这些呢,还有:
vue:vue的依赖。
vue-loader可以除了.vue后缀的文件,Vue-loader在15.*之后的版本都是vue-loader的使用都是需要伴生 VueLoaderPlugin的,这个就是为了用webpack加载.vue文件,并将它编译成浏览器能认识的js文件。
url-loader 可以识别图片的大小,然后把图片转换成base64,从而减少代码的体积,如果图片超过设定的现在,就还是用 file-loader来处理。
css-loader用于处理js中引入的css。 style-loader用于创建style标签的(这俩基本上也都得一起用)。
node-sass,它允许您以令人难以置信的速度将 .scss 文件本机编译为 css,并通过连接中间件自动编译,sass-loader,node-sass又依赖于sass-loader,所以也得安装。

npm i --save-dev vue vue-loader url-loader style-loader css-loader node-sass node-sass

安装后的package

{"name": "test-build-project","version": "1.0.0","description": "","main": "webpack.config.js","devDependencies": {"css-loader": "^6.7.3","node-sass": "^8.0.0","sass-loader": "^13.2.0","style-loader": "^3.3.1","url-loader": "^4.1.1","vue-loader": "^17.0.1","webpack": "^5.76.1","webpack-cli": "^5.0.1"},"scripts": {"build": "node ./config/build.js"},"author": "","license": "ISC","dependencies": {"vue": "^3.2.47"}
}

在目录中新增APP.vue、HelloWorld.vue、common.scss用于测试
在这里插入图片描述
更改index.js入口文件

import { createApp } from 'vue'; //引入vue
import App from './components/App.vue'; //测试处理.vue后缀
import './style/common.scss'; //测试scssconst app = createApp(App)
app.mount('#app');

App.vue


HelloWorld.vue


common.scss

body {background: #000428; /* fallback for old browsers */background: -webkit-linear-gradient(to right,#004e92,#000428); /* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(to right,#004e92,#000428); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */margin: 0;padding: 0;
}

好再次执行npm run build打包,得到了新的打包文件
在这里插入图片描述
再次直接打开index.html
在这里插入图片描述
这里就成功了
在这里插入图片描述

三、集成typescript

1、安装typescript、和ts-loader用于webpack支持。

npm install typescript ts-loader -D
{"name": "test-build-project","version": "1.0.0","description": "","main": "webpack.config.js","devDependencies": {"css-loader": "^6.7.3","node-sass": "^8.0.0","sass-loader": "^13.2.0","style-loader": "^3.3.1","ts-loader": "^9.4.2","typescript": "^4.9.5","url-loader": "^4.1.1","vue-loader": "^17.0.1","webpack": "^5.76.1","webpack-cli": "^5.0.1"},"scripts": {"build": "node ./config/build.js"},"author": "","license": "ISC","dependencies": {"vue": "^3.2.47"}
}

2、生成tsconfig.json

npx tsc --init

这里tsconfig.json我完全没有更改,使用默认配置

3、创建shims-vue.d.ts文件

declare module '*.vue' {import { ComponentOptions } from 'vue'const componentOptions: ComponentOptionsexport default componentOptions
}

4、webpack中添加ts的loader

{ test: /\.ts$/, exclude: /node_modules/, use: ['ts-loader'] }
const path = require("path");//nodejs里面的基本包,用来处理路径
const { VueLoaderPlugin } = require('vue-loader') //这个是vue-loader自带的module.exports = {entry: "./src/index.ts",output: {path: path.join(__dirname, 'dist'),filename: "bundle.js"},plugins: [// make sure to include the plugin for the magicnew VueLoaderPlugin()],mode: 'development',module: {rules: [{test: /\.vue$/,loader: 'vue-loader',},{test: /\.scss$/,use: ['style-loader',//https://github.com/vuejs/vue-style-loader/issues/42'css-loader','sass-loader']},{test: /\.css$/i,use: ["style-loader", "css-loader"],},{test: /\.(woff|woff2|eot|ttf|svg)$/,use: [{loader: 'url-loader',options: {limit: 10000,name: './font/[hash].[ext]',publicPath: 'dist'}}]},{test: /\.(png|jpg|gif)$/i,use: [{loader: 'url-loader',options: {limit: 8192,},},],},//增加ts后缀的解析{ test: /\.ts$/, exclude: /node_modules/, use: ['ts-loader'] }]},//配置模块化引入文件的缺省类型// resolve: {//     extensions: ['.js', '.ts']// },
};

5、讲vue的入口文件改为index.ts
6、在执行npm run build,又生成了新的bundle.js
在这里插入图片描述
7、再次打开index.html,ts集成成功
在这里插入图片描述

四、集成electron(回头继续更新)

相关内容

热门资讯

上大股份跌2.02%,成交额8... 7月4日,上大股份盘中下跌2.02%,截至14:10,报34.86元/股,成交8162.05万元,换...
厚植劳动文化促进人才竞相涌现 转自:中工网大力弘扬“三个精神”,就要深入贯彻尊重劳动、尊重知识、尊重人才、尊重创造方针,完善相关政...
五矿新能跌2.04%,成交额7... 7月4日,五矿新能盘中下跌2.04%,截至14:05,报5.28元/股,成交7650.20万元,换手...
嘉戎技术股价跌5.08%,招商... 7月4日,嘉戎技术跌5.08%,截至发稿,报24.83元/股,成交1.01亿元,换手率10.48%,...
美国非农数据强于预期,金价回升...   汇通财经APP讯——金价在周五亚洲市场重新获得正面动能,逆转了前一交易日因非农数据导致的部分跌幅...
“假日学校”托起家长满满的幸福 转自:中工网6月30日上午,浙江宁波市暑期“假日学校”开班仪式在镇海区中心学校举行,标志着今年该市“...
重庆南川实施“潮汐人才”计划赋... 转自:中国质量报人才随潮来 产业破浪行重庆南川实施“潮汐人才”计划赋能产业高质量发展□ 本报记者 谢...
2025上半年中国住房租赁市场... 2025上半年,重点城市租金整体小幅波动调整,50城住宅平均租金累计下跌1.37%,其中一线城市表现...
湖北京山市计量检测质量服务站提... 转自:中国质量报以匠心刻度丈量产业新高度湖北京山市计量检测质量服务站提供精准服务助力企业发展□ 官静...
年内超20家银行高管“变阵”,...   来源:金融时报  商业银行管理层迎来密集调整。  记者注意到,今年以来,已有农业银行、中国银行、...