- node v14.15.0
- npm v6.14.9
- webpack v5.10.0
- webpack-cli v4.2.0
- vue v2.6.12
- 与
vue/cli类似的基本目录
- 支持
*.vue,*.css等文件
- 支持
es6及以上语法
- 支持加载图片
- 热加载
demo
├─ dist
├─ public
└─ src
webpack 及相关插件
- webpack
npm install -D webpack webpack-cli
- webpack 本地服务器插件
npm install -D webpack-dev-server
- html 生成插件，它会将生成的 js 和 css 文件插入到 html 中
npm install -D html-webpack-plugin
- vue 插件
npm install -D vue-loader vue-template-compiler
- css 插件
npm install -D css-loader style-loader
- 图片插件
npm install -D file-loader url-loader
- babel 插件
npm install -D @babel/core @babel/cli @babel/preset-env babel-loader,npm install @babel/polyfill
安装 vue
npm install vue vue-router
简单实现 webpack 打包
console.log('Hello Webpack');
const path = require('path');
const config = {
entry: './src/main.js',// 定义入口文件
output: {
path: path.resolve(__dirname + '/dist'),// 打包生成文件地址，必须是绝对路径
filename: '[name].build.js',// 生成的文件名
},};
module.exports = config;
{
...
"scripts": {
"build": "webpack --mode=production"
}
...
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>webpack搭建vue</title>
</head>
<body>
<!-- 如果浏览器禁止加载js脚本 -->
<noscript>
<strong>
We're sorry but this site doesn't work properly without JavaScript
enabled. Please enable it to continue.
</strong>
</noscript>
<div id="app"></div>
<!-- build后的文件会在这之后自动引入 -->
</body>
</html>
const HtmlWebpackPlugin = require('html-webpack-plugin');
const config = {
...
plugins:[
new HtmlWebpackPlugin({
filename: 'index.html',// 生成的文件夹名
template: 'public/index.html',// 模板html
favicon: 'public/favicon.ico',// 图标
}),]
}
...
<!DOCTYPE html>
<html>
<head>
...
<link rel="icon" href="favicon.ico" />
</head>
<body>
...
<script src="main.build.js"></script>
</body>
</html>
开启热加载
const config = {
...
devServer: {
contentBase: path.join(__dirname,'dist'),// html所在路径
compress: true,// 是否压缩
port: 3000,// 端口
hot: true,// 热部署
open: true,// 打包完成后自动打开网页
}
}
{
...
"scripts": {
"build": "webpack --mode=production","serve": "webpack serve"
}
...
}
配置 Vue
...
const { VueLoaderPlugin } = require('vue-loader');
const config = {
...
// loaders
module: {
rules: [
{
// *.vue
test: /\.vue$/,loader: 'vue-loader',},{
// `*.vue` 文件中的 `<style>` 块以及普通的`*.css`
test: /\.css$/,use: ['vue-style-loader','css-loader'],],plugins: [
...
new VueLoaderPlugin(),...
};
...
<template>
<div class="example">
{{ msg }}
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello Webpack',};
},};
</script>
<style>
.example {
color: red;
}
</style>
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',render: (h) => h(App),});
配置图片资源的加载
...
const config = {
...
module: {
rules: [
...
{
// 图片
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,use: {
loader: 'url-loader',options: {
limit: 25000,};
...
<template>
<div class="example">
{{ msg }}
<img :src="url" />
</div>
</template>
<script>
import logo from './assets/logo.png';
export default {
data() {
return {
msg: 'Hello Vue1',url: logo,};
</script>
<style>
.example {
color: red;
}
</style>
...
const config = {
...
module: {
rules: [
...
{
// *.js
test: /\.js$/,exclude: /node_modules/,// 不编译node_modules下的文件
loader: 'babel-loader',};
...
{
"presets": [
[
"@babel/preset-env",{
"useBuiltIns": "entry"
}
]
]
}
export default function getData() {
return new Promise((resolve,reject) => {
resolve('ok');
});
}
<template>
<div class="example">
{{ msg }}
<img :src="url" />
</div>
</template>
<script>
import logo from './assets/logo.png';
import getData from './utils/getData';
export default {
data() {
return {
msg: 'Hello Vue1',methods: {
async fetchData() {
const data = await getData();
this.msg = data;
},created() {
this.fetchData();
},};
</script>
<style>
.example {
color: red;
}
</style>
设置 src 别名以及省略后缀
...
const config = {
...
// 解析路径
resolve: {
// 设置src别名
alias: {
'@': path.resolve(__dirname,'src'),//后缀名 可以根据需要自由增减
extensions: ['.js','.vue'],...
};
...
// 导入App.vue
import App from '@/App';
// 导入getData
import getData from '@/utils/getData';
服务热线 19970861797
