webpack搭建适用于自身的vue架构
2021-06-22 本文已影响0人
Eason_0cce
先看一眼当年的两大官网还是原来的味道
image.png
image.png
开启cmd，创建项目文件夹
cd Desktop
mkdir webpackVue //或者自己手动新建文件夹
cd webpackVue
image.png
项目初始化
npm init
填入你自己的项目描述，后回到文件夹会出现一个项目描述文件
image.png
安装webpack
npm install webpack -g
npm install webpack-cli -g
或者
yarn global add webpack
yarn global add webpack-cli
创建webpack配置文件webpack.config.js，启动第一个打包工程
image.png
参照上图，我拎出来了几个重要的知识点，写出来了我的第一个配置文件：
const path = require("path");
module.exports = {
entry : "./js/index.js", //输入的文件
output : {
path: path.resolve(__dirname, 'dist'), //输出目录:dist
filename: 'main.js' //输出文件名
}
}
此时我的目录结构是这样的：
image.png
回到cmd，运行第一个webpack打包
webpack --config webpack.config.js
终端显示如下：
image.png
截图中出现了一个warning，大致意思是要在配置文件中写mode参数，先不管。
此时我的dist目录下多了一个main.js
image.png
为了验证我的的文件被打包进了mian.js，我来在dist目录建一个index.html引入main.js并且打开这个网页：
image.png
image.png
nice work~
ok，下面我们直接切入主题，开始打包vue文件
咱们的重点在于建架构，不是写页面。
我先写了一个最简单的vue单页test.vue
<template>
<div>test</div>
</template>
然后改造了一下dist目录的index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
随后也改造了一下js目录下的index.js
import Vue from 'vue'
import App from './components/test.vue'
new Vue({
render: h => h(App)
}).$mount('#app')
这时候细心的你应该能发现，我这边import了vue库，但是我没有安装依赖。所以我们
npm install vue
期待的搓搓小手：
webpack --config webpack.config.js
亮晃晃的错误
image.png
诶呀，我好像没有配置vue loader，loader是webpack核心思想之一，用来加载解析特殊文件
image.png
webpack官网搜了一下搜到了一个vue-loader，但是没具体表述，于是去百度~
找到了网址：https://vue-loader.vuejs.org/
image.png
回到cmd,安装vue-loader
image.png
npm install -D vue-loader vue-template-compiler
配置webpack
const path = require("path");
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry : "./js/index.js", //输入的文件
module : {
plugins: [
new VueLoaderPlugin()
]
},
output : {
path: path.resolve(__dirname, 'dist'), //输出目录:dist
filename: 'main.js' //输出文件名
}
}
插播cmd小技巧:ctr+c停止一切命令，输入cls按下enter清空输出
把常用脚本写进配置，再次执行打包
image.png
npm run dev
出了点小意外，稍微按几个按键
image.png
继续npm run dev
image.png
成功：
image.png
引入vue-router
这会学乖了，先安依赖
npm install vue-router
改造js目录下的index.js
import Vue from 'vue'
import App from '../components/test.vue'
import VueRouter from 'vue-router'
import pageA from '../components/a.vue'
import pageB from '../components/b.vue'
Vue.use(VueRouter);
const routes = [
{
path : "/a",
component : pageA
},
{
path : "/b",
component : pageB
}
]
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
添加components目录新文件a.vue和b.vue和test.vue
<template>
<div>
page a
</div>
</template>
---------------------------------------------
<template>
<div>
page b
</div>
</template>
----------------------------------------------
<template>
<div class="test">
<p>test</p>
<router-link to="/a">pageA</router-link>
<router-link to="/b">pageB</router-link>
<router-view></router-view>
</div>
</template>
打包vue-router版本
npm run dev
image.png
把routes分离出去
js目录下的index.js改造：
import Vue from 'vue'
import App from '../components/test.vue'
import VueRouter from 'vue-router'
import router from './routes.js'
Vue.use(VueRouter);
new Vue({
router,
render: h => h(App)
}).$mount('#app')
js目录新建routes.js文件
import VueRouter from 'vue-router'
import pageA from '../components/a.vue'
import pageB from '../components/b.vue'
const routes = [
{
path : "/a",
component : pageA
},
{
path : "/b",
component : pageB
}
]
export default new VueRouter({
routes // (缩写) 相当于 routes: routes
})
我觉得页面太丑了，加个样式看看
改造test.vue
<template>
<div class="test">
test
<p>
<router-link to="/a">Go to a</router-link>
<router-link to="/b">Go to b</router-link>
</p>
<router-view></router-view>
</div>
</template>
<style type="text/css">
.test { font-size: 14px; }
</style>
image.png
这个错误现在看到不慌了吧，又是说缺少loader，该怎么找loader怎么装都有数了吧
npm install style-loader css-loader --save-dev
同样webpack需要配置
const path = require("path");
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry : "./js/index.js", //输入的文件
module : {
rules : [
{
test : /\.vue$/,
loader : "vue-loader"
},
{
test : /\.css$/,
use : [
{ loader : "style-loader" },
{ loader : "css-loader" }
]
}
]
},
plugins: [
new VueLoaderPlugin()
],
output : {
path: path.resolve(__dirname, 'dist'), //输出目录:dist
filename: 'main.js' //输出文件名
}
}
image.png
效果看了吧
引入图片资源
npm install file-loader --save-dev
改造webpack.config.js
const path = require("path");
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry : "./js/index.js", //输入的文件
module : {
rules : [
{
test : /\.vue$/,
loader : "vue-loader"
},
{
test : /\.css$/,
use : [
{ loader : "style-loader" },
{ loader : "css-loader" }
]
},
{
test : /.png|.jpg/,
loader : 'file-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
],
output : {
path: path.resolve(__dirname, 'dist'), //输出目录:dist
filename: 'main.js' //输出文件名
}
}
改造page a
<template>
<div>
page a
<img :src="imgUrl"/>
</div>
</template>
<script>
module.exports = {
data(){
return {
imgUrl:require("../assets/test.jpg")
}
}
}
</script>
image.png
页面index.html设置成模板形式
现在我们脚本跟样式都是动态打包输出了，那么页面能不能也改成那样，当然可以，你需要用到HtmlWebpackplugin，名字一看就是跟VueLoaderPlugin一个类型的webpack插件。
这里我就不贴出来具体安装了，你们自己实践一下。
最终webpack.config.js改造如下
const path = require("path");
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackplugin = require('html-webpack-plugin');
module.exports = {
entry : "./js/index.js", //输入的文件
module : {
rules : [
{
test : /\.vue$/,
loader : "vue-loader"
},
{
test : /\.css$/,
use : [
{ loader : "style-loader" },
{ loader : "css-loader" }
]
},
{
test : /.png|.jpg/,
loader : 'file-loader'
}
]
},
plugins: [
new HtmlWebpackplugin({
filename: 'index.html', // 打包后的文件名，默认是index.html
template: path.resolve(__dirname, './src/index.html') // 导入被打包的文件模板
}),
new VueLoaderPlugin()
],
output : {
path: path.resolve(__dirname, 'dist'), //输出目录:dist
filename: 'main.js' //输出文件名
}
}
总结：刚入这一行，总监跟我说语言都只是工具，关键看你想做什么。
我是带着实践目的去玩了一遍webpack搭建vue。在这个过程，我需要啥就配置啥。最终达到了我的最终目的。
可能存在一些不到之处，希望大家多多指出~
