vueLoader篇|博客系列
# 新建一个空的webpack项目
mkdir webpack-vue-cli && cd webpack-vue-cli
npm init -y
touch webpack.config.js
@前端进阶之旅: 代码已经复制到剪贴板
# 创建一些基础的目录结构:
mkdir src && cd src
touch main.js && touch App.vue
mkdir assets && mkdir components && mkdir styles
cd ../
mkdir public && cd public
touch index.html
@前端进阶之旅: 代码已经复制到剪贴板
# 安装一些基本的依赖
# 1. 保证webpack的基本功能
cnpm i --save-dev webpack webpack-cli
@前端进阶之旅: 代码已经复制到剪贴板
配置入口和出口
webpack.config.js:
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
@前端进阶之旅: 代码已经复制到剪贴板
# 2. 配置html模版和清理dist的插件
cnpm i --save-dev html-webpack-plugin clean-webpack-plugin
@前端进阶之旅: 代码已经复制到剪贴板
const path = require('path')
+ const HtmlWebpackPlugin = require('html-webpack-plugin')
+ const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: './src/main.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
- }
+ },
+ plugins: [
+ new CleanWebpackPlugin(), // 清理dist
+ new HtmlWebpackPlugin({ // html模版
+ title: 'webpack-vue',
+ template: './public/index.html'
+ })
+ ]
}
@前端进阶之旅: 代码已经复制到剪贴板
# 3. 保证能本地启动web服务器
模拟vue-cli的开发环境
cnpm i --save-dev webpack-dev-server
@前端进阶之旅: 代码已经复制到剪贴板
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: './src/main.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
+ devServer: {
+ contentBase: './dist',
+ open: true
+ },
plugins: [
new CleanWebpackPlugin(), // 清理dist
new HtmlWebpackPlugin({ // html模版
title: 'webpack-vue',
template: './public/index.html'
})
]
}
@前端进阶之旅: 代码已经复制到剪贴板
并在package.json中添加两条脚本命令, 一个是本地的开发命令, 一个是发布到生产环境的打包命令:
{
"scripts": {
"serve": "webpack-dev-server",
"build": "webpack"
}
}
@前端进阶之旅: 代码已经复制到剪贴板
# 4. 保证能使用vue单文件
cnpm i -D vue-loader vue-template-compiler
@前端进阶之旅: 代码已经复制到剪贴板
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+ const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry: './src/main.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist',
open: true
},
+ module: {
+ rules: [{
+ test: /.vue$/,
+ loader: 'vue-loader'
+ }]
+ },
plugins: [
new CleanWebpackPlugin(), // 清理dist
new HtmlWebpackPlugin({ // html模版
title: 'webpack-vue',
template: './public/index.html'
- })
+ }),
+ new VueLoaderPlugin()
]
}
@前端进阶之旅: 代码已经复制到剪贴板
# 5. 处理css
cnpm i --save-dev style-loader css-loader vue-style-loader
@前端进阶之旅: 代码已经复制到剪贴板
在webpack.config.s中配置规则:
module.exports = {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
@前端进阶之旅: 代码已经复制到剪贴板
(由于之前安装了vue-loader, 它能够处理每个vue文件中scoped的样式, 所以不要额外处理)
(安装vue-style-loader, 使得我们编辑vue文件中的<style>能够热重载)
# 6. 编写基本代码并跑一个试试
完成上述操作, 让我们写一些简单的代码看看能不能将项目跑起来.
这里我是模拟vue-cli的项目结构进行配置的:
src/main.js:
import Vue from 'vue';
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
@前端进阶之旅: 代码已经复制到剪贴板
src/App.vue:
<template>
<div id="app">
<div class="content">
{{ msg }}
</div>
</div>
</template>
<script>
export default {
name: 'app',
components: {},
data() {
return {
msg: 'Hello LinDaiDai222'
}
}
}
</script>
<style>
body {
margin: 0;
}
</style>
@前端进阶之旅: 代码已经复制到剪贴板
public/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but bpmn-vue-basic doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html>
@前端进阶之旅: 代码已经复制到剪贴板
这个文件是为了提供一个生成html的模版.
Now let’s try!!!
允许之前配置好的指令:
npm run serve
@前端进阶之旅: 代码已经复制到剪贴板
发现是可以正常打开显示页面的, 而且更新了本地代码, 页面也会自动重载.
# 处理资源路径
为了处理项目中的资源路径, 例如img标签的src, 我们需要用到file-loader或者url-loader.
如果不做这些处理的话, 在项目使用图片就会报错了.
两种loader都可以.
# 1. 使用file-loader
cnpm i --save-dev file-loader
@前端进阶之旅: 代码已经复制到剪贴板
module.exports = {
rules: [
{
test: /.(png|jpg|svg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
esModule: false // 配置此选项保证能在html中加载图片路径
}
}
]
}
]
}
@前端进阶之旅: 代码已经复制到剪贴板
# 2. 使用url-loader
cnpm i --save-dev url-loader file-loader
@前端进阶之旅: 代码已经复制到剪贴板
module.exports = {
rules: [
{
test: /.(png|jpg|svg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 40000, // 大于该值则交给 file-loader 处理
esModule: false // 配置此选项保证能在html中加载图片路径
}
}
]
}
]
}
@前端进阶之旅: 代码已经复制到剪贴板
# 3. 添加一张png图片
在App.vue中添加一张图片:
<img src="./assets/LinDaiDai.png" />
@前端进阶之旅: 代码已经复制到剪贴板
用上面两种配置方式, 都可以正常显示.
# 使用预处理器sass
安装:
cnpm i -D sass-loader node-sass
@前端进阶之旅: 代码已经复制到剪贴板
配置:
rules: [{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-style-loader',
'sass-loader'
]
}]
@前端进阶之旅: 代码已经复制到剪贴板
在styles文件夹下新建common.scss:
.color_blue {
color: blue;
}
@前端进阶之旅: 代码已经复制到剪贴板
在main.js中引用:
