使用vue3 和 webpack5搭建基础开发环境搭建,这里没有用现成的脚手架，主要是为了学习一些基础配置
- nodejs path知识点
mkdir webpack-demo && cd webpack-demo
npm init -y此时已得到一个package.json文件
npm i webpack webpack-cli -Dwebpack-cli 是执行 webpack 的工具。webpack 4.x 版本以后，剥离出了 webpack-cli ，所以这里我们需要单独下载它。
根目录添加index.html 和 webpack.config.js
根目录添加src文件夹，并且在src文件夹内添加main.js文件
// webpack.config.js 文件内容
const path = require('path')
module.exports = {
mode: 'development', // 环境
entry: path.resolve(__dirname, './src/main.js'), // 入口
output: {
path: path.resolve(__dirname, 'dist'), // 打包生成的目录文件夹
filename: 'js/[name].js' // 打包后的js文件
}
}package.json 的 scripts 属性增加dev命令：
"scripts": {
"dev": "webpack --config ./webpack.config.js"
}执行npm run dev可以看到生成了打包后的dist文件
// 使用 vue@next 才能成功引入 Vue 3.x，否则就会引入 2.x 的最高版本
npm i vue@next -S在 src 目录下新建 app.vue并添加内容：
<template>
<div id="app">
我有一头小毛驴呀~
</div>
</template>
<script>
export default {
}
</script>src/main.js文件内容:
import { createApp } from "vue";
import App from './app.vue'
const app = createApp(App)
app.mount('#app')此时执行打包命令npm run dev会报错:
浏览器去识别不了 .vue 结尾的文件，我们需要使用vue-loader解析vue文件
使用HtmlWebpackPlugin创建HTML文件
安装vue-loader和HtmlWebpackPlugin：npm install vue-loader HtmlWebpackPlugin
webpack.config.js配置vue-loader和HtmlWebpackPlugin:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader/dist/index')
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, './src/main.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js'
},
module: {
rules: [
{
test: /\.vue$/,
use: ['vue-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './index.html'), // 以我们根目录创建的html为模板
filename: 'index.html',
title: 'webpack5.0 + vue3.0'
}),
new VueLoaderPlugin()
]
}index.html文件内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>此时执行打包命令npm run dev后，打开dist.index.html可以看到我们的内容
:::tip SCSS含义 SCSS是一种CSS预处理语言
定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。
CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS
scss是sass3.0引入的语法，可以理解scss是sass的一个升级版本 :::
scss需要经过编译为css才能被浏览器识别,所以需要安装以下loader:
npm install css-loader style-loader --save-dev
npm install node-sass sass-loader --save-dev::: tip
node-sass: 它将Node.js绑定到LibSass（流行样式表预处理器Sass的C版本）。它允许用户以令人难以置信的速度将.scss文件本地编译为css，并通过连接中间件自动编译 (还是不太理解干啥的)
sass-loader: 把scss/sass转为css
css-loader: css-loader 会对 @import 和 url('@/static/img.png') 进行处理(浏览器是无法识别 @ 符)
style-loader: 把 CSS 插入到 DOM 中。
:::
webpack.config.js配置
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader/dist/index')
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, './src/main.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js'
},
module: {
rules: [
{
test: /\.(s)?css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.vue$/,
use: ['vue-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './index.html'),
filename: 'index.html',
title: 'webpack5.0 + vue3.0'
}),
new VueLoaderPlugin()
]
}src/app.vue添加样式
<template>
<div class="my-app">
我有一头小毛驴呀~
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.my-app {
color: lightblue;
}
</style>打包后打开dist/index.hml可以看到效果
npm install webpack-dev-server -Dwebpack.config.js添加devServer配置
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader/dist/index')
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, './src/main.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js'
},
devServer: {
static: {
directory: path.resolve(__dirname, './dist')
},
port: 7729
},
module: {
rules: [
{
test: /\.(s)?css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.vue$/,
use: ['vue-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './index.html'),
filename: 'index.html',
title: 'webpack5.0 + vue3.0'
}),
new VueLoaderPlugin()
]
}重新启动 npm run dev，访问http://localhost:7729/可查看页面，修改实时更新
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent