一步步使用 webpack 第四篇:使用 webpack 编译 vue 代码
栏目: JavaScript · 发布时间: 5年前
内容简介:之前写的三篇文章,分别简单介绍了如何配置 webpack 完成es6 代码编译、PostCSS 代码编译、以及本文使用的 webpack 的版本为:本文的目的是完成 vue 的编译
之前写的三篇文章,分别简单介绍了如何配置 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 第四篇:使用 webpack 编译 vue 代码》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 使用源码编译Hadoop
- 使用 Docker 进行交叉编译
- go使用之-编译约束
- 使用 Visual Studio 编译时,让错误一开始发生时就停止编译(以便及早排查编译错误节省时间)
- 一步步使用 webpack 第二篇:使用 webpack 编译 PostCSS 代码
- 一步步使用 webpack 第五篇:使用 webpack 编译 TypeScript 代码
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。