手动配置webpack4、Vue2.7、Typescript、Sass
手动配置webpack4 vue ts sass
1. 安装 初始化webpack
安装
npm init -y // 创建默认的package.json
npm install webpack@4 webpack-cli@3 --save-dev
创建目录
webpack-demo
|- package.json
+ |- /src
+ |- index.js
按照文档的建议，删除package.json中的"main": "index.js"，增加"private": true,。
增加webpack.config.js配置
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
尝试运行npx webpack或者npm run build，会输出/dist/**在当前目录下。
2. 引入webpack-dev-server
webpack-dev-server可以让我们在开发环境中启动一个服务，预览我们的项目，帮助开发。
由于我们使用的webpack4，官方警告不建议使用webpack-dev-server v4.0.0+，所以使用yarn add -D webpack-dev-server@3.11.3安装。
安装完成后使用npx webpack-dev-server就可以启动server进行预览了。也可以在package.json => scripts中添加"dev": "webpack-dev-server",，这样运行npm run dev即可。
3. 引入html-webpack-plugin
在浏览器中查看/dist目录发现并没有html文件，我们通过引入html-webpack-plugin来解决这个问题。
同样的因为版本问题，需要运行命令yarn add --dev html-webpack-plugin@4进行安装。
在index.js中编写如下代码
let div = document.createElement('div')
div.textContent = '你好 我是隔壁老王'
document.body.appendChild(div)
npm run dev启动服务，就能在页面中查看到你好 我是隔壁老王。
4. 使用vue2
yarn add vue@2.7.14安装vue。
改写src目录下的index.js，增加App.vue
index.js
import App from './App.vue'
import Vue from 'vue'
new Vue({
el: '#app',
render: h => h(App)
})
App.vue
<template>
<div>
{{message}}
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
message: '你好 还是老王'
}
}
}
</script>
当我们再次想要预览时，报错了You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders。看来我们需要一个合适的loader来处理vue的文件。
经过尝试，这里安装vue-loader的15.10.1。并增加以下配置。
// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
module: {
rules: [
// ... 其它规则
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin()
]
}
再次启动服务，发现找不到#app，只好创建一个模板给HtmlWebpackPlugin啦。配置webpack.config.js:
plugins: [new HtmlWebpackPlugin({title: '我是老王', template: "./public/index.html"}), new VueLoaderPlugin()],
增加模板
<!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>
修改index.js
new Vue({
render: (h) => h(App)
}).$mount('#app')
这下正常显示啦，你好 还是老王。
7. 使用ts，安装ts-loader和ts。
在 ts-loader的网站中提到please use ts-loader 8.x if you need webpack 4 support所以我们安装的版本是8.4.0。然后yarn add typescript，安装ts。
增加tsconfig.json
{
"compilerOptions": {
"sourceMap": true
}
}
增加webpack.config.js的配置
module.exports = {
mode: 'development',
// 将入口改为ts文件。
entry: './src/index.ts',
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
esModule: true,
}
},
// 增加ts的处理
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
]
},
]
},
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [new HtmlWebpackPlugin({ title: '我是老王', template: "./public/index.html" }), new VueLoaderPlugin()],
};
尝试使用composition风格，将App.vue更改为
<template>
<div>
<button @click="increment">点击了：{{ count }} 次</button>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
// 响应式状态
const count = ref<number>(0)
// 更改状态、触发更新的函数
function increment(): void {
count.value++
}
// 生命周期钩子
onMounted(() => {
console.log(`计数器初始值为 ${count.value}。`)
})
</script>
测试可以正常运行。
使用sass
在package.json中添加如下依赖，进行安装。
"css-loader": "^5.2.7",
"node-sass": "^8.0.0",
"sass-loader": "^10.4.1",
现在可以在vue中使用<style>标签了。在App.vue中添加
<style lang="scss">
div {
button {
color: red;
}
}
</style>
可以看到样式生效了。
浙公网安备 33010602011771号