一步步构建自己的前端项目
一、我们先把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
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>起步title>
head>
<body>
<script src="../dist/bundle.js">script>
body>
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'; //测试scss
const app = createApp(App)
app.mount('#app');
App.vue
<template>
<div class="center">
<HelloWorld msg="Welcome to Electron+Vue3 App" />
</div>
</template>
<script>
import HelloWorld from "./HelloWorld.vue";
export default {
name: "App",
components: {
HelloWorld,
},
};
</script>
<style lang="scss">
.center {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
</style>
HelloWorld.vue
<template>
<div class="hello-world">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
};
</script>
<style lang="scss">
$nav-color: #f90;
h1 {
color: $nav-color;
}
.hello-world {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
</style>
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: ComponentOptions
export 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 magic
new 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集成成功
