Installation dependencies
You can view some documents of Vue Loader on the official website of Vuehttps://vue-loader.vuejs.org/zh/guide/#vue-cli
cnpm install -D vue-loader vue-template-compiler
Configuration
- 1. Add vue-loader to the plugin
- 2. Add the analysis of the .vue file in the loader
- 3. Generate HTML specifies a template HTML file
- 4. App.vue is introduced in man.js
webpack.config.js
// 生成HTML
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 清空文件夹
const {
CleanWebpackPlugin } = require("clean-webpack-plugin");
// 提取css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 实现处理.vue文件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = function (env, argv) {
return {
// 入口
entry: {
main: "./src/main.js",
},
// 出口
output: {
path: `${
__dirname}/dist`,
// 公用部分代码块文件名，公用部分的代码会提取压缩到这个文件中
chunkFilename:
argv.mode == "production"
? "[name].[contenthash].js"
: "[name].chunk.js",
// 模块名+哈希字符的文件名
filename:
argv.mode == "production"
? "[name].[contenthash].js"
: "[name].chunk.js",
},
// 插件配置
plugins: [
// 打包前清理dist
new CleanWebpackPlugin(),
// 生成HTML文件并导入js和css
new HtmlWebpackPlugin({
template: "public/index.html",
}),
new VueLoaderPlugin(),
// 将css提取到一个单独的文件
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
}),
],
// 加载器：处理css,图片，字体文件等
module: {
rules: [
{
test: /\.css$/,
use: [
argv.mode == "production"
? MiniCssExtractPlugin.loader
: "vue-style-loader", //开发时不需要提取css文件
argv.mode == "production" ? "css-loader" : "style-loader",//处理编译不需要style-loader
"css-loader",
],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ["file-loader"],
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
{
test: /\.vue$/,
loader: "vue-loader",
},
],
},
// 优化
optimization: {
//压缩： production 模式下默认true
// minimize: true,
// 运行的公用文件，设置为single时会将所有的共享依赖合并成一个文件，当有多个入口文件时需要这样做
runtimeChunk: "single",
// 动态模块导入的共享模块配置
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
// 值为all时，import动态导入的模块也会被打包的共享部分代码文件里,值为async时只会共享异步的模块，initial时只共享同步的模块
chunks: "initial",
},
},
},
},
// 开发服务器
devServer: {
// 监听文件的位置
// contentBase: `${__dirname}/dist`,
// compress: true,
port: 9000,
//允许通过外部访问
// host: "0.0.0.0",
// 模块热替换，实现只更新局部
hot: true,
},
};
};
main.js
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
render: h => h(App)
})
index.html under public
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack demo</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
app.vue
<template>
<div class="blue">
{
{ test }}
<button @click="clickTest">点击777</button>
</div>
</template>
<script>
export default {
data() {
return {
test: "vue的文件",
};
},
methods: {
clickTest() {
this.test = "新的值666";
},
},
};
</script>
<style scoped>
.blue {
color: red;
}
</style>
effect
