vue项目webpack配置
必要的库
首先初始化项目
1 | npm init |
安装必要的库
1 | npm install -S vue vue-router |
然后是构建工具,在webpack4中需要单独安装cli
1 | npm install -D webpack webpack-cli |
项目结构
- main.js: 是应用的入口
- src目录:存放代码
- App.vue:存放根组件
- views:存放所有顶层组件
- router.js:存放路由
- stores:存放vuex的actions/mutations
- assets:存放图片
- shared:存放共享组件
接下来需要配置webpack来打包整个应用,webpack通过entry来构建整个依赖图,使用不同的loaders来加载文件.
1 | ├── package-lock.json |
Webpack配置
开发配置
编写开发中使用的配置。
- 将mode改为development
- 入口entry设置为’./‘
- 安装vue-loader(导入单文件组件形式的
.vue
文件)、vue-template-compiler(用于编译vue模版,生成渲染函数)、vue-style-loader(style-loader的改版,style-loader用于将css打包放入<style>标签中)、css-loader(将url()
、@import
的代码导入)
在.vue
文件中如果需要import xx from '@/icons'
,需要设置路径别名,
1 | resolve: { |
一般看到的代码不需要import xx from '@/icons.vue'
这是因为在resolve中指定了默认的扩展名.
1 | resolve: { |
Vue-loader
vue-loader将.vue
文件拆分后需要根据不同的代码来调用指定的loader,这个拦截操作是由VueLoaderPlugin
实现,比如<script>
中的代码,会应用在test: /\.js$/
的加载器
1 | const { VueLoaderPlugin } = require('vue-loader') |
SASS
为支持Sass,需要安装相关加载器sass-loader
1 | npm install sass-loader node-sass webpack --save-dev |
写入配置,loader执行从下到上执行
1 | { |
SVG导入
因为icon都是svg格式文件,需要使用加载器导入,这里使用svg-sprite-loader,将svg导入为svg雪碧图。
1 | npm install svg-sprite-loader -D |
1 | { |
Dev-server
每次修改都需要手动执行webpack --config webpack.config.dev.js
很麻瓜,还要webpack能够使用webpack-dev-server。
首先安装一波
1 | npm install --save-dev webpack-dev-server |
修改原来的command
1 | 原来的 |
JS文件注入
需要把构建好的文件自动注入到index.html中
1 | npm install --save-dev html-webpack-plugin |
在webpack.config.dev.js中新增
1 | const HtmlWebpackPlugin = require('html-webpack-plugin') |
HMR
现在就能修改文件后会自动编译刷新,但这样的整页刷新有点捞,使用webpack自带的HotModuleReplacementPlugin来实现热替换。
1 | const webpack = require('webpack') |
ES6语法
为了支持es6语法,需要安装babel转译器
1 | npm install --save-dev @babel/core babel-loader @babel/preset-env |
在webpack.config.dev.js新增
1 | { |
添加.babelrc
,填入下面的代码
1 | { |
###代码风格
为了规范代码风格,使用eslint
首先是安装
1 | npm install --save-dev eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-config-standard babel-eslint eslint-loader eslint-plugin-vue |
在根目录创建.eslintrc.js,填写规范
1 | module.exports = { |
在package.json中添加新命令"lint": "eslint --ext .js,.vue src"
静态文件处理
将它们拷贝到dist目录
1 | npm install --save-dev copy-webpack-plugin |
1 | const CopyWebpackPlugin = require('copy-webpack-plugin') |
测试
Vue.js的官方单元测试是vue-test-utils,教程https://vue-test-utils.vuejs.org/
安装依赖
1 | npm install --save-dev jest babel-jest vue-jest jest-serializer-vue @vue/test-utils |
Jest: 是单元测试驱动器,vue-jest将单文件组件转换为jest的格式,jest-serializer-vue提供vue组件快照功能。因为测试是跑在node环境,所以新语法需要使用babel-jest,然后提供jest.transform配置。在webpack中使用babel-preset-env
,babel会默认关闭es module的转译,因为webpack默认支持,所以需要开启。
向package.json文件添加下面的配置
1 | "scripts": { |
在使用时遇到
1 |
|
因为我的babel太新了,所以vue-jest的require(‘babel-core’)是老babel写法。将vue-jest/compilers/babel-compiler.js中改为require(‘@babel/core’)
提取CSS
将vue单组件文件中的css部分提取到单独的css文件中
1 | npm install --save-dev mini-css-extract-plugin |
在webpack中添加相关plugin
1 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') |
环境分离
将webpack配置分为develop和production两个,首先将原有文件改为webpack.config.comm.js,安装clean-webpack-plugin、webpack-merge
1 | npm install --save-dev clean-webpack-plugin webpack-merge |
新增clean-webpack-plugin配置到webpack.config.comm.js
1 | plugins: [ |
- 新建webpack.config.dev.js将devServer相关代码复制进来,使用webpack-merge合并webpack.config.comm.js
- 新建webpack.config.prod.js将mode改为 ‘production’,使用webpack-merge合并webpack.config.comm.js
- mini-css-extract-plugin这个插件会导致hmr对于css的改动不会自动刷新,所以将这个插件的配置放到prod中
修改package.json
1 | "scripts": { |
使用npm run build
用于打包应用,npm run dev
用于开发
美化构建过程
安装相关组件主要是不显示webpack自带的输出,而是改为friendly-errors-webpack
来输出。webpackbar美化进度条
npm install friendly-errors-webpack-plugin webpackbar --save-dev
1 | devServer: { |
SASS全局变量
因为需要对一些颜色啥的统一起来,所以将它们放到src/styles/index.scss
中,然后在组件里直接使用这些变量就行。这个功能需要npm install -S sass-resources-loader
然后在css、scss的加载器前添加它,resources选项就是指明那些全局变量的地址。
1 | rules: [ |
加载字体
因为用了Element-UI,然后导入样式时import 'element-ui/lib/theme-chalk/index.css'
会出现错误:
1 | Failed to compile. |
这是因为没有配置字体的loader,这个loader就是url-loader
首先安装npm install -D url-loader
,然后配置
1 | { |
需要注意的是因为之前配置的图标使用了svg-sprite-loader,在url-loader处理后导致svg-sprite-loader出错,这时候添加exlude字段就行,排除图标所在文件夹。
在svg-sprite-loader指定svg图片路径:
1 | { |
import()动态加载
这个语法需要babel的插件
npm install @babel/plugin-syntax-dynamic-import -S
在babelrc中添加
1 | { |
开发页面时代理问题
有时候前端使用不同的URL来调用后端API,比如API是知乎提供的,使用前端ajax请求就会遇到跨域问题,我是使用flask需要安装Flask-Cros,webpack的devServer需要配置, http://127.0.0.1:5000就是后端提供的api地址:
1 | proxy: { |
最终配置
请参考我的github仓库vue-webpack
参考
https://itnext.io/vuejs-and-webpack-4-from-scratch-part-1-94c9c28a534a
https://itnext.io/vue-js-and-webpack-4-from-scratch-part-2-5038cc9deffb
https://itnext.io/vue-js-and-webpack-4-from-scratch-part-3-3f68d2a3c127
- 本文链接:https://dowob.cn/2019/03/19/vue%E9%A1%B9%E7%9B%AEwebpack%E9%85%8D%E7%BD%AE/
- 版权声明:本站所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 CN 许可协议。转载请注明出处!