前言
之前写的三篇文章,分别简单介绍了如何配置 webpack 完成 es6 代码编译、PostCSS 代码编译、以及 使用 webpack 管理资源文件。接下来将配置 webpack 完成 vue 代码的编译。
版本说明
本文使用的 webpack 的版本为:4.30.0
开始搭建
本文的目的是完成 vue 的编译
安装 loader
使用命令行安装 vue 的 loader:
$ cnpm install vue-loader vue-template-compiler --save-dev
复制代码
下载 vue 组件
使用 npm 下载 vue 组件:
$ cnpm install vue --save-dev
复制代码
在 webpack 中配置 vue 的处理规则
在 webpack.config.js
文件中添加 vue 文件的处理规则:
const VueLoaderPlugin = require('vue-loader/lib/plugin'); // 引入 vue-loader 文件
module.exports = {
plugins: [
new VueLoaderPlugin(), // 这里 vue 需要额外添加一个插件,将定义的 .js 、 .css 规则应用到 .vue 文件中
],
module:{
rules:[
{
test:/\.vue$/, // 处理 .vue 文件
loader: 'vue-loader'
},
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 定义 vue 的重命名
}
}
};
复制代码
完善 webpack 配置
配置完 vue 的处理规则后,我们的基本配置就已经完成了。在前三篇文章中,我们添加的 js 、css 以及资源文件的处理规则,同样适用于 vue 单文件组件,以下完善了一些配置:
- 在输出的 js 和资源文件后面加上了哈希值,防止缓存;
- 加入了
babel-loader
来处理.js
文件,查看第一篇文章 了解如何安装; - 添加了
html
模板文件,然后使用html-webpack-plugin
插件动态生成 html,查看第三篇文章 了解如何安装; - 在
css
的处理上,加入了vue-style-loader
处理规则;
此时,完整的 webpack.config.js
文件如下:
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/js/index.js', // 入口文件
plugins: [
new CleanWebpackPlugin(), // 清除旧资源
new HtmlWebpackPlugin({ // 动态生成 html 文件
template: './src/index.html',
}),
new VueLoaderPlugin(), // 这里 vue 需要额外添加一个插件,将定义的 .js 、 .css 规则应用到 .vue 文件中
],
output:{
filename:'index.js?[hash]', // 添加哈希值,防止缓存
path:path.resolve(__dirname,'dist') // 输出文件夹
},
module:{
rules:[
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.css$/, // 处理 css 文件,以及 .vue 文件中的 <style>
use:[
'vue-style-loader',
'style-loader',
'css-loader',
'postcss-loader'
]
},
{
test:/\.(png|svg|jpg|gif)$/, // 管理图片资源
use:[
{
loader:'file-loader',
options:{
name:'[path][name].[ext]?[hash]', // 处理结果将保持原文件名,文件路径后添加哈希值避免缓存
}
},
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/, // 管理文字资源
use:[
{
loader:'file-loader',
options:{
name:'[path][name].[ext]?[hash]', // 处理结果将保持原文件名,文件路径后添加哈希值避免缓存
}
}
]
},
{
test: /\.(mp3|wav|wma|ape|aac)$/i, // 管理文字资源
use:[
{
loader:'file-loader',
options:{
name:'[path][name].[ext]?[hash]', // 处理结果将保持原文件名,文件路径后添加哈希值避免缓存
}
}
]
},
{
test:/\.vue$/, // 处理 .vue 文件
loader: 'vue-loader'
},
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
};
复制代码
完整的 package.json
文件如下:
{
"name": "webpack_vue",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"babel-loader": "^8.0.5",
"clean-webpack-plugin": "^2.0.1",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"postcss-loader": "^3.0.0",
"precss": "^4.0.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1"
}
}
复制代码
文件目录
为了防止文件过多导致资源混乱,我们可以整理我们的文件夹目录,此时我的文件目录如下:
webpack-vue
|- node_modules
|- /dist
|- /src
|- assets
|- btn_longtap.png
|- css
|- js
|- index.js
|- index.html
|- package.json
|- package-lock.json
|- postcss.config.js
|- webpack.config.js
复制代码
文件目录说明:
./src/js/index.js
文件为入口文件;./src
文件夹为编译前文件夹,./dist
文件夹为编译后的文件夹;
添加代码
完成配置,整理好目录后,我们就可以添加代码来测试我们的配置了。
在 ./src/index.html
文件中添加代码:
<html>
<body>
<div id="app"></div>
</body>
</html>
复制代码
在 ./src/js
文件夹下面创建 vue 文件 App.vue
,并添加代码:
<template>
<div class="app">
<p>{{str}}</p>
<img src="../assets/btn_longtap.png">
</div>
</template>
<script>
export default {
data(){
return{
str: 'succrss',
}
}
}
</script>
<style scoped>
$color_index : 1;
.app{
@if $color_index == 1{
color: red;
}@else{
color: blue;
}
}
</style>
复制代码
在 ./src/index.js
文件中添加代码:
import Vue from 'vue';
import App from './App.vue';
new Vue({
el:"#app",
template: '<App/>',
components:{
App
}
});
复制代码
编译程序
运行命令行
$ npm run build
复制代码
可以在控制台看到 webpack 处理过的文件都加入了哈希值:
在 ./dist
文件夹可以新生成的文件。并且资源文件统一放置到 ./dist/src/assets
文件下,文件名与目录结构与编译前保持一致:
此时页面效果如下,说明 App.vue
文件被成功编译:
总结
- 在
webpack.config.js
文件中配置 vue 的处理规则,除了添加rule
,vue 需要额外添加一个插件,将定义的.js
、.css
规则应用到.vue
文件中;另外需要定义 vue 的重命名,否则页面无法显示template
中的内容; - 给文件名添加哈希值
?[hash]
可以避免缓存; css
以内部样式插入,因此不需要加哈希值;- 使用 vue 单文件组件后,
index.html
的使用率就很低了,我们可以创建html
模板文件,然后使用html-webpack-plugin
插件动态生成 html; - 下一步,将用 webpack 编译 TypeScript 代码。
参考链接
- vue-loader 文档:vue-loader.vuejs.org/zh/
- webpack loaders 文档:webpack.docschina.org/loaders/
更多文章
- 查看 网易创意部 其他小伙伴的文章:github.com/f2e-netease…
- 查看我的更多文章:github.com/NalvyBoo/bl…